@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 +14 -0
- package/README.md +1 -8
- package/addon/components/eui-flyout/index.hbs +43 -34
- package/addon/components/eui-icon/index.hbs +20 -18
- package/addon/components/eui-icon/index.ts +1 -4
- package/addon/components/eui-list-group/index.hbs +23 -17
- package/addon/components/eui-markdown-editor-toolbar/index.hbs +3 -3
- package/addon/components/eui-modal/index.hbs +35 -26
- package/addon/components/eui-stat/index.hbs +1 -0
- package/addon/components/eui-toast/index.hbs +1 -1
- package/addon/styles/ember-eui.css +28 -0
- package/app/styles/ember-eui.scss +0 -29
- package/docs/display/icons-demo/demo1.md +53 -39
- package/package.json +3 -3
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
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
<
|
|
20
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
(
|
|
4
|
-
(
|
|
5
|
-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
37
|
+
{{/let}}
|
|
@@ -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=
|
|
5
|
-
You can hover on the icon below, open the network tab, all svgs are loaded on
|
|
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=
|
|
8
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
9
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
10
|
-
<EuiIcon @type={{this.icon}} @size=
|
|
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=
|
|
14
|
-
<EuiIcon @type=
|
|
15
|
-
<EuiIcon @type=
|
|
16
|
-
<EuiIcon @type=
|
|
17
|
-
<EuiIcon @type=
|
|
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=
|
|
20
|
-
<EuiIcon @type=
|
|
21
|
-
<EuiIcon @type=
|
|
22
|
-
<EuiIcon @type=
|
|
23
|
-
<EuiIcon @type=
|
|
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=
|
|
26
|
-
<EuiIcon @type=
|
|
27
|
-
<EuiIcon @type=
|
|
28
|
-
<EuiIcon @type=
|
|
29
|
-
<EuiIcon @type=
|
|
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=
|
|
32
|
-
<EuiIcon @type=
|
|
33
|
-
<EuiIcon @type=
|
|
34
|
-
<EuiIcon @type=
|
|
35
|
-
<EuiIcon @type=
|
|
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
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<EuiIcon
|
|
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=
|
|
44
|
-
<EuiIcon @type=
|
|
45
|
-
<EuiIcon @type=
|
|
46
|
-
<EuiIcon @type=
|
|
47
|
-
<EuiIcon @type=
|
|
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": "
|
|
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": "
|
|
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": "
|
|
157
|
+
"gitHead": "a225f53d9f2212e3eb5ab0c28daeabc5624031ab"
|
|
158
158
|
}
|