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

package/docs/display/icons-demo/demo4.md

@@ -0,0 +1,104 @@
+---
+order: 4
+---
+
+# Apps
+
+<EuiText>
+  <p>App logos are usually displayed at <EuiCode @language="text">32x32</EuiCode> or above and can contain multiple colors.</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.appsCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.apps as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='{{icon}}' @size='xl' />
+          <small>
+            {{icon}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked appsCode = `
+<EuiIcon type="addDataApp" size="xl" />
+`;
+
+  @tracked apps = [
+    'addDataApp',
+    'advancedSettingsApp',
+    'agentApp',
+    'apmApp',
+    'appSearchApp',
+    'auditbeatApp',
+    'canvasApp',
+    'codeApp',
+    'consoleApp',
+    'crossClusterReplicationApp',
+    'dashboardApp',
+    'devToolsApp',
+    'discoverApp',
+    'emsApp',
+    'filebeatApp',
+    'fleetApp',
+    'gisApp',
+    'graphApp',
+    'grokApp',
+    'heartbeatApp',
+    'indexManagementApp',
+    'indexPatternApp',
+    'indexRollupApp',
+    'lensApp',
+    'logsApp',
+    'machineLearningApp',
+    'managementApp',
+    'metricbeatApp',
+    'metricsApp',
+    'monitoringApp',
+    'notebookApp',
+    'packetbeatApp',
+    'pipelineApp',
+    'recentlyViewedApp',
+    'reportingApp',
+    'savedObjectsApp',
+    'searchProfilerApp',
+    'securityAnalyticsApp',
+    'securityApp',
+    'spacesApp',
+    'sqlApp',
+    'timelionApp',
+    'upgradeAssistantApp',
+    'uptimeApp',
+    'usersRolesApp',
+    'visualizeApp',
+    'watchesApp',
+    'workplaceSearchApp'
+  ];
+}
+```

package/docs/display/icons-demo/demo5.md

@@ -0,0 +1,64 @@
+---
+order: 5
+---
+
+# Machine learning icons
+
+<EuiText>
+  <p>Machine learning has some specific icons for job creation. Again, these are made for <EuiCode @language="text">32x32</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.mlCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.ml as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='{{icon}}' @size='xl' />
+          <small>
+            {{icon}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked mlCode = `
+<EuiIcon type="dataVisualizer" size="xl" />
+`;
+
+  @tracked ml = [
+    'dataVisualizer',
+    'createAdvancedJob',
+    'classificationJob',
+    'createMultiMetricJob',
+    'outlierDetectionJob',
+    'createPopulationJob',
+    'regressionJob',
+    'createSingleMetricJob'
+  ];
+}
+```

package/docs/display/icons-demo/demo6.md

