@ember-eui/core 5.4.4 → 5.7.0

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

@@ -28,27 +28,32 @@
     @paddingSize={{@paddingSize}}
     ...attributes
   >
-    <div class="euiCard__top">
-      {{#if (has-block "icon")}}
-        {{yield "euiCard__icon" to="icon"}}
-      {{else}}
-        {{#if (or @image @icon)}}
-          {{#if (and @image (not-eq layout "horizontal"))}}
-            <div class="euiCard__image">
-              <img src={{@image}} alt="card-top" />
-            </div>
-          {{/if}}
-          {{#if @icon}}
-            <EuiIcon
-              @iconClasses="euiCard__icon"
-              @type={{@icon}}
-              @size={{@iconSize}}
-            />
+
+    {{#if (or (has-block "icon") (or @image @icon))}}
+      <div class={{this.topClasses}}>
+        {{#if (has-block "icon")}}
+          {{yield "euiCard__icon" to="icon"}}
+        {{else}}
+          {{#if (or @image @icon)}}
+            {{#if (and @image (not-eq layout "horizontal"))}}
+              <div class="euiCard__image">
+                <img src={{@image}} alt="card-top" />
+              </div>
+            {{/if}}
+            {{#if @icon}}
+              <EuiIcon
+                @iconClasses="euiCard__icon"
+                @type={{@icon}}
+                @size={{@iconSize}}
+              />
+            {{/if}}
           {{/if}}
         {{/if}}
-      {{/if}}
-    </div>
-    <div class="euiCard__content">
+      </div>
+    {{/if}}
+
+
+    <div class={{this.contentClasses}}>
       <EuiTitle class="euiCard__title" @size={{arg-or-default @titleSize "s"}}>
         {{#if (has-block "title")}}
           {{yield (set this "link") to="title"}}
@@ -117,7 +122,7 @@
       </span>
     {{/if}}
     {{#if (and (eq layout "vertical") (or (has-block "footer") @footer))}}
-      <div class="euiCard__footer">
+      <div class={{this.footerClasses}}>
         {{#if (has-block "footer")}}
           {{yield to="footer"}}
         {{else}}

package/addon/components/eui-card/index.ts

@@ -4,6 +4,20 @@ import { EuiCardSelectProps, euiCardSelectableColor } from '../eui-card-select';
 
 type EuiCardComponentArgs = {
   selectable?: EuiCardSelectProps;
+  /**
+   * Class that will apply to the card top section.
+   */
+  topClassName?: string;
+
+  /**
+   * Class that will apply to the card content section.
+   */
+  contentClassName?: string;
+
+  /**
+   * Class that will apply to the card footer section.
+   */
+  footerClassName?: string;
 };
 
 export default class EuiCardComponent extends Component<EuiCardComponentArgs> {
@@ -24,4 +38,16 @@ export default class EuiCardComponent extends Component<EuiCardComponentArgs> {
         )}`
       : undefined;
   }
+
+  get topClasses(): string {
+    return ['euiCard__top', this.args.topClassName].join(' ');
+  }
+
+  get contentClasses(): string {
+    return ['euiCard__content', this.args.contentClassName].join(' ');
+  }
+
+  get footerClasses(): string {
+    return ['euiCard__footer', this.args.footerClassName].join(' ');
+  }
 }

package/addon/components/eui-confirm-modal/index.hbs

@@ -1,22 +1,27 @@
-<EuiModal class="euiModal--confirmation" @onClose={{@onCancel}} ...attributes>
-  {{#if @title}}
+<EuiModal
+  class="euiModal--confirmation"
+  @onClose={{@onCancel}}
+  ...attributes
+>
+  
+  {{#if (or @title (has-block 'title'))}}
     <EuiModalHeader>
       <EuiModalHeaderTitle>
         {{@title}}
+        {{yield to='title'}}
       </EuiModalHeaderTitle>
     </EuiModalHeader>
   {{/if}}
-  {{#if (has-block)}}
-    <EuiModalBody>
-      {{yield}}
-    </EuiModalBody>
-  {{else if @message}}
+
+  {{#if (or @message (has-block))}}
     <EuiModalBody>
       <EuiText>
         {{@message}}
+        {{yield}}
       </EuiText>
     </EuiModalBody>
   {{/if}}
+
   <EuiModalFooter>
     <EuiButtonEmpty {{on "click" @onCancel}}>
       {{@cancelButtonText}}
@@ -31,4 +36,5 @@
       {{@confirmButtonText}}
     </EuiButton>
   </EuiModalFooter>
+
 </EuiModal>

package/addon/components/eui-described-form-group/index.hbs

@@ -8,7 +8,11 @@
 >
   <EuiFlexGroup @gutterSize={{arg-or-default @gutterSize "l"}}>
     <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}}>
-      <EuiTitle class="euiDescribedFormGroup__title" @size={{@titleSize}}>
+      <EuiTitle
+        class="euiDescribedFormGroup__title"
+        @size={{@titleSize}}
+        @tagName={{@titleTagName}}
+      >
         {{yield to="title"}}
       </EuiTitle>
       <EuiText

package/addon/components/eui-loading-content/index.hbs

@@ -12,7 +12,12 @@
       )
     )
   }}
-    <span class="euiLoadingContent__singleLine">
+    <span
+      class={{class-names
+        "euiLoadingContent__singleLine"
+        @singleLineClasses
+      }}
+    >
       <span class="euiLoadingContent__singleLineBackground" />
     </span>
   {{/each}}

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

@@ -25,13 +25,13 @@
         isPaused=(arg-or-default @isFocusTrapPaused false)
         focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
       }}
-      {{on-key "Escape" (prevent-default (stop-propagation @onClose))}}
+      {{on-key "Escape" (prevent-default (stop-propagation (optional @onClose)))}}
     >
       <EuiButtonIcon
         class="euiModal__closeIcon"
         @iconType="cross"
         @color="text"
-        {{on "click" @onClose}}
+        {{on "click" (optional @onClose)}}
       />
       <div class="euiModal__flex">
         {{yield}}

package/addon/components/eui-selectable-list-item/index.hbs

@@ -0,0 +1,24 @@
+{{!-- TODO: not fully implemented --}}
+
+<li
+  role="option"
+  aria-selected={{and (not @disabled) (eq (type-of @checked) 'string')}}
+  class={{class-names
+    componentName='EuiSelectableListItem'
+    isFocused=@isFocused
+  }}
+  aria-disabled={{@disabled}}
+  ...attributes
+>
+  <span class="euiSelectableListItem__content">
+    {{!-- {{optionIcon}} --}}
+    {{!-- {{prependNode}} --}}
+    <span class="euiSelectableListItem__text">
+      {{yield}}
+      {{!-- {{state}} --}}
+      {{!-- {{children}} --}}
+      {{!-- {{instruction}} --}}
+    </span>
+    {{!-- {{appendNode}} --}}
+  </span>
+</li>

package/addon/utils/css-mappings/eui-selectable-list-item.ts

@@ -0,0 +1,14 @@
+export const baseClass = 'euiSelectableListItem';
+
+export const isFocusedMapping = {
+  true: `${baseClass}--isFocused`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    isFocused: isFocusedMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/index.ts

@@ -54,6 +54,7 @@ import EuiProgressData from './eui-progress-data';
 import EuiRangeHighlight from './eui-range-highlight';
 import EuiRangeInput from './eui-range-input';
 import EuiRangeLevels from './eui-range-levels';
+import EuiSelectableListItem from './eui-selectable-list-item';
 import EuiSpacer from './eui-spacer';
 import EuiStat from './eui-stat';
 import EuiStepNumber from './eui-step-number';
@@ -123,6 +124,7 @@ const mapping: Mapping = {
   EuiRangeHighlight,
   EuiRangeInput,
   EuiRangeLevels,
+  EuiSelectableListItem,
   EuiSpacer,
   EuiStat,
   EuiStepNumber,

package/app/components/eui-selectable-list-item/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-selectable-list-item';

package/docs/display/{avatar-demo/demo1.md → avatar/demo/d01-basic.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 ```hbs template
 <div>
   <EuiAvatar @size='s' @name='Raphael' />

package/docs/display/{avatar.md → avatar/index.md}

@@ -1,3 +1,8 @@
+---
+title: Avatar
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Avatar"/>
 <EuiHorizontalRule />
 <EuiText>

package/docs/display/{badge.md → badge/index.md}

@@ -1,3 +1,8 @@
+---
+title: Badge
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Badge"/>
 <EuiHorizontalRule />
 <EuiText>

package/docs/display/{callout.md → callout/index.md}

@@ -1,3 +1,8 @@
+---
+title: CallOut
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Callout"/>
 
 <EuiSpacer />
@@ -6,4 +11,4 @@
    <strong>EuiCallOut</strong> contains a message directly related to content on the page. This includes general information, success, warning, and error messages.</p><p><strong>Keep these guidelines in mind:</strong></p><ul><li>Minimize the number of callouts per page.</li><li>Stack callouts in the order in which they require users' attention: error, warning, info, and then success.</li><li>Offer only one action per callout and ensure it's an action users can perform quickly.</li><li>If the callout has a permanent spot in the UI, but needs to be less obstructive, set the <EuiCode @language="text">size</EuiCode> property to <EuiCode @language=="text">s</EuiCode> (small).</li><li>Use an <EuiCode @language="text">icon</EuiCode> prop if it adds context.</li></ul>
 </EuiText>
 
-<EuiHorizontalRule />
+<EuiHorizontalRule />

package/docs/display/card/{basic-card-demo/demo1.md → demo/d01-basic-card.md}

@@ -1,4 +1,8 @@
-# Basic card
+---
+order: 1
+---
+
+# Basic Card
 
 <EuiText>
 <p>At its core an <strong>EuiCard</strong> should contain a <EuiCode @language="text">title</EuiCode>,<EuiCode @language="text">description</EuiCode>, and an <EuiCode @language="text">icon</EuiCode>. You can make the whole card clickable by giving it an <EuiCode @language="text">onClick</EuiCode> handler or <EuiCode @language="text">href</EuiCode>.</p>

package/docs/display/card/{layout-demo/demo1.md → demo/d02-layout.md}

@@ -1,3 +1,7 @@
+---
+order: 2
+---
+
 # Layout
 
 <EuiText>

package/docs/display/card/{images-demo/demo1.md → demo/d03-images.md}

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 3
 ---
 
 # Images

package/docs/display/card/{footer-demo/demo1.md → demo/d04-footer.md}

@@ -1,3 +1,7 @@
+---
+order: 4
+---
+
 # Footer
 
 <EuiText>

package/docs/display/card/{beta-badge-demo/demo1.md → demo/d05-beta-badge.md}

@@ -1,3 +1,7 @@
+---
+order: 5
+---
+
 # Beta Badge
 
 <EuiText>

package/docs/display/card/{selectable-demo/demo1.md → demo/d06-selectable.md}

@@ -1,4 +1,8 @@
-# Demo
+---
+order: 6
+---
+
+# Selectable
 
 ```hbs template
 <EuiFlexGroup @gutterSize='l'>

package/docs/display/card/{checkable-demo/demo1.md → demo/d07-checkable.md}

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 7
 ---
 
 # Checkable

package/docs/display/card/{checkable-demo/demo2.md → demo/d07.1-cheekable.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 8
 ---
 
 <EuiCallOut @iconType='accessibility' @color='warning'>

package/docs/display/card/{custom-children-demo/demo1.md → demo/d08-custom-children.md}

@@ -1,4 +1,8 @@
-# Custom Children
+---
+order: 9
+---
+
+# Custom children
 
 <EuiText>
 <p>In the event that you need <strong>more than</strong> just paragraph text for the <EuiCode>description</EuiCode>, you can suppliment with anything you need as the <EuiCode>children</EuiCode> of the component. You can also completely replace the description with custom children, but <strong>EuiCard</strong> at least one of these.</p>

package/docs/display/card/index.md

@@ -0,0 +1,14 @@
+---
+title: Card
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Card"/>
+<EuiSpacer/>
+<EuiText>
+  <p>
+  <strong>EuiCard</strong>  is a content-oriented component built on top of EuiPanel. Be sure to check out the guidelines for properly nesting panels.
+   </p>
+</EuiText>
+
+<EuiHorizontalRule/>

package/docs/display/{comment-list-demo/demo1.md → comment-list/demo/d01-comment-list.md}

@@ -1,14 +1,18 @@
-# Comment List
-
+<EuiText>
+	<p>
 The Comment List serves merely as a wrapper for various comments.
 It does contain the comments from trying to connect each other in case you had multiple
 unrelated comment lists in the same page.
 
->The original component from the React.js framework receives a @comments object, and maps them into the EuiCommentList component. For Ember.js, just pass them as children.
+The original component from the React.js framework receives a @comments object, and maps them into the EuiCommentList component. For Ember.js, just pass them as children.
+
+  </p>
+
+</EuiText>
 
 ```hbs template
 <EuiCommentList>
-  <EuiComment @type="regular">
+  <EuiComment @type='regular'>
     <:username>
       kyloRen
     </:username>
@@ -24,10 +28,10 @@ unrelated comment lists in the same page.
       </EuiText>
     </:body>
     <:actions>
-      <EuiButtonIcon @iconType="wrench"/>
+      <EuiButtonIcon @iconType='wrench' />
     </:actions>
   </EuiComment>
-  <EuiComment @type="update">
+  <EuiComment @type='update'>
     <:username>
       lukeSW
     </:username>
@@ -38,7 +42,7 @@ unrelated comment lists in the same page.
       on 2015-02-05
     </:timestamp>
   </EuiComment>
-  <EuiComment @type="update">
+  <EuiComment @type='update'>
     <:username>
       r2d2
     </:username>
@@ -48,8 +52,8 @@ unrelated comment lists in the same page.
     <:body>
       <EuiText>
         <p>
-          He went into a sort of hibernation or low power mode,
-          you know? Like when you 'sleep' a computer.
+          He went into a sort of hibernation or low power mode, you know? Like
+          when you 'sleep' a computer.
         </p>
       </EuiText>
     </:body>
@@ -57,11 +61,17 @@ unrelated comment lists in the same page.
       on 2015-02-05
     </:timestamp>
   </EuiComment>
-  <EuiComment @timelineIcon="listAdd" @type="update">
+  <EuiComment @timelineIcon='listAdd' @type='update'>
     <:username>
-      <EuiFlexGroup @responsive={{false}} @alignItems="center" @gutterSize="s">
+      <EuiFlexGroup @responsive={{false}} @alignItems='center' @gutterSize='s'>
         <EuiFlexItem @grow={{false}}>
-          <EuiAvatar @type="space" @initials="FO" @name="First Order" @initialLength={{2}} @size="s" />
+          <EuiAvatar
+            @type='space'
+            @initials='FO'
+            @name='First Order'
+            @initialLength={{2}}
+            @size='s'
+          />
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
           firstOrder
@@ -69,12 +79,12 @@ unrelated comment lists in the same page.
       </EuiFlexGroup>
     </:username>
     <:event>
-      <EuiFlexGroup @responsive={{false}} @alignItems="center" @gutterSize="s">
+      <EuiFlexGroup @responsive={{false}} @alignItems='center' @gutterSize='s'>
         <EuiFlexItem @grow={{false}}>
           was created by
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiBadge @color="accent">snoke</EuiBadge>
+          <EuiBadge @color='accent'>snoke</EuiBadge>
         </EuiFlexItem>
       </EuiFlexGroup>
     </:event>
@@ -82,13 +92,9 @@ unrelated comment lists in the same page.
       on 2015-02-05
     </:timestamp>
   </EuiComment>
-  <EuiComment @type="regular">
+  <EuiComment @type='regular'>
     <:timelineIcon>
-      <EuiAvatar
-        @initials="RS"
-        @name="Rey Skywokah"
-        @type="user"
-      />
+      <EuiAvatar @initials='RS' @name='Rey Skywokah' @type='user' />
     </:timelineIcon>
     <:username>
       reySkywokah
@@ -104,11 +110,11 @@ unrelated comment lists in the same page.
       </EuiText>
     </:body>
     <:actions>
-      <EuiButtonIcon @iconType="questionInCircle" />
+      <EuiButtonIcon @iconType='questionInCircle' />
     </:actions>
     <:timestamp>
       on 2015-02-05
     </:timestamp>
   </EuiComment>
 </EuiCommentList>
-```
+```

package/docs/display/{comment-list.md → comment-list/index.md}

@@ -1,2 +1,8 @@
+---
+title: Comment List
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Comment List"/>
+<EuiSpacer/>
 <EuiHorizontalRule />

package/docs/display/{description-list.md → description-list/index.md}

@@ -1,2 +1,8 @@
+---
+title: Description list
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Description list"/>
+
 <EuiHorizontalRule />

package/docs/display/empty-prompt/index.md

@@ -0,0 +1,13 @@
+---
+title: Empty Prompt
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Empty prompt"/>
+<EuiSpacer/>
+<EuiText>
+  <p>
+  The <strong>EuiEmptyPrompt</strong> is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
+   </p>
+</EuiText>
+<EuiHorizontalRule />

package/docs/display/health/index.md

@@ -0,0 +1,13 @@
+---
+title: Health
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Health"/>
+
+<EuiHorizontalRule />
+<EuiText>
+<p>
+<p>The <strong>EuiHealth</strong> component should be used when showing comparitive health of listed objects (like servers, HTTP response status codes(as per convenience), nodes, indexes..etc). Because icons are vague and bulky and color alone does not work, color plus text provides a recognizable, lightweight combo that works in most situations.</p>
+</p>
+</EuiText>