@ember-eui/core 5.0.3 → 5.2.1

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

@@ -1,137 +1,139 @@
 import EuiAccordion from './eui-accordion';
-import EuiIcon from './eui-icon';
-import EuiModal from './eui-modal';
-import EuiLoadingSpinner from './eui-loading-spinner';
-import EuiImage from './eui-image';
-import EuiSpacer from './eui-spacer';
-import EuiTabs from './eui-tabs';
-import EuiTitle from './eui-title';
-import EuiTextAlign from './eui-text-align';
-import EuiTextColor from './eui-text-color';
-import EuiText from './eui-text';
-import EuiPanel from './eui-panel';
-import EuiPageContent from './eui-page-content';
 import EuiAvatar from './eui-avatar';
-import EuiCallOut from './eui-call-out';
-import EuiFlexGroup from './eui-flex-group';
-import EuiFlexItem from './eui-flex-item';
-import EuiFlexGrid from './eui-flex-grid';
-import EuiNotificationBadge from './eui-notification-badge';
-import EuiBadgeGroup from './eui-badge-group';
 import EuiBadge from './eui-badge';
-import EuiCard from './eui-card';
+import EuiBadgeGroup from './eui-badge-group';
+import EuiBetaBadge from './eui-beta-badge';
+import EuiBottomBar from './eui-bottom-bar';
+import EuiButton from './eui-button';
 import EuiButtonEmpty from './eui-button-empty';
+import EuiButtonIcon from './eui-button-icon';
+import EuiCallOut from './eui-call-out';
+import EuiCard from './eui-card';
 import EuiCardSelect from './eui-card-select';
+import EuiCodeBlock from './eui-code-block';
+import EuiCollapsibleNavGroup from './eui-collapsible-nav-group';
+import EuiCommentEvent from './eui-comment-event';
+import EuiCommentTimelineIcon from './eui-comment-timeline-icon';
+import EuiContextMenuItem from './eui-context-menu-item';
+import EuiDescribedFormGroup from './eui-described-form-group';
+import EuiDescriptionList from './eui-description-list';
+import EuiEmptyPrompt from './eui-empty-prompt';
+import EuiFilePicker from './eui-file-picker';
+import EuiFlexGrid from './eui-flex-grid';
+import EuiFlexGroup from './eui-flex-group';
+import EuiFlexItem from './eui-flex-item';
+import EuiFlyout from './eui-flyout';
+import EuiFormRow from './eui-form-row';
+import EuiGlobalToastList from './eui-global-toast-list';
+import EuiHeader from './eui-header';
+import EuiHeaderLinks from './eui-header-links';
 import EuiHeaderSection from './eui-header-section';
 import EuiHeaderSectionItem from './eui-header-section-item';
-import EuiHeader from './eui-header';
 import EuiHealth from './eui-health';
-import EuiButtonIcon from './eui-button-icon';
-import EuiButton from './eui-button';
 import EuiHorizontalRule from './eui-horizontal-rule';
-import EuiCommentTimelineIcon from './eui-comment-timeline-icon';
-import EuiCommentEvent from './eui-comment-event';
-import EuiFlyout from './eui-flyout';
-import EuiCollapsibleNavGroup from './eui-collapsible-nav-group';
-import EuiStepNumber from './eui-step-number';
-import EuiProgress from './eui-progress';
-import EuiProgressData from './eui-progress-data';
-import EuiFormRow from './eui-form-row';
-import EuiDescribedFormGroup from './eui-described-form-group';
+import EuiIcon from './eui-icon';
+import EuiImage from './eui-image';
+import EuiLink from './eui-link';
 import EuiListGroup from './eui-list-group';
 import EuiListGroupItem from './eui-list-group-item';
-import EuiTextArea from './eui-text-area';
-import EuiFilePicker from './eui-file-picker';
-import EuiBottomBar from './eui-bottom-bar';
+import EuiLoadingSpinner from './eui-loading-spinner';
+import EuiModal from './eui-modal';
+import EuiNotificationBadge from './eui-notification-badge';
 import EuiPage from './eui-page';
+import EuiPageBody from './eui-page-body';
+import EuiPageContent from './eui-page-content';
+import EuiPageContentBody from './eui-page-content-body';
+import EuiPageHeader from './eui-page-header';
+import EuiPageSideBar from './eui-page-side-bar';
+import EuiPanel from './eui-panel';
 import EuiPopover from './eui-popover';
-import EuiPopoverTitle from './eui-popover-title';
 import EuiPopoverFooter from './eui-popover-footer';