@@ -0,0 +1,63 @@
+---
+order: 6
+---
+
+# Sizes
+
+<EuiText>
+  <p>Use the <EuiCode @language="text">size</EuiCode> prop to automatically size your icons. Medium is the default, and will output a <EuiCode @language="text">16x16</EuiCode> icon.</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.sizeCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.iconSizes as |size index|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{size}}
+        @afterMessage='logoElasticStack Copied'
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='logoElasticStack' @size={{size}} />
+          <small>
+            {{get this.iconSizesText index}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked sizeCode = `
+ <EuiIcon type="logoElasticsearch" size="xl" />
+`;
+
+  @tracked iconSizes = ['s', 'm', 'l', 'xl', 'xxl', 'original'];
+  @tracked iconSizesText = [
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large',
+    'original'
+  ];
+}
+```

package/docs/display/icons-demo/demo7.md

@@ -0,0 +1,101 @@
+---
+order: 7
+---
+
+# Colors
+
+<EuiText>
+ <p>The default behavior of icons is to inherit from the text color. You can use the <EuiCode @language="text">color</EuiCode> prop to assign a custom color which accepts a named color from our palette or a valid&nbsp;<a class="euiLink euiLink--primary" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS color data type<<span class="euiScreenReaderOnly">(opens in a new tab or window)</span></a>&nbsp;which will be passed down through the inline-style <EuiCode @language="text">fill</EuiCode>&nbsp; property. <strong>We recommend relying on the EUI named color palette</strong> unless the custom color is initiated by the user (like as a graph color).</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.colorCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.iconColors as |color|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{concat '@color=' '"' color '"'}}
+        @afterMessage='Copied'
+        as |copy|
+      >
+        <EuiPanel @paddingSize='s' @hasShadow={{false}} @onClick={{copy}}>
+          <EuiIcon @type='brush' @color={{color}} />
+          <small>
+            {{color}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+<EuiSpacer />
+<EuiText>
+  <p>Two-tone icons, like our app style icons, will behave similarly to normal
+    glyphs when provided a specific color by applying the color to
+    <strong>all</strong>
+    the shapes within. You can force the icon to match the parent's text color
+    by passing
+    <EuiCode @language='text'>color="inherit"</EuiCode>
+    to the icon.</p>
+</EuiText>
+<EuiSpacer />
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.colorinherit}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.iconColors as |color|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{concat '@color=' '"' color '"'}}
+        @afterMessage='Copied'
+        as |copy|
+      >
+        <EuiPanel @paddingSize='s' @hasShadow={{false}} @onClick={{copy}}>
+          <EuiIcon @type='gisApp' @color={{color}} />
+          <small>
+            {{color}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked colorCode = `
+ <EuiIcon type="brush" color="primary" />
+`;
+
+  @tracked colorinherit = `
+ <EuiIcon type="gisApp" color="primary" />
+`;
+
+  @tracked iconColors = [
+    'default',
+    'inherit',
+    'primary',
+    'success',
+    'accent',
+    'warning',
+    'danger',
+    'text',
+    'subdued',
+    'ghost',
+    '#DA8B45',
+    '#DDDDDD'
+  ];
+}
+```

package/docs/display/icons-demo/demo8.md

@@ -0,0 +1,47 @@
+---
+order: 8
+---
+
+# Custom SVGs
+
+<EuiText>
+  <p>The <EuiCode @language="text">type</EuiCode> prop can accept a valid enum, string or React SVG Element. When using a custom SVG, please make sure it sits on a square canvas and preferably utilizes one of EUI's sizes (<EuiCode @language="text">16x16</EuiCode> or <EuiCode @language="text">32x32</EuiCode>).</p>
+  <p>When using custom SVGs for simple glyphs, <strong>remove all fill attributes</strong> on the SVG and utilize the CSS helpers if you have complex logos that need to work with theming.</p>
+</EuiText>
+<EuiSpacer />
+
+```hbs template
+<EuiFlexGrid @columns={{2}}>
+  <EuiPanel @paddingSize='s'>
+    <EuiFlexItem>
+      <EuiIcon
+        @type='https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg'
+        @size='xl'
+        @title='My SVG logo'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+        {{this.customsvg}}
+      </EuiCodeBlock>
+    </EuiFlexItem>
+  </EuiPanel>
+</EuiFlexGrid>
+<EuiSpacer />
+<EuiSpacer />
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked customsvg = `
+ <EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" size="xl" title="My SVG logo" />
+`;
+}
+```

package/docs/display/icons.md

@@ -1 +1 @@
-# Icons
+<EuiPageHeader @pageTitle="Icons"/>

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

@@ -1,52 +1,17 @@
-# Demo
+---
+order: 1
+---
 
 ```hbs template
-<EuiText @color="primary">
-  Size s
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="s"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-<EuiText @color="accent">
-  Size m
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="m"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-<EuiText @color="warning">
-  Size l
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="l"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-<EuiText @color="warning">
-  Size Custom 300px
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="300"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-```
+<EuiFlexGroup>
+  <EuiFlexItem @grow={{false}}>
+    <EuiImage
+      @size='l'
+      @hasShadow={{true}}
+      @caption='Random nature image'
+      @alt='Random nature image'
+      @src='https://picsum.photos/300/300'
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

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

