@ember-eui/core 4.3.0 → 5.0.0-alpha.3

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

@@ -3,12 +3,12 @@
     class={{class-names
       (if @fill "euiButton--fill")
       (if @fullWidth "euiButton--fullWidth")
-      (if (or @isLoading @isDisabled) "euiButton-isDisabled")
+      (if (or @isLoading @isDisabled @disabled) "euiButton-isDisabled")
       componentName="EuiButton"
       color=(arg-or-default @color "primary")
       size=@size
     }}
-    disabled={{or @isLoading @isDisabled}}
+    disabled={{or @isLoading @isDisabled @disabled}}
     href={{@href}}
     target={{@target}}
     aria-pressed={{if @isSelected "true" null}}
@@ -32,12 +32,12 @@
     class={{class-names
       (if @fill "euiButton--fill")
       (if @fullWidth "euiButton--fullWidth")
-      (if (or @isLoading @isDisabled) "euiButton-isDisabled")
+      (if (or @isLoading @isDisabled @disabled) "euiButton-isDisabled")
       componentName="EuiButton"
       color=(arg-or-default @color "primary")
       size=@size
     }}
-    disabled={{or @isLoading @isDisabled}}
+    disabled={{or @isLoading @isDisabled @disabled}}
     type={{if @type @type "button"}}
     aria-pressed={{if @isSelected "true" null}}
     ...attributes

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