+import EuiPopoverTitle from './eui-popover-title';
+import EuiProgress from './eui-progress';
+import EuiProgressData from './eui-progress-data';
 import EuiRangeHighlight from './eui-range-highlight';
 import EuiRangeInput from './eui-range-input';
 import EuiRangeLevels from './eui-range-levels';
-import EuiToolTip from './eui-tool-tip';
-import EuiToast from './eui-toast';
-import EuiGlobalToastList from './eui-global-toast-list';
-import EuiCodeBlock from './eui-code-block';
+import EuiSpacer from './eui-spacer';
 import EuiStat from './eui-stat';
-import EuiHeaderLinks from './eui-header-links';
-import EuiLink from './eui-link';
-import EuiBetaBadge from './eui-beta-badge';
-import EuiDescriptionList from './eui-description-list';
-import EuiPageSideBar from './eui-page-side-bar';
-import EuiPageBody from './eui-page-body';
-import EuiPageHeader from './eui-page-header';
-import EuiPageContentBody from './eui-page-content-body';
-import EuiEmptyPrompt from './eui-empty-prompt';
+import EuiStepNumber from './eui-step-number';
+import EuiTabs from './eui-tabs';
+import EuiText from './eui-text';
+import EuiTextAlign from './eui-text-align';
+import EuiTextArea from './eui-text-area';
+import EuiTextColor from './eui-text-color';
+import EuiTitle from './eui-title';
+import EuiToast from './eui-toast';
+import EuiToolTip from './eui-tool-tip';
 
 const mapping: Mapping = {
-  EuiDescriptionList,
-  EuiBetaBadge,
-  EuiLink,
-  EuiStat,
-  EuiCodeBlock,
   EuiAccordion,
-  EuiIcon,
-  EuiModal,
-  EuiImage,
-  EuiLoadingSpinner,
-  EuiSpacer,
-  EuiTabs,
-  EuiTitle,
-  EuiTextAlign,
-  EuiTextColor,
-  EuiText,
-  EuiPanel,
-  EuiPageContent,
   EuiAvatar,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlexGrid,
-  EuiNotificationBadge,
-  EuiBadgeGroup,
   EuiBadge,
-  EuiCard,
+  EuiBadgeGroup,
+  EuiBetaBadge,
+  EuiBottomBar,
+  EuiButton,
   EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiCard,
   EuiCardSelect,
+  EuiCodeBlock,
+  EuiCollapsibleNavGroup,
+  EuiCommentEvent,
+  EuiCommentTimelineIcon,
+  EuiContextMenuItem,
+  EuiDescribedFormGroup,
+  EuiDescriptionList,
+  EuiEmptyPrompt,
+  EuiFilePicker,
+  EuiFlexGrid,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFormRow,
+  EuiGlobalToastList,
+  EuiHeader,
+  EuiHeaderLinks,
   EuiHeaderSection,
   EuiHeaderSectionItem,
-  EuiHeader,
   EuiHealth,
-  EuiButton,
-  EuiButtonIcon,
   EuiHorizontalRule,
-  EuiCommentTimelineIcon,
-  EuiCommentEvent,
-  EuiFlyout,
-  EuiCollapsibleNavGroup,
-  EuiStepNumber,
-  EuiProgress,
-  EuiProgressData,
-  EuiFormRow,
-  EuiDescribedFormGroup,
+  EuiIcon,
+  EuiImage,
+  EuiLink,
   EuiListGroup,
   EuiListGroupItem,
-  EuiTextArea,
-  EuiFilePicker,
-  EuiBottomBar,
+  EuiLoadingSpinner,
+  EuiModal,
+  EuiNotificationBadge,
   EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageSideBar,
+  EuiPanel,
   EuiPopover,
-  EuiPopoverTitle,
   EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiProgress,
+  EuiProgressData,
   EuiRangeHighlight,
   EuiRangeInput,
   EuiRangeLevels,
-  EuiToolTip,
+  EuiSpacer,
+  EuiStat,
+  EuiStepNumber,
+  EuiTabs,
+  EuiText,
+  EuiTextAlign,
+  EuiTextArea,
+  EuiTextColor,
+  EuiTitle,
   EuiToast,
-  EuiGlobalToastList,
-  EuiHeaderLinks,
-  EuiPageSideBar,
-  EuiPageBody,
-  EuiPageHeader,
-  EuiPageContentBody,
-  EuiEmptyPrompt
+  EuiToolTip,
 };
 
 export default mapping;