@@ -0,0 +1,35 @@
+---
+order: 2
+---
+
+# Click an image for a fullscreen version
+
+ <EuiText>
+    <p>Apply the <EuiCode @language="text">allowFullScreen</EuiCode> prop to make the image clickable and show a fullscreen version. Note that the second image also passes <EuiCode @language="js">fullScreenIconColor<span class="token operator">=</span><span class="token string">"dark"</span></EuiCode> to change icon color to better contrast against the light background of that image.</p>
+    </EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem @grow={{false}}>
+    <EuiImage
+      @size='m'
+      @hasShadow={{true}}
+      @allowFullScreen={{true}}
+      @caption='Click me'
+      @alt='Accessible image alt goes here'
+      @url='https://source.unsplash.com/2000x1000/?Nature'
+    />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiImage
+      @size='m'
+      @hasShadow={{true}}
+      @allowFullScreen={{true}}
+      @caption='Click me'
+      @alt='Accessible image alt goes here'
+      @fullScreenIconColor='dark'
+      @url='https://source.unsplash.com/1000x2000/?Nature'
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/display/image-demo/demo3.md

@@ -0,0 +1,75 @@
+---
+order: 3
+---
+
+# Images can be sized
+
+<EuiText>
+    <p>Images can be sized by passing the <EuiCode @language="text">size</EuiCode> prop a value of <EuiCode @language="text">s / m / l / xl / original / fullWidth / number / string</EuiCode>. This size sets the <strong>maximum</strong> length of the longest edge of the image, whether that is height or width, and scales it. Only the provided sizing values will also increase the size of a smaller image.</p>
+    </EuiText>
+
+```hbs template
+<div>
+  <EuiImage
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @size='{{50}}'
+    @caption='Custom size (50)'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='s'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Small'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='m'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Medium'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='l'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Large'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='xl'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Extra large'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Original'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @size='fullWidth'
+    @caption='Full width'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+</div>
+```

package/docs/display/image-demo/demo4.md

