@ember-eui/core 5.4.3 → 5.6.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-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/helpers/arg-or-default.ts

@@ -2,6 +2,7 @@ import { helper } from '@ember/component/helper';
 import { assert } from '@ember/debug';
 //@ts-ignore
 import config from 'ember-get-config';
+import { get } from '@ember/object';
 
 /**
  * Helper that returns a default value if the passed argument is undefined
@@ -17,7 +18,7 @@ export function argOrDefault(
   assert('`defaultValue` must be provided', defaultValue !== undefined);
   let configValue;
   if (configKey) {
-    configValue = config['@ember-eui/core']?.[configKey];
+    configValue = get(config, configKey);
   }
   return value !== undefined ? value : configValue || defaultValue;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.4.3",
+  "version": "5.6.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "788bc02ef42e7a278439d886bb9be04e6679f37f"
+  "gitHead": "7764a095d79c5241eec5c002f23721eda2dd6417"
 }