@ember-eui/core 1.6.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  ### Master
4
4
 
5
+ ### 1.6.3
6
+ 🐛 Bug / Fixes
7
+ `@ember-eui/core`
8
+ - Fix inline-styling weird bug
9
+
10
+ ### 1.6.2
11
+ 🐛 Bug / Fixes
12
+ `@ember-eui/validated-form`
13
+ - Bubble the change correctly from `<Form.FieldMarkdownEditor />`
14
+ ### 1.6.1
15
+ 🐛 Bug / Fixes
16
+ `@ember-eui/core`
17
+ - Add default yield block for `<EuiStat />`
18
+
5
19
  ### 1.6.0
6
20
  🚀 Enhancements
7
21
  `@ember-eui/core`
package/README.md CHANGED
@@ -8,20 +8,15 @@ For icons to work you will need to:
8
8
 
9
9
  - install `ember-svg-jar`
10
10
  - add the following `ember-svg-jar` options to your `ember-cli-build.js`:
11
- - NOTICE: we are currently using a fork from ember-svg-jar, for the hbs strategy
12
- `"ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag"`
13
11
 
14
12
  ```javascript
15
13
  // ember-cli-build.js
16
14
  var app = new EmberApp(defaults, {
17
15
  ...
18
16
  svgJar: {
19
- strategy: ['hbs'],
20
- hbs: {
21
- stripPath: false,
22
- },
23
17
  sourceDirs: [
24
18
  'public/assets',
19
+ '../node_modules/@ember-eui/core/public',
25
20
  'node_modules/@elastic/eui/lib/components/icon',
26
21
  ],
27
22
  },
@@ -30,8 +25,6 @@ var app = new EmberApp(defaults, {
30
25
 
31
26
  ```
32
27
 
