@ember-eui/core 5.1.0 → 5.3.0

package/addon/components/eui-combo-box/options/index.hbs

@@ -1,4 +1,6 @@
-{{#let (component (ensure-safe-component @groupComponent)) as |Group|}}
+{{#let
+  (component (ensure-safe-component @groupComponent))
+as |Group|}}
   {{#if @select.loading}}
     <EuiText @size="xs" class="euiComboBoxOptionsList__empty">
       <EuiFlexGroup @gutterSize="s" @justifyContent="center">
@@ -15,7 +17,7 @@
     <VerticalCollection
       @items={{this.flattedOptions}}
       @tagName="div"
-      @estimateHeight={{arg-or-default @rowHeight 29}}
+      @estimateHeight={{this.rowHeight}}
       @staticHeight={{true}}
       @bufferSize={{3}}
       style="max-height: 200px; overflow-y: auto;"
@@ -34,14 +36,14 @@
           @select={{@select}}
           @extra={{@extra}}
           style={{html-safe
-            (concat "height:" (arg-or-default @rowHeight 29) "px;")
+            (concat "height:" this.rowHeight "px;")
           }}
           data-option-index="{{index}}"
         />
       {{else}}
         <li
           style={{html-safe
-            (concat "height:" (arg-or-default @rowHeight 29) "px;")
+            (concat "height:" this.rowHeight "px;")
           }}
           class="euiFilterSelectItem
             {{if

package/addon/components/eui-combo-box/options/index.js

@@ -1,7 +1,9 @@
 import EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';
 import { emberPowerSelectIsGroup } from 'ember-power-select/helpers/ember-power-select-is-group';
 import { tracked } from '@glimmer/tracking';
+import config from 'ember-get-config';
 
+const rowHeight = config['@ember-eui/core']?.euiComboBoxOptionsHeight || 29;
 export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   @tracked flattedOptions = [];
   _optionsCache = [];
@@ -34,4 +36,8 @@ export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions
     }
     return option;
   }
+
+  get rowHeight() {
+    return this.args.rowHeight ?? rowHeight
+  }
 }

package/addon/components/eui-context-menu-item/index.hbs

@@ -0,0 +1,60 @@
+{{#let
+  (class-names
+    "euiContextMenuItem"
+    componentName="EuiContextMenuItem"
+    disabled=@disabled
+    layoutAlign=(arg-or-default @layoutAlign "center")
+    size=@size
+  )
+as |classes|}}
+  {{#if (and @href (not @disabled))}}
+    <a
+      class={{classes}}
+      href={{@href}}
+      target={{@target}}
+      {{did-insert this.registerLink}}
+      ...attributes
+    />
+
+  {{else}}
+    <button
+      class={{classes}}
+      disabled={{@disabled}}
+      type="button"
+      {{did-insert this.registerLink}}
+      ...attributes
+    />
+  {{/if}}
+{{/let}}
+
+
+{{!-- shared code that will be rendered inside the button or anchor --}}
+{{#if this.link}}
+  {{#in-element this.link}}
+    <span
+      class={{class-names
+        'euiContextMenu__itemLayout'
+        componentName="EuiContextMenuItem"
+        layoutAlign=(arg-or-default @layoutAlign "center")
+      }}
+    >
+      {{#if @isLoading}}
+        {{!-- spinner is not part of eui spec --}}
+        <EuiLoadingSpinner class="euiContextMenu__icon"/>
+      {{else}}
+        <EuiIcon
+          @iconClasses={{concat "euiContextMenu__icon " @iconClasses}}
+          @type={{@icon}}
+          @size="m"
+          @color="inherit"
+        />
+      {{/if}}
+      <span class="euiContextMenuItem__text">
+        {{yield}}
+      </span>
+      {{#if @hasPanel}}
+        <EuiIcon @type="arrowRight" @size="m" class="euiContextMenu__arrow"/>
+      {{/if}}
+    </span>
+  {{/in-element}}
+{{/if}}

package/addon/components/eui-context-menu-item/index.ts

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class EuiContextMenuItemComponent extends Component {
+  @tracked link: HTMLAnchorElement | HTMLButtonElement | null = null;
+
+  @action
+  registerLink(e: HTMLAnchorElement | HTMLButtonElement) {
+    this.link = e;
+  }
+}

package/addon/components/eui-context-menu-panel/index.hbs

@@ -0,0 +1,5 @@
+{{!-- ToDo not yet implemented, only created to avoid creating divs with euiContextMenuPanel class --}}
+
+<div class="euiContextMenuPanel" tabindex="-1">
+  {{yield}}
+</div>

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

@@ -117,7 +117,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   getEuiIconSvgPath(type: EuiIconType): string {
-    return typeToPathMap[type].replace('tokens/', '');
+    return typeToPathMap[type];
   }
 
   get isAppIcon(): string | boolean {

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

@@ -50,7 +50,7 @@ export function inlineStyles({
   if (!isNamedColor) {
     checkValidColor(color);
 
-    name = name.length ? name : '';
+    name = name ? name : '';
     assignedColor =
       color || VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
 

package/addon/utils/css-mappings/eui-context-menu-item.ts

@@ -0,0 +1,26 @@
+export const baseClass = '';
+
+const disabledMapping = {
+  true: 'euiContextMenuItem-isDisabled'
+};
+
+const layoutAlignMapping = {
+  primary: `${baseClass}--primary`,
+  accent: `${baseClass}--accent`,
+  text: `${baseClass}--text`
+};
+
+const sizeMapping = {
+  s: 'euiContextMenuItem--small'
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    disabled: disabledMapping,
+    layoutAlign: layoutAlignMapping,
+    size: sizeMapping,
+  }
+};
+
+export default mapping;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "d8af7448f9a9283a6b2aeb246dbbf73687c56a0e"
+  "gitHead": "b151365ce78116337b791addc3d3244c2e1fc3b8"
 }