@ember-eui/core 4.2.6 → 5.0.0-alpha.1

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

@@ -1,56 +1,36 @@
-# Demo
+---
+order: 1
+---
+
+# Glyphs
+
+<EuiText>
+ <p>Glyphs are small, monochromatic icons that typically should always use the default size of <EuiCode @language="js">size<span class="token operator">=</span><span class="token string">"m"</span></EuiCode>.</p>
+</EuiText>
 
 ```hbs template
-<EuiIcon @type='logoGolang' />
-<EuiIcon @type='logoGolang' @size='m' />
-<EuiIcon @type='logoGolang' @size='l' />
-<EuiIcon @type='logoGolang' @size='xl' />
-<EuiIcon @type='logoGolang' @size='xxl' />
-<br />
-<EuiIcon @type='logoRedis' @size='s' />
-<EuiIcon @type='logoRedis' @size='m' />
-<EuiIcon @type='logoRedis' @size='l' />
-<EuiIcon @type='logoRedis' @size='xl' />
-<EuiIcon @type='logoRedis' @size='xxl' />
-<br />
-<EuiIcon @type='logoAWS' @size='s' />
-<EuiIcon @type='logoAWS' @size='m' />
-<EuiIcon @type='logoAWS' @size='l' />
-<EuiIcon @type='logoAWS' @size='xl' />
-<EuiIcon @type='logoAWS' @size='xxl' />
-<br />
-<EuiIcon @type='/assets/ember.svg' @size='s' />
-<EuiIcon @type='/assets/ember.svg' @size='m' />
-<EuiIcon @type='/assets/ember.svg' @size='l' />
-<EuiIcon @type='/assets/ember.svg' @size='xl' />
-<EuiIcon @type='/assets/ember.svg' @size='xxl' />
-<br />
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='s'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='m'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='l'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='xl'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='xxl'
-/>
-<br />
-<EuiIcon @type='flag' @size='s' @color='green' />
-<EuiIcon @type='flag' @size='m' @color='white' />
-<EuiIcon @type='flag' @size='l' @color='red' />
-<EuiIcon @type='flag' @size='xl' @color='green' />
-<EuiIcon @type='flag' @size='xxl' @color='white' />
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.javascriptCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.glyphs as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel @paddingSize='s' @hasShadow={{false}} @onClick={{copy}}>
+          <EuiIcon @type='{{icon}}' />
+          <small>
+            {{icon}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
 ```
 
 ```js component
@@ -62,12 +42,245 @@ import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
 const iconKeys = Object.keys(typeToPathMap);
 
 export default class DemoIconComponent extends Component {
-  @tracked icon = 'tokenNumber';
-  icons = iconKeys;
+  @tracked javascriptCode = `
+ <EuiIcon @type='accessibility' />
+`;
 
-  @action
-  update() {
-    this.icon = this.icons[Math.floor(Math.random() * this.icons.length)];
-  }
+  @tracked glyphs = [
+    'accessibility',
+    'aggregate',
+    'alert',
+    'analyzeEvent',
+    'annotation',
+    'apmTrace',
+    'apps',
+    'arrowDown',
+    'arrowLeft',
+    'arrowRight',
+    'arrowUp',
+    'asterisk',
+    'beaker',
+    'bell',
+    'bellSlash',
+    'bolt',
+    'boxesHorizontal',
+    'boxesVertical',
+    'branch',
+    'broom',
+    'brush',
+    'bug',
+    'bullseye',
+    'calendar',
+    'check',
+    'checkInCircleFilled',
+    'cheer',
+    'clock',
+    'cloudDrizzle',
+    'cloudStormy',
+    'cloudSunny',
+    'color',
+    'compute',
+    'console',
+    'continuityAbove',
+    'continuityAboveBelow',
+    'continuityBelow',
+    'continuityWithin',
+    'controlsHorizontal',
+    'controlsVertical',
+    'copy',
+    'copyClipboard',
+    'cross',
+    'crosshairs',
+    'crossInACircleFilled',
+    'currency',
+    'cut',
+    'database',
+    'document',
+    'documentation',
+    'documentEdit',
+    'documents',
+    'dot',
+    'download',
+    'email',
+    'empty',
+    'eql',
+    'eraser',
+    'exit',
+    'expand',
+    'expandMini',
+    'exportAction',
+    'eye',
+    'eyeClosed',
+    'faceHappy',
+    'faceNeutral',
+    'faceSad',
+    'filter',
+    'flag',
+    'fold',
+    'folderCheck',
+    'folderClosed',
+    'folderExclamation',
+    'folderOpen',
+    'frameNext',
+    'framePrevious',
+    'fullScreen',
+    'fullScreenExit',
+    'function',
+    'gear',
+    'glasses',
+    'globe',
+    'grab',
+    'grabHorizontal',
+    'grid',
+    'heart',
+    'heatmap',
+    'help',
+    'home',
+    'iInCircle',
+    'image',
+    'importAction',
+    'indexClose',
+    'indexEdit',
+    'indexFlush',
+    'indexMapping',
+    'indexOpen',
+    'indexRuntime',
+    'indexSettings',
+    'inputOutput',
+    'inspect',
+    'invert',
+    'ip',
+    'keyboardShortcut',
+    'kqlField',
+    'kqlFunction',
+    'kqlOperand',
+    'kqlSelector',
+    'kqlValue',
+    'layers',
+    'link',
+    'list',
+    'listAdd',
+    'lock',
+    'lockOpen',
+    'logstashFilter',
+    'logstashIf',
+    'logstashInput',
+    'logstashOutput',
+    'logstashQueue',
+    'magnifyWithMinus',
+    'magnifyWithPlus',
+    'magnet',
+    'mapMarker',
+    'memory',
+    'merge',
+    'menu',
+    'menuDown',
+    'menuLeft',
+    'menuRight',
+    'menuUp',
+    'minimize',
+    'minus',
+    'minusInCircle',
+    'minusInCircleFilled',
+    'mobile',
+    'moon',
+    'nested',
+    'node',
+    'number',
+    'offline',
+    'online',
+    'package',
+    'pageSelect',
+    'pagesSelect',
+    'paperClip',
+    'partial',
+    'pause',
+    'payment',
+    'pencil',
+    'percent',
+    'pin',
+    'pinFilled',
+    'play',
+    'playFilled',
+    'plus',
+    'plusInCircle',
+    'plusInCircleFilled',
+    'popout',
+    'push',
+    'questionInCircle',
+    'quote',
+    'refresh',
+    'reporter',
+    'returnKey',
+    'save',
+    'scale',
+    'search',
+    'securitySignal',
+    'securitySignalDetected',
+    'securitySignalResolved',
+    'shard',
+    'share',
+    'snowflake',
+    'sortable',
+    'sortDown',
+    'sortLeft',
+    'sortRight',
+    'sortUp',
+    'starEmpty',
+    'starEmptySpace',
+    'starFilled',
+    'starFilledSpace',
+    'starMinusEmpty',
+    'starMinusFilled',
+    'starPlusEmpty',
+    'starPlusFilled',
+    'stats',
+    'stop',
+    'stopFilled',
+    'stopSlash',
+    'storage',
+    'string',
+    'submodule',
+    'symlink',
+    'tableOfContents',
+    'tableDensityExpanded',
+    'tableDensityCompact',
+    'tableDensityNormal',
+    'tag',
+    'tear',
+    'temperature',
+    'timeline',
+    'timeslider',
+    'training',
+    'trash',
+    'unfold',
+    'unlink',
+    'user',
+    'users',
+    'vector',
+    'videoPlayer',
+    'visArea',
+    'visAreaStacked',
+    'visBarHorizontal',
+    'visBarHorizontalStacked',
+    'visBarVertical',
+    'visBarVerticalStacked',
+    'visGauge',
+    'visGoal',
+    'visLine',
+    'visMapCoordinate',
+    'visMapRegion',
+    'visMetric',
+    'visPie',
+    'visTable',
+    'visTagCloud',
+    'visText',
+    'visTimelion',
+    'visVega',
+    'visVisualBuilder',
+    'wordWrap',
+    'wordWrapDisabled',
+    'wrench'
+  ];
 }
 ```

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

