@ember-eui/core 1.5.0 → 1.6.3

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ### Master
 
+### 1.6.3
+🐛 Bug / Fixes
+`@ember-eui/core`
+- Fix inline-styling weird bug
+
+### 1.6.2
+🐛 Bug / Fixes
+`@ember-eui/validated-form`
+- Bubble the change correctly from `<Form.FieldMarkdownEditor />`
+### 1.6.1
+🐛 Bug / Fixes
+`@ember-eui/core`
+- Add default yield block for `<EuiStat />`
+
+### 1.6.0
+🚀 Enhancements
+`@ember-eui/core`
+- `<EuiStat/>` component!
 ### 1.5.0
 🚀 Enhancements
 `@ember-eui/validated-form`

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

@@ -2,37 +2,46 @@
   <EuiOverlayMask @headerZindexLocation="below" {{on "click" @onClose}} />
 {{/if}}
 {{set-body-class "euiBody--hasFlyout"}}
-<div
-  role="dialog"
-  class={{class-names
-    (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
-    componentName="EuiFlyout"
-    size=(arg-or-default @size "m")
-  }}
-  tabindex={{0}}
-  ...attributes
-  {{style
-    (if (not (or (eq @maxWidth false) (eq @maxWidth true))) (inline-styles max-width=@maxWidth))
-  }}
-  {{focus-trap
-    isActive=(arg-or-default @isFocusTrapActive true)
-    shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-    isPaused=(arg-or-default @isFocusTrapPaused false)
-    focusTrapOptions=(arg-or-default
-      @focusTrapOptions (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
-    )
-  }}
-  {{on-key "Escape" @onClose}}
->
-  {{#if (and @onClose (not @hideCloseButton))}}
-    <EuiButtonIcon
-      class="euiFlyout__closeButton"
-      aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
-      @iconType="cross"
-      @color="text"
-      data-test-subj="euiFlyoutCloseButton"
-      {{on "click" @onClose}}
-    />
-  {{/if}}
-  {{yield}}
-</div>
+
+{{#let
+  (if
+    (not (or (eq @maxWidth false) (eq @maxWidth true)))
+    (inline-styles max-width=@maxWidth)
+    (hash)
+  )
+  as |inlineStyles|
+}}
+  <div
+    role="dialog"
+    class={{class-names
+      (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
+      componentName="EuiFlyout"
+      size=(arg-or-default @size "m")
+    }}
+    tabindex={{0}}
+    ...attributes
+    {{style inlineStyles}}
+    {{focus-trap
+      isActive=(arg-or-default @isFocusTrapActive true)
+      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+      isPaused=(arg-or-default @isFocusTrapPaused false)
+      focusTrapOptions=(arg-or-default
+        @focusTrapOptions
+        (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
+      )
+    }}
+    {{on-key "Escape" @onClose}}
+  >
+    {{#if (and @onClose (not @hideCloseButton))}}
+      <EuiButtonIcon
+        class="euiFlyout__closeButton"
+        aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
+        @iconType="cross"
+        @color="text"
+        data-test-subj="euiFlyoutCloseButton"
+        {{on "click" @onClose}}
+      />
+    {{/if}}
+    {{yield}}
+  </div>
+{{/let}}

package/addon/components/eui-list-group/index.hbs

@@ -1,18 +1,24 @@
-<ul
-  class={{class-names
-    (if (eq @maxWidth true) "euiListGroup-maxWidthDefault")
-    (if @bordered "euiListGroup-bordered")
-    (if @flush "euiListGroup-flush")
-    componentName="EuiListGroup"
-    gutterSize=(arg-or-default @gutterSize "s")
-  }}
-  ...attributes
-  {{style
-    (if
-      (and @maxWidth (not-eq @maxWidth true))
-      (inline-styles componentName="EuiListGroup" componentArgs=(hash maxWidth=@maxWidth))
+{{#let
+  (if
+    (and @maxWidth (not-eq @maxWidth true))
+    (inline-styles
+      componentName="EuiListGroup" componentArgs=(hash maxWidth=@maxWidth)
     )
-  }}
->
-  {{yield}}
-</ul>
+    (hash)
+  )
+  as |inlineStyles|
+}}
+  <ul
+    class={{class-names
+      (if (eq @maxWidth true) "euiListGroup-maxWidthDefault")
+      (if @bordered "euiListGroup-bordered")
+      (if @flush "euiListGroup-flush")
+      componentName="EuiListGroup"
+      gutterSize=(arg-or-default @gutterSize "s")
+    }}
+    ...attributes
+    {{style inlineStyles}}
+  >
+    {{yield}}
+  </ul>
+{{/let}}

package/addon/components/eui-markdown-editor-toolbar/index.hbs

@@ -12,7 +12,7 @@
       </EuiToolTip>
 
     {{/each}}
-    <span className="euiMarkdownEditorToolbar__divider"></span>
+    <span class="euiMarkdownEditorToolbar__divider"></span>
     {{#each this.listButtons as |item|}}
       <EuiToolTip @content={{item.label}} @delay="long">
         <EuiButtonIcon
@@ -26,7 +26,7 @@
       </EuiToolTip>
 
     {{/each}}
-    <span className="euiMarkdownEditorToolbar__divider"></span>
+    <span class="euiMarkdownEditorToolbar__divider"></span>
     {{#each this.quoteCodeLinkButtons as |item|}}
       <EuiToolTip @content={{item.label}} @delay="long">
         <EuiButtonIcon
@@ -40,7 +40,7 @@
 
     {{/each}}
     {{#if (gte this.uiPlugins.length 0)}}
-      <span className="euiMarkdownEditorToolbar__divider"></span>
+      <span class="euiMarkdownEditorToolbar__divider"></span>
       {{#each this.uiPlugins as |plugin|}}
         {{#let
           (and @selectedNode (eq @selectedNode.type plugin.name))

package/addon/components/eui-markdown-format/index.hbs

@@ -1,3 +1,4 @@
+{{! This hbs was inspired by https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/components/remark.hbs }}
 <div class="euiMarkdownFormat">
   {{this.result.element}}
   {{#each this.result.components as |CompNode|}}
@@ -10,4 +11,4 @@
       {{/let}}
     {{/in-element}}
   {{/each}}
-</div>
+</div>

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

@@ -1,28 +1,37 @@
-<div
-  class={{class-names "euiModal" (if (eq @maxWidth true) "euiModal--maxWidth-default")}}
-  tabindex="0"
-  ...attributes
-  {{style
-    (if
-      (and @maxWidth (not-eq @maxWidth true))
-      (inline-styles componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth))
+{{#let
+  (if
+    (and @maxWidth (not-eq @maxWidth true))
+    (inline-styles
+      componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth)
     )
-  }}
-  {{focus-trap
-    isActive=(arg-or-default @isFocusTrapActive true)
-    shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-    isPaused=(arg-or-default @isFocusTrapPaused false)
-    focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
-  }}
-  {{on-key "Escape" @onClose}}
->
-  <EuiButtonIcon
-    class="euiModal__closeIcon"
-    @iconType="cross"
-    @color="text"
-    {{on "click" @onClose}}
-  />
-  <div class="euiModal__flex">
-    {{yield}}
+    (hash)
+  )
+  as |inlineStyles|
+}}
+  <div
+    class={{class-names
+      "euiModal"
+      (if (eq @maxWidth true) "euiModal--maxWidth-default")
+    }}
+    tabindex="0"
+    ...attributes
+    {{style inlineStyles}}
+    {{focus-trap
+      isActive=(arg-or-default @isFocusTrapActive true)
+      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+      isPaused=(arg-or-default @isFocusTrapPaused false)
+      focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
+    }}
+    {{on-key "Escape" @onClose}}
+  >
+    <EuiButtonIcon
+      class="euiModal__closeIcon"
+      @iconType="cross"
+      @color="text"
+      {{on "click" @onClose}}
+    />
+    <div class="euiModal__flex">
+      {{yield}}
+    </div>
   </div>
-</div>
+{{/let}}

package/addon/components/eui-stat/description/index.hbs

@@ -0,0 +1,16 @@
+{{#if @descriptionElement}}
+  {{#let (element @descriptionElement) as |DescriptionElement|}}
+    <EuiText class="euiStat__description" @size="s">
+      <DescriptionElement aria-hidden="true">
+        {{yield}}
+      </DescriptionElement>
+    </EuiText>
+  {{/let}}
+
+{{else}}
+  <EuiText class="euiStat__description" @size="s">
+    <p aria-hidden="true">
+      {{yield}}
+    </p>
+  </EuiText>
+{{/if}}

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

@@ -0,0 +1,83 @@
+{{#let
+  (class-names
+    textAlign=(arg-or-default @textAlign "left") componentName="EuiStat"
+  )
+  (class-names
+    "euiStat__title"
+    (if @isLoading "euiStat__title-isLoading")
+    color=(arg-or-default @titleColor "default")
+    addBase=false
+    componentName="EuiStat"
+  )
+  (arg-or-default @reverse false)
+  (arg-or-default @titleSize "l")
+  as |classes titleClasses reverse titleSize|
+}}
+  <div class={{classes}} ...attributes>
+    {{#if reverse}}
+      <EuiStat::Title
+        class={{titleClasses}}
+        @titleElement={{@titleElement}}
+        @titleSize={{titleSize}}
+				@isColorClass={{this.isColorClass}}
+      >
+        {{#if @isLoading}}
+          --
+        {{else}}
+          {{#if (has-block "title")}}
+            {{yield to="title"}}
+          {{else}}
+            {{@title}}
+          {{/if}}
+        {{/if}}
+      </EuiStat::Title>
+      <EuiStat::Description
+        @descriptionElement={{@descriptionElement}}
+      >
+        {{#if (has-block "description")}}
+          {{yield to="description"}}
+        {{else}}
+          {{@description}}
+        {{/if}}
+      </EuiStat::Description>
+    {{else}}
+      <EuiStat::Description
+        @descriptionElement={{@descriptionElement}}
+      >
+        {{#if (has-block "description")}}
+          {{yield to="description"}}
+        {{else}}
+          {{@description}}
+        {{/if}}
+      </EuiStat::Description>
+      <EuiStat::Title
+        class={{titleClasses}}
+        @titleElement={{@titleElement}}
+				@titleSize={{titleSize}}
+				@isColorClass={{this.isColorClass}}
+      >
+        {{#if @isLoading}}
+          --
+        {{else}}
+          {{#if (has-block "title")}}
+            {{yield to="title"}}
+          {{else}}
+            {{@title}}
+          {{/if}}
+        {{/if}}
+      </EuiStat::Title>
+    {{/if}}
+    {{#if this.screenReader}}
+      <p {{screen-reader-only}}>
+        {{#if reverse}}
+          {{@title}}
+          {{@description}}
+        {{else}}
+          {{@description}}
+          {{@title}}
+        {{/if}}
+      </p>
+    {{/if}}
+		{{yield}}
+  </div>
+{{/let}}

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

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { colorMapping } from '../../utils/css-mappings/eui-stat';
+import { sizeMapping } from '../../utils/css-mappings/eui-title';
+import { keysOf } from '../common';
+
+type EuiTitleSize = keyof typeof sizeMapping;
+
+export const COLORS = keysOf(colorMapping);
+
+export const isColorClass = (
+  input: string
+): input is keyof typeof colorMapping => {
+  return colorMapping.hasOwnProperty(input);
+};
+
+type StatArgs = {
+  /**
+   * The color of the title text
+   */
+  titleColor?: keyof typeof colorMapping | string;
+
+  /**
+   * Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc)
+   */
+  titleSize?: EuiTitleSize;
+
+  title?: string | Component;
+  description?: string | Component;
+};
+
+export default class EuiStart extends Component<StatArgs> {
+  get isColorClass() {
+    if (this.args.titleColor) {
+      return isColorClass(this.args.titleColor);
+    }
+    return false;
+  }
+
+  get useScreenReader() {
+    return (
+      typeof this.args.title === 'string' &&
+      typeof this.args.description === 'string'
+    );
+  }
+}

package/addon/components/eui-stat/title/index.hbs

@@ -0,0 +1,18 @@
+{{#if @titleElement}}
+  {{#let (element @titleElement) as |TitleElement|}}
+    <EuiTitle @size={{@titleSize}} ...attributes>
+      <TitleElement
+        aria-hidden="true"
+        {{style (if @isColorClass (hash color=@titleColor))}}
+      >
+        {{yield}}
+      </TitleElement>
+    </EuiTitle>
+  {{/let}}
+{{else}}
+  <EuiTitle @size={{@titleSize}} ...attributes>
+    <p aria-hidden="true" {{style (if @isColorClass (hash color=@titleColor))}}>
+      {{yield}}
+    </p>
+  </EuiTitle>
+{{/if}}

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

@@ -27,7 +27,7 @@
       />
     {{/if}}
 
-    <span className="euiToastHeader__title">
+    <span class="euiToastHeader__title">
       {{@title}}
     </span>
   </div>

package/addon/helpers/class-names.ts

@@ -40,8 +40,12 @@ interface Options extends IObjectKeys {
  *
  * @param classes - List of classes that will be joined
  */
-export function classNames(classNames: string[] = [], options: Options): string {
+export function classNames(
+  classNames: string[] = [],
+  options: Options & { addBase: boolean }
+): string {
   let { componentName, ...rest } = options;
+  let includeBase = options.addBase !== false;
   let str = `${classNames.join(' ')}`;
   if (options.componentName) {
     assert(
@@ -49,7 +53,9 @@ export function classNames(classNames: string[] = [], options: Options): string
       cssMappings[options.componentName] !== undefined
     );
     const component = cssMappings[options.componentName];
-    str = `${str} ${component.base}`;
+    if (includeBase) {
+      str = `${str} ${component.base}`;
+    }
 
     for (let key in rest) {
       if (component.properties[key] && component.properties[key][rest[key]]) {

package/addon/utils/css-mappings/eui-stat.ts

@@ -0,0 +1,26 @@
+export const baseClass = 'euiStat';
+
+export const textAlignMapping = {
+  left: `${baseClass}--leftAligned`,
+  center: `${baseClass}--centerAligned`,
+  right: `${baseClass}--rightAligned`
+};
+
+export const colorMapping = {
+  default: '',
+  subdued: `${baseClass}__title--subdued`,
+  primary: `${baseClass}__title--primary`,
+  success: `${baseClass}__title--success`,
+  danger: `${baseClass}__title--danger`,
+  accent: `${baseClass}__title--accent`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    textAlign: textAlignMapping,
+    color: colorMapping
+  }
+};
+
+export default mapping;

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

@@ -53,8 +53,10 @@ import EuiToolTip from './eui-tool-tip';
 import EuiToast from './eui-toast';
 import EuiGlobalToastList from './eui-global-toast-list';
 import EuiCodeBlockImpl from './eui-code-block-impl';
+import EuiStat from './eui-stat';
 
 const mapping: Mapping = {
+  EuiStat,
   EuiCodeBlockImpl,
   EuiAccordion,
   EuiIcon,

package/addon/utils/markdown/plugins/to-dom.ts

@@ -1,3 +1,7 @@
+/*
+This util was extracted from https://github.com/ampatspell/ember-cli-remark-static/blob/v3.0.5/addon/util/to-dom.js
+*/
+
 import { assert } from '@ember/debug';
 import { RehypeNode } from '../markdown-types';
 

package/app/components/eui-stat/description/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-stat/description';

package/app/components/eui-stat/index.js

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

package/app/components/eui-stat/title/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-stat/title';

package/docs/display/stat-demo/demo1.md

@@ -0,0 +1,131 @@
+---
+order: 1
+---
+# Demo
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat @title='7,600 mm' @description='Total people' />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+<EuiSpacer />
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @titleColor='primary'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @titleColor='accent'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @titleColor='danger'
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+
+<EuiSpacer />
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='22,123'
+        @description='Total people'
+        @isLoading={{this.isLoading}}
+        @titleColor='primary'
+      />
+      <EuiSpacer />
+      <EuiSwitch
+        @label='Show as loading'
+        @checked={{this.isLoading}}
+        @onChange={{pick 'target.checked' (set this 'isLoading')}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+<EuiSpacer />
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='8,888'
+          @description='Total widgets'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='empty' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='2,000'
+          @description='Pending widgets'
+          @titleColor='accent'
+          @textAlign='right'
+          @isLoading={{this.Loading}}
+        >
+          <EuiIcon @type='clock' @color='accent' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='6,800'
+          @description='Success widgets'
+          @titleColor='success'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='check' @color='success' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='88'
+          @description='Error widgets'
+          @titleColor='danger'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='alert' @color='danger' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer />
+  <EuiSwitch
+    @label='Show as loading'
+    @checked={{this.isLoading}}
+    @onChange={{pick 'target.checked' (set this 'isLoading')}}
+  />
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class StatDemoComponent extends Component {
+  @tracked isLoading = true;
+}
+```

package/docs/display/stat-demo/demo2.md

@@ -0,0 +1,59 @@
+# Demo
+
+<EuiTitle>Title size</EuiTitle>
+<EuiText>
+title uses the <EuiCode>EuiTitle</EuiCode> component and thus uses the same sizing property
+values (applied via the titleSize property). Although all EuiTitle sizes are
+available, suggested sizes include <EuiCode>'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'</EuiCode>. By
+default, the size is set to large <EuiCode>l</EuiCode>. The @description label cannot be
+re-sized via component properties.
+</EuiText>
+<EuiSpacer/>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Large size' @titleSize='l' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Medium size' @titleSize='m' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Small size' @titleSize='s' />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra small size'
+        @titleSize='xs'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra extra small size'
+        @titleSize='xxs'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra extra extra small size'
+        @titleSize='xxxs'
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class StatDemoComponent extends Component {
+  @tracked isLoading = true;
+}
+```

package/docs/display/stat.md

@@ -0,0 +1 @@
+# Stat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "1.5.0",
+  "version": "1.6.3",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -154,5 +154,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "51aac7b1e346dcd59cf60693be8df778c9020237"
+  "gitHead": "9a24c611ad631adc96733da28942a10301abb05e"
 }