33
- We use `ember-svg-jar` to create SVGs as TOC (Template only components) with the `hbs` strategy. For fingerprinting and such, `ember-svg-jar#add-bundle-flag` exposes an `svg-jar` service, with a `resolveAsset` callback/hook, so you can implement your own resolver, you could use for example [ember-cli-resolve-assset](https://github.com/buschtoens/ember-cli-resolve-asset).
34
-
35
28
  ## Compatibility
36
29
 
37
30
  - Ember.js v3.12 or above
@@ -2,37 +2,46 @@
2
2
  <EuiOverlayMask @headerZindexLocation="below" {{on "click" @onClose}} />
3
3
  {{/if}}
4
4
  {{set-body-class "euiBody--hasFlyout"}}
5
- <div
6
- role="dialog"
7
- class={{class-names
8
- (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
9
- componentName="EuiFlyout"
10
- size=(arg-or-default @size "m")
11
- }}
12
- tabindex={{0}}
13
- ...attributes
14
- {{style
15
- (if (not (or (eq @maxWidth false) (eq @maxWidth true))) (inline-styles max-width=@maxWidth))
16
- }}
17
- {{focus-trap
18
- isActive=(arg-or-default @isFocusTrapActive true)
19
- shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
20
- isPaused=(arg-or-default @isFocusTrapPaused false)
21
- focusTrapOptions=(arg-or-default
22
- @focusTrapOptions (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
23
- )
24
- }}
25
- {{on-key "Escape" @onClose}}
26
- >
27
- {{#if (and @onClose (not @hideCloseButton))}}
28
- <EuiButtonIcon
29
- class="euiFlyout__closeButton"
30
- aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
31
- @iconType="cross"
32
- @color="text"
33
- data-test-subj="euiFlyoutCloseButton"
34
- {{on "click" @onClose}}
35
- />
36
- {{/if}}
37
- {{yield}}
38
- </div>
5
+
6
+ {{#let
7
+ (if
8
+ (not (or (eq @maxWidth false) (eq @maxWidth true)))
9
+ (inline-styles max-width=@maxWidth)
10
+ (hash)
11
+ )
12
+ as |inlineStyles|
13
+ }}
14
+ <div
15
+ role="dialog"
16
+ class={{class-names
17
+ (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
18
+ componentName="EuiFlyout"
19
+ size=(arg-or-default @size "m")
20
+ }}
21
+ tabindex={{0}}
22
+ ...attributes
23
+ {{style inlineStyles}}
24
+ {{focus-trap
25
+ isActive=(arg-or-default @isFocusTrapActive true)
26
+ shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
27
+ isPaused=(arg-or-default @isFocusTrapPaused false)
28
+ focusTrapOptions=(arg-or-default
29
+ @focusTrapOptions
30
+ (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
31
+ )
32
+ }}
33
+ {{on-key "Escape" @onClose}}
34
+ >
35
+ {{#if (and @onClose (not @hideCloseButton))}}
36
+ <EuiButtonIcon
37
+ class="euiFlyout__closeButton"
38
+ aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
39
+ @iconType="cross"
40
+ @color="text"
41
+ data-test-subj="euiFlyoutCloseButton"
42
+ {{on "click" @onClose}}
43
+ />
44
+ {{/if}}
45
+ {{yield}}
46
+ </div>
47
+ {{/let}}
@@ -16,24 +16,26 @@
16
16
  ...attributes
17
17
  />
18
18
  {{else}}
19
- <Svg
20
- @name={{this.icon}}
21
- @loadingSvg={{this.emptyIcon}}
22
- class={{class-names
23
- this.optionalColorClass
24
- (if this.isAppIcon "euiIcon--app")
25
- componentName="EuiIcon"
26
- size=this.size
27
- }}
28
- style={{this.optionalCustomStyles}}
29
- tabIndex={{this.tabIndex}}
30
- role="image"
31
- aria-hidden={{if this.isAriaHidden true}}
32
- aria-label={{if @aria-label @aria-label this.titleId}}
33
- aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
34
- @title={{@title}}
35
- @onIconLoad={{@onIconLoad}}
19
+ <div
20
+ class={{class-names "euiIcon" (if this.isAppIcon "euiIcon--app")}}
36
21
  ...attributes
37
- />
22
+ >
23
+ {{svg-jar
24
+ this.icon
25
+ class=(class-names
26
+ this.optionalColorClass
27
+ (if this.isAppIcon "euiIcon--app")
28
+ componentName="EuiIcon"
29
+ addBase=false
30
+ size=this.size
31
+ )
32
+ role="image"
33
+ aria-hidden=(if this.isAriaHidden "true")
34
+ aria-label=(if @aria-label @aria-label this.titleId)
35
+ aria-labelledby=(if @aria-labelledby @aria-labelledby this.titleId)
36
+ tabindex=this.tabIndex
37
+ style=this.optionalCustomStyles
38
+ }}
39
+ </div>
38
40
  {{/if}}
39
41
  {{/if}}
@@ -118,10 +118,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
118
118
  }
119
119
 
120
120
  getEuiIconSvgPath(type: EuiIconType): string {
121
- const config = getOwner(this).resolveRegistration('config:environment');
122
- const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/assets/';
123
- const euiIcon = typeToPathMap[type].replace(/_/g, '-').toLowerCase();
124
- return `${svgPath}${euiIcon}`;
121
+ return typeToPathMap[type].replace('tokens/', '');
125
122
  }
126
123
 
127
124
  get isAppIcon(): string | boolean {
@@ -1,18 +1,24 @@
1
- <ul
2
- class={{class-names
3
- (if (eq @maxWidth true) "euiListGroup-maxWidthDefault")
4
- (if @bordered "euiListGroup-bordered")
5
- (if @flush "euiListGroup-flush")
6
- componentName="EuiListGroup"
7
- gutterSize=(arg-or-default @gutterSize "s")
8
- }}
9
- ...attributes
10
- {{style
11
- (if
12
- (and @maxWidth (not-eq @maxWidth true))
13
- (inline-styles componentName="EuiListGroup" componentArgs=(hash maxWidth=@maxWidth))
1
+ {{#let
2
+ (if
3
+ (and @maxWidth (not-eq @maxWidth true))
4
+ (inline-styles
5
+ componentName="EuiListGroup" componentArgs=(hash maxWidth=@maxWidth)
14
6
  )
15
- }}
16
- >
17
- {{yield}}
18
- </ul>
7
+ (hash)
8
+ )
9
+ as |inlineStyles|
10
+ }}
11
+ <ul
12
+ class={{class-names
13
+ (if (eq @maxWidth true) "euiListGroup-maxWidthDefault")
14
+ (if @bordered "euiListGroup-bordered")
15
+ (if @flush "euiListGroup-flush")
16
+ componentName="EuiListGroup"
17
+ gutterSize=(arg-or-default @gutterSize "s")
18
+ }}
19
+ ...attributes
20
+ {{style inlineStyles}}
21
+ >
22
+ {{yield}}
23
+ </ul>
24
+ {{/let}}
@@ -12,7 +12,7 @@
12
12
  </EuiToolTip>
13
13
 
14
14
  {{/each}}
15
- <span className="euiMarkdownEditorToolbar__divider"></span>
15
+ <span class="euiMarkdownEditorToolbar__divider"></span>
16
16
  {{#each this.listButtons as |item|}}
17
17
  <EuiToolTip @content={{item.label}} @delay="long">
18
18
  <EuiButtonIcon
@@ -26,7 +26,7 @@
26
26
  </EuiToolTip>
27
27
 
28
28
  {{/each}}
29
- <span className="euiMarkdownEditorToolbar__divider"></span>
29
+ <span class="euiMarkdownEditorToolbar__divider"></span>
30
30
  {{#each this.quoteCodeLinkButtons as |item|}}
31
31
  <EuiToolTip @content={{item.label}} @delay="long">
32
32
  <EuiButtonIcon
@@ -40,7 +40,7 @@
40
40
 
41
41
  {{/each}}
42
42
  {{#if (gte this.uiPlugins.length 0)}}
43
- <span className="euiMarkdownEditorToolbar__divider"></span>
43
+ <span class="euiMarkdownEditorToolbar__divider"></span>
44
44
  {{#each this.uiPlugins as |plugin|}}
45
45
  {{#let
46
46
  (and @selectedNode (eq @selectedNode.type plugin.name))
@@ -1,28 +1,37 @@
1
- <div
2
- class={{class-names "euiModal" (if (eq @maxWidth true) "euiModal--maxWidth-default")}}
3
- tabindex="0"
4
- ...attributes
5
- {{style
6
- (if
7
- (and @maxWidth (not-eq @maxWidth true))
8
- (inline-styles componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth))
1
+ {{#let
2
+ (if
3
+ (and @maxWidth (not-eq @maxWidth true))
4
+ (inline-styles
5
+ componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth)
9
6
  )
10
- }}
11
- {{focus-trap
12
- isActive=(arg-or-default @isFocusTrapActive true)
13
- shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
14
- isPaused=(arg-or-default @isFocusTrapPaused false)
15
- focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
16
- }}
17
- {{on-key "Escape" @onClose}}
18
- >
19
- <EuiButtonIcon
20
- class="euiModal__closeIcon"
21
- @iconType="cross"
22
- @color="text"
23
- {{on "click" @onClose}}
24
- />
25
- <div class="euiModal__flex">
26
- {{yield}}
7
+ (hash)
8
+ )
9
+ as |inlineStyles|
10
+ }}
11
+ <div
12
+ class={{class-names
13
+ "euiModal"
14
+ (if (eq @maxWidth true) "euiModal--maxWidth-default")
15
+ }}
16
+ tabindex="0"
17
+ ...attributes
18
+ {{style inlineStyles}}
19
+ {{focus-trap
20
+ isActive=(arg-or-default @isFocusTrapActive true)
21
+ shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
22
+ isPaused=(arg-or-default @isFocusTrapPaused false)
23
+ focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
24
+ }}
25
+ {{on-key "Escape" @onClose}}
26
+ >
27
+ <EuiButtonIcon
28
+ class="euiModal__closeIcon"
29
+ @iconType="cross"
30
+ @color="text"
31
+ {{on "click" @onClose}}
32
+ />
33
+ <div class="euiModal__flex">
34
+ {{yield}}
35
+ </div>
27
36
  </div>
28
- </div>
37
+ {{/let}}
@@ -78,5 +78,6 @@
78
78
  {{/if}}
79
79
  </p>
80
80
  {{/if}}
81
+ {{yield}}
81
82
  </div>
82
83
  {{/let}}
@@ -27,7 +27,7 @@
27
27
  />
28
28
  {{/if}}
29
29
 
30
- <span className="euiToastHeader__title">
30
+ <span class="euiToastHeader__title">
31
31
  {{@title}}
32
32
  </span>
33
33
  </div>
@@ -0,0 +1,28 @@
1
+ /* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
2
+ .euiAvatar {
3
+ -webkit-flex-shrink: 0;
4
+ flex-shrink: 0;
5
+ display: -webkit-inline-flex;
6
+ display: inline-flex;
7
+ -webkit-justify-content: center;
8
+ justify-content: center;
9
+ -webkit-align-items: center;
10
+ align-items: center;
11
+ background-size: cover;
12
+ text-align: center;
13
+ vertical-align: middle;
14
+ overflow-x: hidden;
15
+ font-weight: 500;
16
+ }
17
+
18
+ .euiMarkdownEditor--fullHeight {
19
+ display: -webkit-flex;
20
+ display: flex;
21
+ -webkit-flex-direction: column;
22
+ flex-direction: column;
23
+ height: 100%;
24
+ }
25
+
26
+ .euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
27
+ display: none;
28
+ }
@@ -1,30 +1 @@
1
- /* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
2
- .euiAvatar {
3
- -webkit-flex-shrink: 0;
4
- flex-shrink: 0;
5
- display: -webkit-inline-flex;
6
- display: inline-flex;
7
- -webkit-justify-content: center;
8
- justify-content: center;
9
- -webkit-align-items: center;
10
- align-items: center;
11
- background-size: cover;
12
- text-align: center;
13
- vertical-align: middle;
14
- overflow-x: hidden;
15
- font-weight: 500;
16
- }
17
-
18
- .euiMarkdownEditor--fullHeight {
19
- display: -webkit-flex;
20
- display: flex;
21
- -webkit-flex-direction: column;
22
- flex-direction: column;
23
- height: 100%;
24
- }
25
-
26
- .euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
27
- display: none;
28
- }
29
-
30
1
  @import 'ember-eui-components';
@@ -1,53 +1,68 @@
1
1
  # Demo
2
2
 
3
3
  ```hbs template
4
- <EuiText style="cursor: pointer;" {{on "mousemove" this.update}}>
5
- You can hover on the icon below, open the network tab, all svgs are loaded on demand!
4
+ <EuiText style='cursor: pointer;' {{on 'mousemove' this.update}}>
5
+ You can hover on the icon below, open the network tab, all svgs are loaded on
6
+ demand!
6
7
  <EuiIcon @type={{this.icon}} />
7
- <EuiIcon @type={{this.icon}} @size="m" />
8
- <EuiIcon @type={{this.icon}} @size="l" />
9
- <EuiIcon @type={{this.icon}} @size="xl" />
10
- <EuiIcon @type={{this.icon}} @size="xxl" />
8
+ <EuiIcon @type={{this.icon}} @size='m' />
9
+ <EuiIcon @type={{this.icon}} @size='l' />
10
+ <EuiIcon @type={{this.icon}} @size='xl' />
11
+ <EuiIcon @type={{this.icon}} @size='xxl' />
11
12
  </EuiText>
12
13
  <br />
13
- <EuiIcon @type="logoGolang" />
14
- <EuiIcon @type="logoGolang" @size="m" />
15
- <EuiIcon @type="logoGolang" @size="l" />
16
- <EuiIcon @type="logoGolang" @size="xl" />
17
- <EuiIcon @type="logoGolang" @size="xxl" />
14
+ <EuiIcon @type='logoGolang' />
15
+ <EuiIcon @type='logoGolang' @size='m' />
16
+ <EuiIcon @type='logoGolang' @size='l' />
17
+ <EuiIcon @type='logoGolang' @size='xl' />
18
+ <EuiIcon @type='logoGolang' @size='xxl' />
18
19
  <br />
19
- <EuiIcon @type="logoRedis" @size="s" />
20
- <EuiIcon @type="logoRedis" @size="m" />
21
- <EuiIcon @type="logoRedis" @size="l" />
22
- <EuiIcon @type="logoRedis" @size="xl" />
23
- <EuiIcon @type="logoRedis" @size="xxl" />
20
+ <EuiIcon @type='logoRedis' @size='s' />
21
+ <EuiIcon @type='logoRedis' @size='m' />
22
+ <EuiIcon @type='logoRedis' @size='l' />
23
+ <EuiIcon @type='logoRedis' @size='xl' />
24
+ <EuiIcon @type='logoRedis' @size='xxl' />
24
25
  <br />
25
- <EuiIcon @type="logoAWS" @size="s" />
26
- <EuiIcon @type="logoAWS" @size="m" />
27
- <EuiIcon @type="logoAWS" @size="l" />
28
- <EuiIcon @type="logoAWS" @size="xl" />
29
- <EuiIcon @type="logoAWS" @size="xxl" />
26
+ <EuiIcon @type='logoAWS' @size='s' />
27
+ <EuiIcon @type='logoAWS' @size='m' />
28
+ <EuiIcon @type='logoAWS' @size='l' />
29
+ <EuiIcon @type='logoAWS' @size='xl' />
30
+ <EuiIcon @type='logoAWS' @size='xxl' />
30
31
  <br />
31
- <EuiIcon @type="/assets/ember.svg" @size="s" />
32
- <EuiIcon @type="/assets/ember.svg" @size="m" />
33
- <EuiIcon @type="/assets/ember.svg" @size="l" />
34
- <EuiIcon @type="/assets/ember.svg" @size="xl" />
35
- <EuiIcon @type="/assets/ember.svg" @size="xxl" />
32
+ <EuiIcon @type='/assets/ember.svg' @size='s' />
33
+ <EuiIcon @type='/assets/ember.svg' @size='m' />
34
+ <EuiIcon @type='/assets/ember.svg' @size='l' />
35
+ <EuiIcon @type='/assets/ember.svg' @size='xl' />
36
+ <EuiIcon @type='/assets/ember.svg' @size='xxl' />
36
37
  <br />
37
- <EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="s" />
38
- <EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="m" />
39
- <EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="l" />
40
- <EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="xl" />
41
- <EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="xxl" />
38
+ <EuiIcon
39
+ @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
40
+ @size='s'
41
+ />
42
+ <EuiIcon
43
+ @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
44
+ @size='m'
45
+ />
46
+ <EuiIcon
47
+ @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
48
+ @size='l'
49
+ />
50
+ <EuiIcon
51
+ @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
52
+ @size='xl'
53
+ />
54
+ <EuiIcon
55
+ @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
56
+ @size='xxl'
57
+ />
42
58
  <br />
43
- <EuiIcon @type="flag" @size="s" @color="green" />
44
- <EuiIcon @type="flag" @size="m" @color="white" />
45
- <EuiIcon @type="flag" @size="l" @color="red" />
46
- <EuiIcon @type="flag" @size="xl" @color="green" />
47
- <EuiIcon @type="flag" @size="xxl" @color="white" />
59
+ <EuiIcon @type='flag' @size='s' @color='green' />
60
+ <EuiIcon @type='flag' @size='m' @color='white' />
61
+ <EuiIcon @type='flag' @size='l' @color='red' />
62
+ <EuiIcon @type='flag' @size='xl' @color='green' />
63
+ <EuiIcon @type='flag' @size='xxl' @color='white' />
48
64
  ```
49
65
 
50
-
51
66
  ```js component
52
67
  import Component from '@glimmer/component';
53
68
  import { tracked } from '@glimmer/tracking';
@@ -65,5 +80,4 @@ export default class DemoIconComponent extends Component {
65
80
  this.icon = this.icons[Math.floor(Math.random() * this.icons.length)];
66
81
  }
67
82
  }
68
-
69
- ```
83
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ember-eui/core",
3
- "version": "1.6.0",
3
+ "version": "2.0.0",
4
4
  "description": "Ember Components for Elastic UI",
5
5
  "keywords": [
6
6
  "ember-addon",
@@ -75,7 +75,7 @@
75
75
  "ember-set-body-class": "^1.0.2",
76
76
  "ember-set-helper": "^2.0.0",
77
77
  "ember-style-modifier": "^0.6.0",
78
- "ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag",
78
+ "ember-svg-jar": "^2.3.4",
79
79
  "ember-truth-helpers": "^2.1.0",
80
80
  "highlight.js": "^9.18.5",
81
81
  "lodash-es": "^4.17.21",
@@ -154,5 +154,5 @@
154
154
  "volta": {
155
155
  "node": "12.22.1"
156
156
  },
157
- "gitHead": "da091fff2aaf81d6988bc7c2ef11999764750d8b"
157
+ "gitHead": "a225f53d9f2212e3eb5ab0c28daeabc5624031ab"
158
158
  }