@@ -0,0 +1,76 @@
+---
+order: 2
+---
+
+# Editor controls
+
+<EuiText>
+ <p>Editor icons relate to the visual styling of elements and are commonly used within <strong>EuiButtonGroup</strong> components.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.editor as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='{{icon}}' />
+          <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 editor = [
+    'editorAlignCenter',
+    'editorAlignLeft',
+    'editorAlignRight',
+    'editorBold',
+    'editorCodeBlock',
+    'editorComment',
+    'editorDistributeHorizontal',
+    'editorDistributeVertical',
+    'editorHeading',
+    'editorItalic',
+    'editorItemAlignBottom',
+    'editorItemAlignCenter',
+    'editorItemAlignLeft',
+    'editorItemAlignMiddle',
+    'editorItemAlignRight',
+    'editorItemAlignTop',
+    'editorLink',
+    'editorOrderedList',
+    'editorPositionBottomLeft',
+    'editorPositionBottomRight',
+    'editorPositionTopLeft',
+    'editorPositionTopRight',
+    'editorRedo',
+    'editorStrike',
+    'editorTable',
+    'editorUnderline',
+    'editorUndo',
+    'editorUnorderedList'
+  ];
+}
+```

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

@@ -0,0 +1,76 @@
+---
+order: 3
+---
+
+# Elastic logos
+
+<EuiText>
+  <p>These logos are restricted in use to Elastic products or when referencing Elastic products. They are multi-color with some internal paths having a class of <EuiCode @language="text">.euiIcon__fillNegative</EuiCode> to handle flipping colors for dark mode. The only other colors most of them support are ghost and text which turn them into a solid shape.</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.elasticCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.logos 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 elasticCode = `
+<EuiIcon type="logoElasticsearch" size="xl" />
+`;
+
+  @tracked logos = [
+    'logoElastic',
+    'logoElasticStack',
+    'logoElasticsearch',
+    'logoAppSearch',
+    'logoBeats',
+    'logoBusinessAnalytics',
+    'logoCloud',
+    'logoCloudEnterprise',
+    'logoEnterpriseSearch',
+    'logoKibana',
+    'logoLogging',
+    'logoLogstash',
+    'logoMaps',
+    'logoMetrics',
+    'logoObservability',
+    'logoSecurity',
+    'logoSiteSearch',
+    'logoUptime',
+    'logoWorkplaceSearch'
+  ];
+}
+```

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'
+  ];
+}
+```