Merge pull request #136 from prysmex/eui-empty-prompt

Eui empty prompt docs and eui loading logo
prysmex · Apr 8, 2022 · 6611db4 · 6611db4
2 parents b7b52fd + 7682154
commit 6611db4
Show file tree

Hide file tree

Showing 14 changed files with 510 additions and 96 deletions.
diff --git a/packages/core/addon/components/eui-empty-prompt/index.hbs b/packages/core/addon/components/eui-empty-prompt/index.hbs
@@ -1,77 +1,83 @@
-<EuiPanel
-  class={{class-names
-    (if @layout (concat "euiEmptyPrompt--" @layout) "euiEmptyPrompt--vertical")
-    componentName="EuiEmptyPrompt"
-    paddingSize=(arg-or-default @paddingSize "l")
-  }}
-  @paddingSize="none"
-  @color={{arg-or-default @color "transparent"}}
-  @hasBorder={{@hasBorder}}
-  @hasShadow={{false}}
->
-  <div class="euiEmptyPrompt__main">
-    {{#if (has-block "icon")}}
-      <div class="euiEmptyPrompt__icon">{{yield to="icon"}}</div>
-    {{else if @iconType}}
-      <div class="euiEmptyPrompt__icon">
-        <EuiIcon @type={{@iconType}} @size="xxl" @color={{@iconColor}} />
-      </div>
-    {{/if}}
-    <div class="euiEmptyPrompt__content">
-      {{#if (has-block "content")}}
-        <div class="euiEmptyPrompt__contentInner">{{yield
-            to="content"
-          }}</div>
-      {{else}}
-        <div class="euiEmptyPrompt__contentInner">
-          {{#if @title}}
-            <EuiTitle
-              @size={{arg-or-default @titleSize "m"}}
-            >{{@title}}</EuiTitle>
-          {{/if}}
-          {{#if @body}}
-            <EuiTextColor @color="subdued">
-              {{#if @title}}
-                <EuiSpacer @size="m" />
-              {{/if}}
-              <EuiText>
-                {{@body}}
-              </EuiText>
-            </EuiTextColor>
-          {{/if}}
-          {{#if (gte @actions.length 2)}}
-            <EuiSpacer size="l" />
-            <EuiFlexGroup
-              class="euiEmptyPrompt__actions"
-              @gutterSize="m"
-              @alignItems="center"
-              @justifyContent="center"
-              @direction={{if @isVerticalLayout "column" "row"}}
-            >
-              {{#each @actions as |action|}}
-                <EuiFlexItem @grow={{false}}>
-                  {{action}}
-                </EuiFlexItem>
-              {{/each}}
-            </EuiFlexGroup>
-          {{else}}
-            <EuiSpacer size="l" />
-            {{#each @actions as |action|}}
-              {{action}}
-            {{/each}}
-          {{/if}}
+{{#let (arg-or-default @layout "vertical") as |layout|}}
+  <EuiPanel
+    class={{class-names
+      (if layout (concat "euiEmptyPrompt--" layout) "euiEmptyPrompt--vertical")
+      componentName="EuiEmptyPrompt"
+      paddingSize=(arg-or-default @paddingSize "l")
+    }}
+    @paddingSize="none"
+    @color={{arg-or-default @color "transparent"}}
+    @hasBorder={{@hasBorder}}
+    @hasShadow={{false}}
+  >
+    <div class="euiEmptyPrompt__main">
+      {{#if (has-block "icon")}}
+        <div class="euiEmptyPrompt__icon">{{yield to="icon"}}</div>
+      {{else if @iconType}}
+        <div class="euiEmptyPrompt__icon">
+          <EuiIcon
+            @type={{@iconType}}
+            @size="xxl"
+            @color={{if @iconColor @iconColor (if @color @color "subdued")}}
+          />
         </div>
       {{/if}}
+      <div class="euiEmptyPrompt__content">
+        {{#if (has-block "content")}}
+          <div class="euiEmptyPrompt__contentInner">{{yield to="content"}}</div>
+        {{else}}
+          <div class="euiEmptyPrompt__contentInner">
+            {{#if @title}}
+              <EuiTitle
+                @size={{arg-or-default @titleSize "m"}}
+              >{{@title}}</EuiTitle>
+            {{/if}}
+            {{#if @body}}
+              <EuiTextColor @color="subdued">
+                {{#if @title}}
+                  <EuiSpacer @size="m" />
+                {{/if}}
+                <EuiText>
+                  {{@body}}
+                </EuiText>
+              </EuiTextColor>
+            {{/if}}
+            {{#if (gte @actions.length 2)}}
+              <EuiSpacer size="l" />
+              <EuiFlexGroup
+                class="euiEmptyPrompt__actions"
+                @gutterSize="m"
+                @alignItems="center"
+                @justifyContent="center"
+                @direction={{if (eq layout "vertical") "column" "row"}}
+              >
+                {{#each @actions as |action|}}
+                  <EuiFlexItem @grow={{false}}>
+                    {{action}}
+                  </EuiFlexItem>
+                {{/each}}
+              </EuiFlexGroup>
+            {{else}}
+              <EuiSpacer size="l" />
+              {{#each @actions as |action|}}
+                {{action}}
+              {{/each}}
+            {{/if}}
+          </div>
+        {{/if}}
+      </div>
     </div>
-  </div>
 
-  {{#if (has-block "footer")}}
-    <div class="euiEmptyPrompt__footer">
-      {{yield to="footer"}}
-    </div>
-  {{else}}
-    <div class="euiEmptyPrompt__footer">
-      {{@footer}}
-    </div>
-  {{/if}}
-</EuiPanel>
+    {{#if (has-block "footer")}}
+      <div class="euiEmptyPrompt__footer">
+        {{yield to="footer"}}
+      </div>
+    {{else}}
+      {{#if @footer}}
+        <div class="euiEmptyPrompt__footer">
+          {{@footer}}
+        </div>
+      {{/if}}
+    {{/if}}
+  </EuiPanel>
+{{/let}}
diff --git a/packages/core/addon/components/eui-loading-logo/index.hbs b/packages/core/addon/components/eui-loading-logo/index.hbs
@@ -0,0 +1,14 @@
+<span
+  class={{class-names
+    "euiLoadingLogo "
+    (if
+      (eq @size "m")
+      "euiLoadingLogo--medium"
+      (if (eq @size "l") "euiLoadingLogo--large" "euiLoadingLogo--xLarge")
+    )
+  }}
+>
+  <span className="euiLoadingLogo__icon">
+    <EuiIcon @type={{arg-or-default @logo "logoKibana"}} @size={{arg-or-default @size "m"}} />
+  </span>
+</span>
diff --git a/packages/core/app/components/eui-loading-logo/index.js b/packages/core/app/components/eui-loading-logo/index.js
@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-loading-logo';
diff --git a/packages/core/docs/display/empty-prompt-demo/demo1.md b/packages/core/docs/display/empty-prompt-demo/demo1.md
@@ -23,25 +23,3 @@ order: 1
   </:footer>
 </EuiEmptyPrompt>
 ```
-
-```js component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class DemoIconComponent extends Component {
-  tabs = [
-    { label: 'Tab 1', isSelected: true },
-    {
-      label: 'Tab 2',
-      onClick: this.setShowBottomBar
-    }
-  ];
-  @tracked showing = false;
-
-  @action
-  setSHowBottomBar() {
-    this.showing = !this.showing;
-  }
-}
-```
diff --git a/packages/core/docs/display/empty-prompt-demo/demo2.md b/packages/core/docs/display/empty-prompt-demo/demo2.md
@@ -0,0 +1,16 @@
+---
+order: 2
+---
+
+# Less content, more actions
+
+<EuiText>
+ You can remove parts of the prompt to simplify it. You can also provide an array of multiple actions. Be sure to list primary actions first and secondary actions as empty buttons.
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt
+  @title="Upgrade your license to use Machine Learning"
+  @actions={{array (component "eui-button-title" title="Add a case") (component "eui-button-title" title="Start a trial")}}
+/>
+```
diff --git a/packages/core/docs/display/empty-prompt-demo/demo3.md b/packages/core/docs/display/empty-prompt-demo/demo3.md
@@ -0,0 +1,67 @@
+---
+order: 3
+---
+
+# Panel options
+
+<EuiText>
+ The <strong>EuiEmptyPrompt</strong> is wrapped by <strong>EuiPanel</strong>. By default, the panel is set to <EuiCode>transparent</EuiCode> but you can customize other panel options like <EuiCode>color</EuiCode>, <EuiCode>hasBorder</EuiCode> and <EuiCode>paddingSize</EuiCode>. Changing the <EuiCode>color</EuiCode> prop will also attempt to adjust the <EuiCode>iconColor</EuiCode> and <EuiCode>footer</EuiCode> color.
+</EuiText>
+
+```hbs template
+{{#let (unique-id) as |selectId|}}
+  <EuiFormRow
+    @id={{selectId}}
+  >
+    <EuiSelect
+      @value={{this.panelColor}}
+      @hasNoInitialSelection={{true}}
+      @options={{array
+        (hash value='transparent' text='transparent')
+        (hash value='plain' text='plain')
+        (hash value='subdued' text='subdued')
+        (hash value='accent' text='accent')
+        (hash value='primary' text='primary')
+        (hash value='success' text='success')
+        (hash value='warning' text='warning')
+        (hash value='danger' text='danger')
+      }}
+      @id={{selectId}}
+      {{on 'change' (pick 'target.value' (set this 'panelColor'))}}
+    >
+      <:prepend as |classes|>
+        <EuiFormLabel class={{classes}} for={{selectId}}>
+          Color
+        </EuiFormLabel>
+      </:prepend>
+    </EuiSelect>
+  </EuiFormRow>
+{{/let}}
+<EuiSpacer @size="l" />
+<EuiEmptyPrompt
+  @iconType='securityAnalyticsApp'
+  @color={{this.panelColor}}
+  @title='Start adding cases'
+  @body='There are no cases to display. Add a new case or change your filter
+          settings.'
+  @actions={{array (component 'eui-button-title' title='Add a case')}}
+>
+  <:footer>
+    <EuiTitle @size='xxs'>
+      <h3>Want to learn more?</h3>
+    </EuiTitle>
+    <EuiLink href='#' target='_blank'>
+      Read documentation
+    </EuiLink>
+  </:footer>
+</EuiEmptyPrompt>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  @tracked panelColor = 'accent';
+}
+```
diff --git a/packages/core/docs/display/empty-prompt-demo/demo4.md b/packages/core/docs/display/empty-prompt-demo/demo4.md
@@ -0,0 +1,21 @@
+---
+order: 4
+---
+
+# Title sizes and icon colors
+
+<EuiText>
+ Other customization options include changing the <EuiCode>titleSize</EuiCode> to any of the <strong>EuiTitle</strong> sizes and <EuiCode>iconColor</EuiCode>. When using an application or solution logo as the <EuiCode>iconType</EuiCode>, you can reset to the multi-tone colors with <EuiCode>iconColor="default"</EuiCode>
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt
+  @iconType='securityAnalyticsApp'
+  @iconColor='default'
+  @title='Start adding cases'
+  @titleSize='xs'
+  @body='There are no cases to display. Add a new case or change your filter
+          settings.'
+  @actions={{array (component 'eui-button-title' title='Add a case')}}
+/>
+```
diff --git a/packages/core/docs/display/empty-prompt-demo/demo5.md b/packages/core/docs/display/empty-prompt-demo/demo5.md
@@ -0,0 +1,33 @@
+---
+order: 5
+---
+
+# Loading and error prompts
+
+<EuiText>
+ Empty prompts can also be used to emulate loading and error states, by utilizing the same patterns.
+ For <strong>loading</strong> states, instead of passing a <EuiCode>iconType</EuiCode>, you can provide a custom <EuiCode>icon</EuiCode> and pass in one of our loading components.
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt @title='Loading Dashboards'>
+  <:icon>
+    <EuiLoadingLogo @logo='logoKibana' @size='xl' />
+  </:icon>
+</EuiEmptyPrompt>
+<EuiSpacer @size='l' />
+<EuiText>
+  For error states, you can simply set the
+  <EuiCode>color</EuiCode>
+  to
+  <EuiCode>danger</EuiCode>.
+</EuiText>
+<EuiSpacer />
+<EuiEmptyPrompt
+  @iconType='alert'
+  @color='danger'
+  @title='Error loading Dashboards'
+  @body='There was an error loading the Dashboard application. Contact your
+        administrator for help.'
+/>
+```
diff --git a/packages/core/docs/display/empty-prompt-demo/demo6.md b/packages/core/docs/display/empty-prompt-demo/demo6.md
@@ -0,0 +1,43 @@
+---
+order: 6
+---
+
+# Layout
+
+<EuiText>
+ You can supply a <EuiCode>layout</EuiCode> of either <EuiCode>"horizontal"</EuiCode> or <EuiCode>"vertical"</EuiCode> with the default being <EuiCode>vertical</EuiCode>. When creating empty states we want the content to be short and straight to the point. So most of the time, the <EuiCode>vertical</EuiCode> layout is enough.
+  All the content will be center aligned and this type of text alignment only works with small content. When you have longer body text with multiple calls to action, you can use the <EuiCode>horizontal</EuiCode> layout. This layout works best when you can provide a larger graphic like an illustration as the <EuiCode>icon</EuiCode>. For consistency, we recommend providing the illustration using a <strong>EuiImage</strong> with <EuiCode>size="fullWidth"</EuiCode>.
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt
+  @title='Create your first visualization'
+  @layout='horizontal'
+  @color='plain'
+  @body='There are no cases to display. Add a new case or change your filter
+          settings.'
+  @actions={{array (component 'eui-button-title' title='Create visualization')}}
+>
+  <:icon>
+    <EuiImage @size='fullWidth' @src={{this.illustration}} alt='' />
+  </:icon>
+  <:body>
+    <p>
+      There are no visualizations to display. This tool allows you to create a
+      wide range of charts, graphs, maps, and other graphics.
+    </p>
+    <p>
+      The visualizations you create can be easily shared with your peers.
+    </p>
+  </:body>
+</EuiEmptyPrompt>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  @tracked illustration = 'https://source.unsplash.com/64x64/?cat';
+}
+```
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from '@ember-eui/core/components/eui-loading-logo';