package/app/components/eui-context-menu-item/index.js

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

package/app/components/eui-context-menu-panel/index.js

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

package/app/helpers/merge.js

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

package/docs/display/notification-event/demo/demo2.md

@@ -35,18 +35,11 @@ order: 2
       @accordionHideText='hide'
     >
       <:contextMenu>
-        <!-- ToDo Missing EuiContextMenu component -->
-        <button
-          class="euiContextMenuItem"
-          type="button"
+        <EuiContextMenuItem
           {{on 'click' this.onRead}}
         >
-          <span class="euiContextMenu__itemLayout">
-            <span class="euiContextMenuItem__text">
-              Mark as {{if this.isRead 'unread' 'read'}}
-            </span>
-          </span>
-        </button>
+          Mark as {{if this.isRead 'unread' 'read'}}
+        </EuiContextMenuItem>
       </:contextMenu>
 
       <:primaryAction>

package/docs/layout/{accordion.md → accordion/demo/d01-simple-and-unstyle.md}

@@ -1,31 +1,15 @@
-<EuiPageHeader @pageTitle="Accordion"/>
-<EuiCallOut>
-  <:body>
-    <EuiText>
-      Take care when including flex group content within accordions<br />
-      <strong>EuiFlexGroup's</strong>
-      negative margins can sometimes create scrollbars within
-      <strong>EuiAccordion</strong>
-      because of the overflow tricks used to hide content. If you run into this
-      issue make sure your paddingSize prop is large enough to account for the
-      <EuiCode>gutterSize</EuiCode>
-      of any nested flex groups.
-    </EuiText>
-  </:body>
-</EuiCallOut>
+---
+order: 1
+---
 
-<EuiSpacer />
-<EuiTitle>
-  Simple and unstyled
-</EuiTitle>
-<EuiSpacer />
+# Simple and unstyled
 
 <EuiText>
   <strong>EuiAccordion</strong>
   has been purposely designed with minimal styles, allowing you to visually
   enhance it as needed (see the accordion form example). The only styling
   enforced by EUI is the caret icon, which indicates to users that the item can
-  be opened.<br /><br />
+  be opened.
   A
   <EuiCode>buttonContent</EuiCode>
   prop defines the content of the clickable area. On click it will expose the
@@ -36,4 +20,16 @@
   <EuiCode>buttonClassName</EuiCode>
   (for the clickable area).
 </EuiText>
-<EuiSpacer />
+
+```hbs template
+<EuiAccordion>
+  <:buttonContent>
+    Click me to toggle
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color="subdued" @hasShadow={{false}}>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```

package/docs/layout/accordion/demo/d02-arrow-display.md

@@ -0,0 +1,34 @@
+---
+order: 2
+---
+
+# Arrow display
+
+<EuiText>
+  The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering button text.
+  If you must hide or change the side in which the arrow appears, use <EuiCode>arrowDisplay: 'right'</EuiCode> or <EuiCode>'none'</EuiCode>
+</EuiText>
+
+```hbs template
+<EuiAccordion @arrowDisplay='right'>
+  <:buttonContent>
+    This accordion has the arrow on the right
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color="subdued" @hasShadow={{false}}>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @arrowDisplay='none'>
+  <:buttonContent>
+    This one has it removed entirely
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color="subdued" @hasShadow={{false}}>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```