@@ -6,14 +6,18 @@
   ...attributes
 >
   {{#if @isLoading}}
-    <EuiLoadingSpinner class="euiButtonContent__spinner" @size="m" />
+    <EuiLoadingSpinner
+      class="euiButtonContent__spinner"
+      @size={{arg-or-default @iconSize "m"}}
+    />
   {{else if @iconType}}
     <EuiIcon
       @iconClasses="euiButtonContent__icon {{@iconClasses}}"
       @type={{@iconType}}
-      @size="m"
+      @size={{arg-or-default @iconSize "m"}}
       @useSvg={{@useSvg}}
       @useComponent={{@useComponent}}
+      @color="inherit"
     />
   {{/if}}
   <span class={{@textClasses}}>

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

@@ -1,54 +1,62 @@
-{{#if (and @href (not (or @isLoading @isDisabled)))}}
-  <a
-    class={{class-names
-      (if (or @isLoading @isDisabled) "euiButtonEmpty-isDisabled")
-      componentName="EuiButtonEmpty"
-      color=(arg-or-default @color "primary")
-      size=@size
-      flush=@flush
-    }}
-    href={{@href}}
-    target={{@target}}
-    ...attributes
-  >
-    <EuiButtonContent
-      class="euiButtonEmpty__content {{@contentClasses}}"
-      @isLoading={{@isLoading}}
-      @iconType={{@iconType}}
-      @iconSide={{@iconSide}}
-      @iconClasses={{@iconClasses}}
-      @useSvg={{@useSvg}}
-      @useComponent={{@useComponent}}
-      @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
+{{#let
+  (arg-or-default @size "m")
+  (arg-or-default @iconSize "m")
+  as |size iconSize|
+}}
+  {{#if (and @href (not (or @isLoading @isDisabled)))}}
+    <a
+      class={{class-names
+        (if (or @isLoading @isDisabled) "euiButtonEmpty-isDisabled")
+        componentName="EuiButtonEmpty"
+        color=(arg-or-default @color "primary")
+        size=size
+        flush=@flush
+      }}
+      href={{@href}}
+      target={{@target}}
+      ...attributes
     >
-      {{yield}}
-    </EuiButtonContent>
-  </a>
-{{else}}
-  <button
-    class={{class-names
-      (if (or @isLoading @isDisabled) "euiButtonEmpty-isDisabled")
-      componentName="EuiButtonEmpty"
-      color=(arg-or-default @color "primary")
-      size=@size
-      flush=@flush
-    }}
-    disabled={{or @isLoading @isDisabled}}
-    type={{if @type @type "button"}}
-    aria-pressed={{@isSelected}}
-    ...attributes
-  >
-    <EuiButtonContent
-      class="euiButtonEmpty__content {{@contentClasses}}"
-      @isLoading={{@isLoading}}
-      @iconType={{@iconType}}
-      @iconSide={{@iconSide}}
-      @iconClasses={{@iconClasses}}
-      @useSvg={{@useSvg}}
-      @useComponent={{@useComponent}}
-      @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
+      <EuiButtonContent
+        class="euiButtonEmpty__content {{@contentClasses}}"
+        @isLoading={{@isLoading}}
+        @iconType={{@iconType}}
+        @iconSide={{@iconSide}}
+        @iconSize={{if (eq size "xs") "s" iconSize}}
+        @iconClasses={{@iconClasses}}
+        @useSvg={{@useSvg}}
+        @useComponent={{@useComponent}}
+        @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
+      >
+        {{yield}}
+      </EuiButtonContent>
+    </a>
+  {{else}}
+    <button
+      class={{class-names
+        (if (or @isLoading @isDisabled) "euiButtonEmpty-isDisabled")
+        componentName="EuiButtonEmpty"
+        color=(arg-or-default @color "primary")
+        size=size
+        flush=@flush
+      }}
+      disabled={{or @isLoading @isDisabled @disabled}}
+      type={{if @type @type "button"}}
+      aria-pressed={{@isSelected}}
+      ...attributes
     >
-      {{yield}}
-    </EuiButtonContent>
-  </button>
-{{/if}}
+      <EuiButtonContent
+        class="euiButtonEmpty__content {{@contentClasses}}"
+        @isLoading={{@isLoading}}
+        @iconType={{@iconType}}
+        @iconSide={{@iconSide}}
+        @iconSize={{if (eq size "xs") "s" iconSize}}
+        @iconClasses={{@iconClasses}}
+        @useSvg={{@useSvg}}
+        @useComponent={{@useComponent}}
+        @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
+      >
+        {{yield}}
+      </EuiButtonContent>
+    </button>
+  {{/if}}
+{{/let}}

package/addon/components/eui-button-icon/index.hbs

@@ -1,6 +1,12 @@
 {{#if (and @href (not @isDisabled))}}
   <a
-    class={{class-names componentName="EuiButtonIcon" color=(arg-or-default @color "primary")}}
+    class={{class-names
+      (if @isDisabled "euiButtonIcon-isDisabled")
+      componentName="EuiButtonIcon"
+      display=(arg-or-default @display "empty")
+      color=(arg-or-default @color "primary")
+      size=(arg-or-default @size "xs")
+    }}
     href={{@href}}
     target={{@target}}
     ...attributes
@@ -12,14 +18,21 @@
         @size={{arg-or-default @iconSize "m"}}
         @useSvg={{@useSvg}}
         @useComponent={{@useComponent}}
+        @color="inherit"
         aria-hidden="true"
       />
     {{/if}}
   </a>
 {{else}}
   <button
-    class={{class-names componentName="EuiButtonIcon" color=(arg-or-default @color "primary")}}
-    disabled={{@isDisabled}}
+    class={{class-names
+      (if @isDisabled "euiButtonIcon-isDisabled")
+      componentName="EuiButtonIcon"
+      display=(arg-or-default @display "empty")
+      color=(arg-or-default @color "primary")
+      size=(arg-or-default @size "xs")
+    }}
+    disabled={{or @isDisabled @disabled}}
     aria-pressed={{if @isSelected "true" "false"}}
     type={{if @type @type "button"}}
     ...attributes
@@ -30,6 +43,7 @@
         @type={{@iconType}}
         @size={{@iconSize}}
         @useSvg={{@useSvg}}
+        @color="inherit"
         @useComponent={{@useComponent}}
         aria-hidden="true"
       />

package/addon/components/eui-call-out/index.hbs

@@ -14,6 +14,7 @@
           @type={{@iconType}}
           @size="m"
           aria-hidden="true"
+          @color="inherit"
         />
       {{/if}}
       {{#if @heading}}

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

@@ -1,46 +1,39 @@
 {{#let
-  (if @titleId @titleId (if (or @href @onClick) (unique-id)))
   (if @selectable (unique-id))
-  as |titleId selectableId|
+  (and
+    (not @isDisabled)
+    (or @onClick @href (and @selectable (not @selectable.isDisabled)))
+  )
+  (arg-or-default @titleElement "span")
+  (arg-or-default @layout "vertical")
+  as |selectableId isClickable titleElement layout|
 }}
-  <div
+  <EuiPanel
     class={{class-names
-      "euiCard--shadow"
-      (if (eq @layout "horizontal") "euiCard--horizontal")
-      (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
-      (if @isDisabled "euiCard-isDisabled")
-      (if (has-block) "euiCard--hasChildren")
-      (if @icon "euiCard--hasIcon" (if (has-block) "icon" "euiCard--hasIcon"))
-      (if @betaBadgeLabel "euiCard--hasBetaBadge")
-      (if
-        (or titleId (and @selectable (not @selectable.isDisabled)))
-        "euiCard--isClickable"
-      )
+      (if (eq layout "horizontal") "euiCard--horizontal")
+      (if isClickable "euiCard--isClickable")
+      (if @betaBadgeProps.label "euiCard--hasBetaBadge")
+      (if @icon "euiCard--hasIcon" (if (has-block "icon") "euiCard--hasIcon"))
       (if @selectable "euiCard--isSelectable")
       (if (and @selectable @selectable.isSelected) "euiCard-isSelected")
+      (if @isDisabled "euiCard-isDisabled")
+      this.selectableColorClass
       componentName="EuiCard"
-      paddingSize=(arg-or-default @paddingSize "m")
       textAlign=(arg-or-default @textAlign "center")
-      color=(if
-        @selectable.isSelected (arg-or-default @selectable.color "success")
-      )
     }}
+    @color={{if @isDisabled "subdued" @display}}
+    @onClick={{if isClickable this.outerOnClick}}
+    @hasShadow={{or @isDisabled @display}}
+    @hasBorder={{if @display @display undefined}}
+    @paddingSize={{@paddingSize}}
     ...attributes
-    {{on-event-simulate-event
-      "click"
-      target=(or
-        (if titleId (concat "#" titleId))
-        (if selectableId (concat "#" selectableId))
-      )
-      event=(create-event (hash eventType="Event" trigger="click"))
-    }}
   >
     <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")))}}
+          {{#if (and @image (not-eq layout "horizontal"))}}
             <div class="euiCard__image">
               <img src={{@image}} alt="card-top" />
             </div>
@@ -56,64 +49,84 @@
       {{/if}}
     </div>
     <div class="euiCard__content">
-      <EuiTitle
-        class="euiCard__title"
-        @size={{arg-or-default @titleSize "s"}}
-        @tag={{arg-or-default @titleElement "span"}}
-      >
+      <EuiTitle class="euiCard__title" @size={{arg-or-default @titleSize "s"}}>
         {{#if (has-block "title")}}
-          {{yield titleId to="title"}}
+          {{yield (set this "link") to="title"}}
         {{else if (and (not @isDisabled) @href)}}
           <a
             class="euiCard__titleAnchor"
             target={{@target}}
             disabled={{@isDisabled}}
             href={{@href}}
-            id={{titleId}}
+            {{did-insert (set this "link")}}
           >
-            {{@title}}
+            {{#if (not-eq titleElement "span")}}
+              {{#let (element titleElement) as |TitleElement|}}
+                <TitleElement>{{@title}}</TitleElement>
+              {{/let}}
+            {{else}}
+              <span>{{@title}}</span>
+            {{/if}}
+
           </a>
         {{else if (or @isDisabled @onClick)}}
           <button
             type="button"
             class="euiCard__titleButton"
             disabled={{@isDisabled}}
-            id={{titleId}}
+            {{did-insert (set this "link")}}
             {{on "click" (optional @onClick)}}
           >
-            {{@title}}
+            {{#if (not-eq titleElement "span")}}
+              {{#let (element titleElement) as |TitleElement|}}
+                <TitleElement>{{@title}}</TitleElement>
+              {{/let}}
+            {{else}}
+              <span>{{@title}}</span>
+            {{/if}}
           </button>
         {{else}}
-          {{@title}}
+          {{#if (not-eq titleElement "span")}}
+            {{#let (element titleElement) as |TitleElement|}}
+              <TitleElement>{{@title}}</TitleElement>
+            {{/let}}
+          {{else}}
+            <span>{{@title}}</span>
+          {{/if}}
         {{/if}}
       </EuiTitle>
       {{#if (or @description (has-block "description"))}}
         <EuiText @grow={{true}} @size="s" class="euiCard__description">
           {{#if (has-block "description")}}
-            {{yield to="description"}}
+            <p>{{yield to="description"}}</p>
           {{else}}
-            {{@description}}
+            <p>{{@description}}</p>
           {{/if}}
         </EuiText>
       {{/if}}
       {{yield to="body"}}
     </div>
-    {{#if @betaBadgeLabel}}
+    {{#if @betaBadgeProps.label}}
       <span class="euiCard__betaBadgeWrapper">
         <EuiBetaBadge
           class="euiCard__betaBadge"
-          @label={{@betaBadgeLabel}}
-          @title={{@betaBadgeLabel}}
+          @label={{@betaBadgeProps.label}}
+          @title={{@betaBadgeProps.title}}
+          @tooltipContent={{@betaBadgeProps.tooltipContent}}
         />
       </span>
     {{/if}}
-    {{#if (and (not (eq @layout "horizontal")) (has-block "footer"))}}
+    {{#if (and (eq layout "vertical") (or (has-block "footer") @footer))}}
       <div class="euiCard__footer">
-        {{yield to="footer"}}
+        {{#if (has-block "footer")}}
+          {{yield to="footer"}}
+        {{else}}
+          {{@footer}}
+        {{/if}}
       </div>
     {{/if}}
     {{#if @selectable}}
-      <EuiCard::EuiCardSelect
+      <EuiCardSelect
         @type={{@selectable.type}}
         @buttonId={{selectableId}}
         @isSelected={{@selectable.isSelected}}
@@ -124,8 +137,9 @@
         @href={{@selectable.href}}
         @iconSide={{@selectable.iconSide}}
         @flush={{@selectable.flush}}
+        {{did-insert (set this "link")}}
         {{on "click" (optional @selectable.onClick)}}
       />
     {{/if}}
-  </div>
+  </EuiPanel>
 {{/let}}

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

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { EuiCardSelectProps, euiCardSelectableColor } from '../eui-card-select';
+
+type EuiCardComponentArgs = {
+  selectable?: EuiCardSelectProps;
+};
+
+export default class EuiCardComponent extends Component<EuiCardComponentArgs> {
+  @tracked link: HTMLAnchorElement | HTMLButtonElement | null = null;
+
+  outerOnClick = (e: MouseEvent) => {
+    if (this.link && this.link !== e.target) {
+      this.link.click();
+    }
+  };
+
+  get selectableColorClass() {
+    const selectable = this.args.selectable;
+    return selectable
+      ? `euiCard--isSelectable--${euiCardSelectableColor(
+          selectable.color,
+          selectable.isSelected
+        )}`
+      : undefined;
+  }
+}

package/addon/components/{eui-card/eui-card-select → eui-card-select}/index.hbs

@@ -1,13 +1,10 @@
 <EuiButtonEmpty
-  class={{class-names
-    componentName="EuiCardSelect"
-    color=(if @color @color (if @isSelected "success" "text"))
-  }}
+  class={{class-names this.selectColorClass componentName="EuiCardSelect"}}
   id={{@buttonId}}
   @color={{arg-or-default @color "text"}}
   @size="xs"
   @isDisabled={{@isDisabled}}
-  @iconType={{if @isSelected "check" @iconType}}
+  @iconType={{if @isSelected "check" undefined}}
   @isLoading={{@isLoading}}
   @href={{@href}}
   @iconSide={{@iconSide}}

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

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+
+export type EuiCardSelectProps = {
+  /**
+   * Is in the selected state
+   */
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  color?: string;
+};
+
+export function euiCardSelectableColor(
+  color: string | undefined,
+  isSelected: boolean | undefined
+): string {
+  let calculatedColor;
+  if (color) {
+    calculatedColor = color;
+  } else if (isSelected) {
+    calculatedColor = 'success';
+  } else {
+    calculatedColor = 'text';
+  }
+
+  return calculatedColor;
+}
+
+export default class EuiCardSelectComponent extends Component<EuiCardSelectProps> {
+  get selectColorClass() {
+    return `euiCardSelect--${euiCardSelectableColor(
+      this.args.color,
+      this.args.isSelected
+    )}`;
+  }
+}

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

@@ -1,15 +1,16 @@
 {{#let (arg-or-default @id (unique-id)) as |id|}}
   <div
     class={{class-names
-      "euiCheckableCard"
-      "euiCheckableCard--shadow"
-      "euiCheckableCard--borderRadiusMedium"
+    "euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard"
       (if @checked "euiCheckableCard-isChecked")
-      (if @disabled "euiCheckableCard-isDisabled")
+      (if @disabled "euiCheckableCard__label-isDisabled")
     }}
   >
-    <div class="euiCheckableCard__row">
-      <div class="euiCheckableCard__control">
+    <div class={{class-names
+    "euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiPanel--isClickable euiSplitPanel__inner"
+    (if @checked "euiPanel--primary")
+    }}>
+     
         {{#if (eq @checkableType "checkbox")}}
           <EuiCheckbox
             @id={{id}}
@@ -25,7 +26,8 @@
             ...attributes
           />
         {{/if}}
-      </div>
+    </div>
+   <div class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiSplitPanel__inner">
       <label 
         class={{class-names
           "euiCheckableCard__label"
@@ -40,15 +42,19 @@
           {{@label}}
         {{/if}}
       </label>
-    </div>
+     
+   
     {{#if (has-block "content")}}
-      <div class="euiCheckableCard__row">
+    
         {{!-- Empty div for left side background color only --}}
-        <div class="euiCheckableCard__control" />
+        
         <div id={{concat id "-details"}} class="euiCheckableCard__children">
           {{yield to="content"}}
         </div>
-      </div>
+      
     {{/if}}
+
+     
+ </div>
   </div>
 {{/let}}

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

@@ -1,6 +1,7 @@
 {{#let
   (and (has-block "label") (not (arg-or-default @isFakeLabelBlock false)))
-  (arg-or-default @id (unique-id)) as |hasLabelBlock id|
+  (arg-or-default @id (unique-id))
+  as |hasLabelBlock id|
 }}
   {{#let
     (class-names
@@ -9,7 +10,9 @@
       (if @compressed "euiCheckbox--compressed")
       "euiCheckbox"
       @className
-    ) as |classes|
+      @containerClass
+    )
+    as |classes|
   }}
     <div class={{classes}}>
       <input
@@ -19,12 +22,15 @@
         checked={{@checked}}
         disabled={{@disabled}}
         ...attributes
-        {{invalidate-indeterminate @indeterminate @checked}}
+        {{this.indeterminateModifier @indeterminate @checked}}
         {{did-insert (optional @inputRef)}}
       />
       <div class="euiCheckbox__square"></div>
       {{#if (or hasLabelBlock @label)}}
-        <label class="euiCheckbox__label" for={{id}}>
+        <label
+          class={{class-names "euiCheckbox__label" @labelProps.className}}
+          for={{id}}
+        >
           {{#if hasLabelBlock}}
             {{yield to="label"}}
           {{else}}
@@ -34,4 +40,4 @@
       {{/if}}
     </div>
   {{/let}}
-{{/let}}
+{{/let}}

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

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+
+const indeterminateModifier = modifier(function invalidateIndeterminate(
+  element: HTMLInputElement,
+  [indeterminate]: [boolean]
+) {
+  if (element) {
+    element.indeterminate = indeterminate;
+  }
+});
+
+export default class EuiCheckboxComponent extends Component {
+  indeterminateModifier = indeterminateModifier;
+}

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

@@ -1,9 +1,15 @@
-<EuiCodeBlockImpl
-  @inline={{true}}
-  @language={{@language}}
-  @transparentBackground={{@transparentBackground}}
-	@overflowHeight={{@overflowHeight}}
-  ...attributes
->
+{{#in-element this.codeTarget}}
   {{yield}}
-</EuiCodeBlockImpl>
+{{/in-element}}
+<code
+  class={{class-names
+    "euiCode"
+    (if @transparentBackground "euiCode--transparentBackground")
+  }}
+  data-code-language={{arg-or-default @language "text"}}
+  {{did-insert (set this "code")}}
+  {{did-insert this.update}}
+  {{did-update this.update this.language}}
+  {{did-update this.update this.language}}
+  ...attributes
+></code>