@ember-eui/core 5.8.0 → 5.8.3

package/addon/components/eui-combo-box/index.hbs

@@ -29,6 +29,7 @@
     )
     isLoading=@isLoading
     autoFocus=(and (not @isDisabled) @autoFocus)
+    icon=@triggerIcon
   }}
   @matcher={{@matcher}}
   @initiallyOpen={{@initiallyOpen}}
@@ -70,7 +71,7 @@
     (if @compressed "euiComboBox--compressed")
     (if @fullWidth "euiComboBox--fullWidth")
     (if @isDisabled "euiComboBox-isDisabled")
-    (if @isInvalid "euiComboBox--isInvalid")
+    (if @isInvalid "euiComboBox-isInvalid")
     (if this.select.isOpen "euiComboBox-isOpen")
   }}
   @noMatchesMessageComponent={{if

package/addon/components/eui-combo-box/trigger/index.hbs

@@ -1,5 +1,5 @@
 <EuiFormControlLayout
-  @icon="arrowDown"
+  @icon={{arg-or-default @icon "arrowDown"}}
   @iconSide="right"
   @fullWidth={{@fullWidth}}
   @compressed={{@compressed}}

package/addon/components/eui-empty-prompt/index.hbs

@@ -9,6 +9,7 @@
     @color={{arg-or-default @color "transparent"}}
     @hasBorder={{@hasBorder}}
     @hasShadow={{false}}
+    ...attributes
   >
     <div class="euiEmptyPrompt__main">
       {{#if (has-block "icon")}}
@@ -80,4 +81,4 @@
       {{/if}}
     {{/if}}
   </EuiPanel>
-{{/let}}
+{{/let}}

package/addon/components/eui-switch/index.hbs

@@ -10,6 +10,7 @@
   {{#let
     (class-names
       (if @compressed "euiSwitch--compressed") "euiSwitch"
+      @containerClass
     ) as |classes|
   }}
     <div class={{classes}}>

package/addon/utils/css-mappings/eui-description-list.ts

@@ -13,7 +13,7 @@ export const alignMapping = {
 };
 
 export const textStyleMapping = {
-  center: `${baseClass}--reverse`,
+  reverse: `${baseClass}--reverse`,
   normal: ''
 };
 

package/docs/display/list-group/demo/d01-list-group.md

@@ -1,3 +1,12 @@
+---
+order: 1
+---
+
+ <EuiText>
+    <p>The <strong>EuiListGroup</strong> component is used to present <strong>EuiListGroupItems</strong> in a neatly formatted list. Use the <EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode> properties for full-width and bordered presentations, respectively.
+Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or decrease the spacing between items.</p>
+</EuiText>
+
 ```hbs template
 <EuiFlexGroup>
   <EuiFlexItem>
@@ -47,153 +56,7 @@
           <Input @type='checkbox' @checked={{this.flush}} name='flushed' />
           <label for='flushed'>Flush</label>
         </div>
-        <div>
-          <EuiText>Gutter size</EuiText>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 'none') 'primary'}}
-            @onClick={{set this 'gutterSize' 'none'}}
-          >none</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 's') 'primary'}}
-            @onClick={{set this 'gutterSize' 's'}}
-          >small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.gutterSize 'm') 'primary'}}
-            @onClick={{set this 'gutterSize' 'm'}}
-          >medium</EuiBadge>
-        </div>
-        <div>
-          <EuiText>Max width</EuiText>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'bool') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'bool')
-              (set this 'maxWidth' false)
-            }}
-          >
-            boolean
-          </EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'num') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'num')
-              (set this 'maxWidth' 400)
-            }}
-          >
-            number
-          </EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.maxWidthType 'string') 'primary'}}
-            @onClick={{pipe
-              (set this 'maxWidthType' 'string')
-              (set this 'maxWidth' '')
-            }}
-          >
-            string
-          </EuiBadge>
-        </div>
-        <div>
-          {{#if (eq this.maxWidthType 'bool')}}
-            <Input
-              @type='checkbox'
-              @checked={{this.maxWidth}}
-              name='maxwidth'
-            />
-            <label for='maxwidth'>{{this.maxWidth}}</label>
-          {{else if (eq this.maxWidthType 'num')}}
-            <label for='maxwidth'>Enter value</label>
-            <input
-              type='number'
-              value={{this.maxWidth}}
-              {{on 'input' this.parseToNum}}
-              name='maxwidth'
-            />
-          {{else}}
-            <label for='maxwidth'>Enter value</label>
-            <Input @value={{this.maxWidth}} name='maxwidth' />
-          {{/if}}
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiTitle @size='xs'>First Item</EuiTitle>
-        <div>
-          <Input @type='checkbox' @checked={{this.useHref}} name='useHref' />
-          <label for='useHref'>use Href</label>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.useOnClick}}
-            name='useOnClick'
-          />
-          <label for='useOnClick'>use onClick</label>
-        </div>
-        <div>
-          <Input @type='checkbox' @checked={{this.isActive}} name='isActive' />
-          <label for='isActive'>isActive</label>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.isDisabled}}
-            name='isDisabled'
-          />
-          <label for='isDisabled'>isDisabled</label>
-        </div>
-        <div>
-          <Input @type='checkbox' @checked={{this.wrapText}} name='wrapText' />
-          <label for='wrapText'>wrapText</label>
-        </div>
-        <div>
-          <EuiText>Size</EuiText>
-          <EuiBadge
-            @color={{if (eq this.size 'xs') 'primary'}}
-            @onClick={{set this 'size' 'xs'}}
-          >extra small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 's') 'primary'}}
-            @onClick={{set this 'size' 's'}}
-          >small</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 'm') 'primary'}}
-            @onClick={{set this 'size' 'm'}}
-          >medium</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.size 'l') 'primary'}}
-            @onClick={{set this 'size' 'l'}}
-          >large</EuiBadge>
-        </div>
-        <div>
-          <EuiText>Color</EuiText>
-          <EuiBadge
-            @color={{if (eq this.color 'inherit') 'primary'}}
-            @onClick={{set this 'color' 'inherit'}}
-          >inherit</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'text') 'primary'}}
-            @onClick={{set this 'color' 'text'}}
-          >text</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'subdued') 'primary'}}
-            @onClick={{set this 'color' 'subdued'}}
-          >subdued</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'ghost') 'primary'}}
-            @onClick={{set this 'color' 'ghost'}}
-          >ghost</EuiBadge>
-          <EuiBadge
-            @color={{if (eq this.color 'primary') 'primary'}}
-            @onClick={{set this 'color' 'primary'}}
-          >primary</EuiBadge>
-        </div>
-        <div>
-          <Input
-            @type='checkbox'
-            @checked={{this.useIconType}}
-            name='useIconType'
-          />
-          <label for='useIconType'>use iconType</label>
-        </div>
+
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFlexItem>

package/docs/display/list-group/demo/d02-list-of-links.md

@@ -0,0 +1,47 @@
+---
+order: 2
+---
+
+# List of links
+
+ <EuiText>
+   <p>Display <strong>EuiListGroupItems</strong> as links by providing an <EuiCode>href</EuiCode> value and change their state with the <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode> properties.</p><p>As is done in this example, the <strong>EuiListGroup</strong> component can also accept an array of items via the <EuiCode>listItems</EuiCode> property.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#/display/list-group' @iconType='calendar' @size='s'>
+    First link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='clock'
+    @size='s'
+    @isActive='true'
+  >
+    This is an active link with very long label that truncates
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='compute'
+    @size='s'
+    @isDisabled='true'
+  >
+    Third link is disabled
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='copyClipboard'
+    @size='s'
+  >
+    Fourth link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='crosshairs'
+    @size='s'
+  >
+    Fifth link
+  </EuiListGroupItem>
+</EuiListGroup>
+```

package/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md

@@ -0,0 +1,31 @@
+---
+order: 3
+---
+
+# Text wrapping and tooltips
+
+ <EuiText>
+   <p>Optional props <EuiCode>showToolTip</EuiCode> and <EuiCode>wrapLines</EuiCode> can be used to augment the display of list items. Use these when lists are inside small containers where it is likely that the content will be truncated.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup @showToolTips>
+  <EuiListGroupItem>
+    First item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    Second item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    <span>
+      Third very, very long item that
+      <strong>will surely</strong>
+      force truncation
+    </span>
+  </EuiListGroupItem>
+  <EuiListGroupItem @wrapText={{true}}>Fourth very, very long item with wrapping
+    enabled that will not force truncation</EuiListGroupItem>
+</EuiListGroup>
+```

package/docs/display/list-group/demo/d04-list-item-color-and-size.md

@@ -0,0 +1,27 @@
+---
+order: 4
+---
+
+# List item color and size
+
+ <EuiText>
+   <p><strong>EuiListGroupItems</strong> will inherit the color from their element type whether it is a <EuiCode>button</EuiCode>, <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can enforce a different color of <EuiCode>primary</EuiCode>, <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the <EuiCode>color</EuiCode> prop. Or provide the prop directly to <strong>EuiListGroup</strong>.</p><p>They also accept options for text size; <EuiCode><span class="token string">'xs'</span> <span class="token operator">|</span> <span class="token string">'s'</span> <span class="token operator">|</span> <span class="token string">'m'</span> <span class="token operator">|</span> <span class="token string">'l'</span></EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#' @label='Inherit by default (xs)' @size='xs' />
+
+  <EuiListGroupItem @label='Primary (s)' @color='primary' @size='s' />
+
+  <EuiListGroupItem @href='#' @label='Text (m)' @color='text' />
+
+  <EuiListGroupItem @href='#' @label='Subdued (l)' @color='subdued' @size='l' />
+</EuiListGroup>
+
+<EuiSpacer @size='s' />
+
+<EuiListGroup {{style (inline-styles background='black')}}>
+  <EuiListGroupItem @href='#' @label='Ghost' @color='ghost' />
+</EuiListGroup>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.8.0",
+  "version": "5.8.3",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "530ce7498293425660b8904afadcf49b3841303e"
+  "gitHead": "5a32aacf3226654a8d53290774d188e517afbecc"
 }