@@ -0,0 +1,80 @@
+---
+order: 4
+---
+
+# Float images within text
+
+<EuiText>
+<p>When using <EuiCode @language="text">EuiImage</EuiCode> within <EuiCode @language="text">EuiText</EuiCode> it is often useful to apply floats. Almost always you'll want to pair the <EuiCode @language="text">float</EuiCode> prop usage, with a <EuiCode @language="text">margin</EuiCode> prop usage to give space around your image. Margins, when used in combo with floats, will adjust depending upon the position of the float.</p>
+</EuiText>
+
+```hbs template
+<EuiText>
+  <EuiImage
+    @size='l'
+    @float='right'
+    @margin='l'
+    @hasShadow={{true}}
+    @caption='Random nature image'
+    @allowFullScreen={{true}}
+    @alt='Random nature image'
+    @url='https://picsum.photos/800/500'
+  />
+  <p>Eius et sunt. Nisi neque quis. Quae expedita non iure odit qui consequatur
+    beatae. Quos laboriosam voluptas eaque aut nostrum blanditiis sint aut enim.
+    Quos alias aliquam modi laborum. Mollitia qui minima suscipit voluptatem
+    nesciunt labore vero qui quia. Voluptatem quibusdam deleniti laudantium
+    totam laborum architecto ad eligendi consequatur. Iusto architecto debitis
+    sit aspernatur consectetur corrupti sit excepturi quasi. Vero error facilis
+    ea eum molestias sunt aliquam rerum libero. Eos aut aut commodi optio quod
+    repellat. Dolorem exercitationem placeat a dicta. Maiores qui quia ratione
+    quasi. Facilis laboriosam est magni tempore qui pariatur quia.
+  </p>
+  <p>Qui minus quo. Aut est rem totam. Et aliquid vitae ad aspernatur blanditiis
+    illo nam voluptatem numquam. Voluptatem ducimus iure voluptas voluptates est
+    quibusdam porro aliquam accusantium. Accusantium repellendus consequatur
+    eveniet omnis autem. Et deleniti consequatur aliquam et quis nemo rem
+    excepturi modi. Delectus beatae magni quasi dolorem fugiat. Et qui debitis
+    in et. Qui id aut maxime consequatur. Optio et ut quam sint excepturi.
+    Tenetur cum maiores accusamus ea. Ad sit ut aliquam rerum eius culpa et.</p>
+  <p>Velit doloribus expedita eos voluptas est debitis adipisci laboriosam
+    consequuntur. Officia repellat aut voluptas sunt. Ipsam dignissimos natus
+    labore reiciendis est numquam quia soluta rerum. Nisi modi est aliquid.
+    Animi mollitia et fugit enim et. Voluptatem laudantium laudantium corrupti
+    sit explicabo itaque esse omnis voluptate. Nemo dolorum ut. Voluptatibus eum
+    voluptatem sit laborum velit cupiditate repudiandae id. Atque neque sed
+    corporis aut quia error voluptates cupiditate aut. Ut quam aperiam earum
+    dolor est dicta tempore voluptatem sint. Beatae assumenda nemo aperiam
+    nesciunt. Quaerat id voluptas commodi.</p>
+  <EuiImage
+    @size='l'
+    @float='left'
+    @margin='l'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Another random image'
+    @alt='Random nature image'
+    @url='https://picsum.photos/300/300'
+  />
+  <p>Earum ea voluptatibus reprehenderit dolorum non et aperiam eum non.
+    Expedita doloribus itaque. Consectetur non et aut sit quis inventore eos et.
+    Aut fuga veniam magnam excepturi nihil. Enim ut et. Dolores sint iste minima
+    itaque non et atque magnam iure. Odio perspiciatis qui cumque autem autem.
+    Ut nam beatae voluptatem expedita incidunt vel ea enim. Qui unde dolores
+    earum eos. Et repudiandae aliquid quia rerum ducimus doloremque. Consectetur
+    ut perferendis totam. Veniam in suscipit omnis. Ut est quidem et iste
+    voluptatem officia ad. Officia in perferendis necessitatibus.</p>
+  <p>Est ut ut iure sunt ab et. Iste possimus necessitatibus quia totam dolorem
+    distinctio harum totam et. Quaerat in totam non officiis ut. Provident
+    fugiat repellendus autem libero harum ducimus doloribus autem reiciendis.
+    Odio qui nesciunt consequatur et illum quia. Non dicta et voluptatibus rerum
+    dolor. Illum consequatur deleniti dolor dignissimos quod rerum. Ut quidem
+    eos sapiente rerum numquam laudantium. Nostrum sunt quia quis est sit.
+    Ratione sint error. Alias animi ullam unde magnam repellendus omnis et quia
+    dolorem. Voluptas quidem laudantium totam quisquam in reiciendis officiis.
+    Et suscipit doloribus earum quis nihil voluptatem provident aut vero.
+    Accusantium ducimus voluptatem ad aperiam ut consequatur. Ut dicta
+    consequatur. Dignissimos ipsum accusamus quos provident consequatur. Sequi
+    temporibus quisquam voluptates eum eos consectetur et.</p>
+</EuiText>
+```

package/docs/display/image.md

@@ -1 +1,9 @@
-# Image
+
+<EuiPageHeader @pageTitle="Image"/>
+
+ <EuiSpacer />
+    <EuiText>
+    <p>Use <strong>EuiImage</strong> when you need to place a static image into a page with an optional caption.</p>
+    </EuiText>
+
+  <EuiHorizontalRule />

package/docs/display/list-group.md

@@ -1 +1 @@
-# List Group
+<EuiPageHeader @pageTitle="List Group"/>

package/docs/display/loading/logo-demo/demo1.md

@@ -0,0 +1,15 @@
+# Basic loading logo
+
+<EuiText>
+ <strong>EuiLoadingLogo</strong> accepts any of our <strong>EuiIcon</strong> logos. It should only be used in very large panels, like full screen pages.
+</EuiText>
+
+```hbs template
+<div>
+  <EuiLoadingLogo />
+  &emsp;
+  <EuiLoadingLogo @logo='logoObservability' @size='l' />
+  &emsp;
+  <EuiLoadingLogo @logo='logoSecurity' @size='xl' />
+</div>
+```

package/docs/display/loading/logo.md

@@ -0,0 +1 @@
+# Logo