package/docs/layout/{accordion-demo/demo2.md → accordion/demo/d03-multiple-accordions.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 ---
 
 # Multiple accordions
@@ -23,7 +23,7 @@ order: 2
     An accordion with padding applied through props
   </:buttonContent>
   <:content>
-    <EuiText size='s'>
+    <EuiText @size='s'>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
@@ -37,7 +37,7 @@ order: 2
     because of eui-textTruncate
   </:buttonContent>
   <:content>
-    <EuiText size='s'>
+    <EuiText @size='s'>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
@@ -53,13 +53,14 @@ order: 2
     A third accordion with nested accordion
   </:buttonContent>
   <:content>
-    <EuiText size='s'>
+    <EuiText @size='s'>
       <p>
         This content area will grow to accommodate when the accordion below
         opens
       </p>
     </EuiText>
-    <EuiAccordion @paddingSize='m'>
+    <EuiSpacer/>
+    <EuiAccordion>
       <:buttonContent>
         A fourth nested accordion
       </:buttonContent>

package/docs/layout/{accordion-demo/demo3.md → accordion/demo/d04-extra-actions.md}

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 ---
 
 # Extra actions
@@ -9,7 +9,7 @@ order: 3
 </EuiText>
 
 ```hbs template
-<EuiAccordion @paddingSize='m' @extraAction={{true}}>
+<EuiAccordion @paddingSize='l' @extraAction={{true}}>
   <:buttonContent>
     Click to open
   </:buttonContent>

package/docs/layout/{accordion-demo/demo4.md → accordion/demo/d05-opened-on-initial-render.md}

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 ---
 
 # Opened on initial render
@@ -11,7 +11,7 @@ order: 4
 </EuiText>
 
 ```hbs template
-<EuiAccordion @paddingSize='m' @initialIsOpen={{true}}>
+<EuiAccordion @initialIsOpen={{true}}>
   <:buttonContent>
     I am opened by default. Click me to toggle close / open
   </:buttonContent>

package/docs/layout/{accordion-demo/demo5.md → accordion/demo/d06-controlling-toggled-state.md}

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 ---
 
 # Controlling toggled state
@@ -8,7 +8,7 @@ order: 5
   Typically, the open and closed state of
   <strong>EuiAccordion</strong>
   is maintained by the component's internal state. Though, you can manually
-  control it with:
+  control it.
   <ul>
     <li><EuiCode>forceState</EuiCode>: Accepts either
       <EuiCode>'open'</EuiCode>
@@ -21,6 +21,7 @@ order: 5
 </EuiText>
 
 ```hbs template
+<TodoText @text="missing EuiButtonGroup component"/>
 <EuiFlexGroup>
   <EuiFlexItem>
     <EuiButton {{on 'click' (fn (mut this.accordionState) 'open')}}>

package/docs/layout/{accordion-demo/demo6.md → accordion/demo/d07-loading-state.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 ---
 
 # Loading state
@@ -21,6 +21,7 @@ order: 6
 </EuiText> -->
 
 ```hbs template
+<TodoText @text="missing EuiButtonGroup component"/>
 <EuiFlexGroup>
   <EuiFlexItem>
     <EuiText>

package/docs/layout/accordion/demo/d08-when-content-changes-dynamically.md

@@ -0,0 +1,71 @@
+---
+order: 8
+---
+
+# When content changes dynamically
+
+<EuiText>
+  If an accordion’s content changes height while the accordion is open, it will
+  resize dynamically.
+</EuiText>
+ 
+```hbs template
+<EuiAccordion @paddingSize='s' @initialIsOpen={{true}}>
+  <:buttonContent>
+    Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+
+    <EuiPanel @color='subdued'>
+      <EuiText @size="s">
+        <p>
+          <EuiButton
+            @size='s'
+            @iconType='plusInCircleFilled'
+            {{on 'click' (fn this.incrementDecreaseRows 'add')}}
+          >
+            Increase height to
+            {{add this.counter 1}}
+            items
+          </EuiButton>
+          <EuiButton
+            @size='s'
+            @iconType='minusInCircleFilled'
+            {{on 'click' (fn this.incrementDecreaseRows 'sub')}}
+            @isDisabled={{eq this.counter 1}}
+          >
+            Decrease height to
+            {{sub this.counter 1}}
+            items
+          </EuiButton>
+        </p>
+        <ul>
+          {{#each (range 0 this.counter) as |row|}}
+            <li> Row {{add row 1}}</li>
+          {{/each}}
+        </ul>
+      </EuiText>
+    </EuiPanel>
+
+  </:content>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AccordionDemo8Component extends Component {
+  @tracked counter = 1;
+
+  @action
+  incrementDecreaseRows(actionType) {
+    if (actionType == 'add') {
+      this.counter++;
+    } else {
+      this.counter--;
+    }
+  }
+}
+```

package/docs/layout/{accordion-demo/demo8.md → accordion/demo/d09-interactive-content-in-the-trigger.md}

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 ---
 
 # Interactive content in the trigger
@@ -32,12 +32,12 @@ order: 8
 <EuiSpacer />
 <EuiAccordion @paddingSize='s' @buttonElement="div">
   <:buttonContent>
-    <EuiText
+    <EuiLink
       onClick={{this.onClick}}
-      href='#/layout/accordion#interactive-content-in-the-trigger'
+      @href='#docfy-demo-docs-layout-accordion-d09-interactive-content-in-the-trigger'
     >
       This is a nested link
-    </EuiText>
+    </EuiLink>
   </:buttonContent>
   <:content>
     <EuiPanel @color='subdued'>