@ember-eui/core 5.11.2 → 5.12.0

package/addon/components/eui-button/index.hbs

@@ -1,10 +1,25 @@
-{{#if (and @href (not (or @isLoading @isDisabled)))}}
-  <a
+{{#let
+  (arg-or-default @baseClassName "euiButton")
+  (if
+    @element
+    (element @element)
+    (if
+      (and @href (not (or @isLoading @isDisabled)))
+      (element "a")
+      (element "button")
+    )
+  )
+  as |baseClassName Element|
+}}
+  <Element
     class={{class-names
-      (if @fill "euiButton--fill")
-      (if @fullWidth "euiButton--fullWidth")
-      (if (or @isLoading @isDisabled @disabled) "euiButton-isDisabled")
-      componentName="EuiButton"
+      (if @fill (concat baseClassName "--fill"))
+      (if @fullWidth (concat baseClassName "--fullWidth"))
+      (if
+        (or @isLoading @isDisabled @disabled)
+        (concat baseClassName "-isDisabled")
+      )
+      componentName=(classify baseClassName)
       color=(arg-or-default @color "primary")
       size=@size
     }}
@@ -18,6 +33,7 @@
       class="euiButton__content {{@contentClasses}}"
       @isLoading={{@isLoading}}
       @iconType={{@iconType}}
+      @iconSize={{@iconSize}}
       @iconSide={{@iconSide}}
       @iconClasses={{@iconClasses}}
       @useSvg={{@useSvg}}
@@ -26,33 +42,5 @@
     >
       {{yield}}
     </EuiButtonContent>
-  </a>
-{{else}}
-  <button
-    class={{class-names
-      (if @fill "euiButton--fill")
-      (if @fullWidth "euiButton--fullWidth")
-      (if (or @isLoading @isDisabled @disabled) "euiButton-isDisabled")
-      componentName="EuiButton"
-      color=(arg-or-default @color "primary")
-      size=@size
-    }}
-    disabled={{or @isLoading @isDisabled @disabled}}
-    type={{if @type @type "button"}}
-    aria-pressed={{if @isSelected "true" null}}
-    ...attributes
-  >
-    <EuiButtonContent
-      class="euiButton__content {{@contentClasses}}"
-      @isLoading={{@isLoading}}
-      @iconType={{@iconType}}
-      @iconSide={{@iconSide}}
-      @iconClasses={{@iconClasses}}
-      @useSvg={{@useSvg}}
-      @useComponent={{@useComponent}}
-      @textClasses={{class-names "euiButton__text" @textClasses}}
-    >
-      {{yield}}
-    </EuiButtonContent>
-  </button>
-{{/if}}
+  </Element>
+{{/let}}

package/addon/components/eui-button-group/index.hbs

@@ -0,0 +1,66 @@
+{{#let
+  (arg-or-default @buttonSize "s")
+  (arg-or-default @color "text")
+  (arg-or-default @isFullWidth false)
+  (arg-or-default @isDisabled false)
+  (arg-or-default @type "single")
+  as |buttonSize color isFullWidth isDisabled type|
+}}
+  {{#let
+    (if (and (eq buttonSize "compressed") (eq color "ghost")) "text" color)
+    (eq type "single")
+    as |resolvedColor typeIsSingle|
+  }}
+
+    <fieldset
+      class={{class-names
+        "euiButtonGroup"
+        (if isFullWidth "euiButtonGroup--fullWidth")
+        (if isDisabled "euiButtonGroup--fullWidth")
+        @className
+        componentName="EuiButtonGroup"
+        size=(arg-or-default buttonSize "s")
+        color=resolvedColor
+      }}
+      disabled={{isDisabled}}
+      ...attributes
+    >
+      <legend {{screen-reader-only}}>{{@legend}}</legend>
+      <div class="euiButtonGroup__buttons">
+        {{#each @options as |option|}}
+          <EuiButtonGroupButton
+            @name={{if @name @name (unique-id)}}
+            @isDisabled={{if
+              (not-eq option.isDisabled undefined)
+              option.isDisabled
+              isDisabled
+            }}
+            @element={{if typeIsSingle "label" "button"}}
+            @isSelected={{if
+              typeIsSingle
+              (eq option.id @idSelected)
+              (get @idToSelectedMap option.id)
+            }}
+            @color={{resolvedColor}}
+            @size={{buttonSize}}
+            @isIconOnly={{@isIconOnly}}
+            @onChange={{@onChange}}
+            @iconType={{option.iconType}}
+            @value={{option.value}}
+            @label={{option.label}}
+            @id={{option.id}}
+            @isLoading={{option.isLoading}}
+            @iconSide={{option.iconSide}}
+            @iconSize={{option.iconSize}}
+            @textClasses={{option.textClasses}}
+            @contentClasses={{option.contentClasses}}
+            @iconClasses={{option.iconClasses}}
+            @type={{option.type}}
+            class={{option.className}}
+            aria-label={{option.aria-label}}
+          />
+        {{/each}}
+      </div>
+    </fieldset>
+  {{/let}}
+{{/let}}

package/addon/components/eui-button-group-button/index.hbs

@@ -0,0 +1,57 @@
+{{#let
+  (if @isDisabled "button" @element)
+  (unique-id)
+  (class-names
+    (if @isSelected "euiButtonGroupButton-isSelected")
+    (if @isIconOnly "euiButtonGroupButton-isIconOnly")
+  )
+  as |element newId classes|
+}}
+  {{#let (not-eq @element "label") as |isNotLabel|}}
+    <EuiInnerText as |setInnerTextRef innerText|>
+      <EuiButton
+        @baseClassName="euiButtonGroupButton"
+        class={{classes}}
+        @element={{element}}
+        @fill={{and (not-eq @size "compressed") @isSelected}}
+        @isDisabled={{@isDisabled}}
+        @size={{if (eq @size "compressed") "s" @size}}
+        @color={{@color}}
+        @contentClasses={{@contentClasses}}
+        @iconSide={{@iconSide}}
+        @iconType={{@iconType}}
+        @iconSize={{@iconSize}}
+        @iconClasses={{@iconClasses}}
+        @isLoading={{@isLoading}}
+        @textClasses={{class-names
+          @textClasses
+          (if
+            @isIconOnly "euiScreenReaderOnly" "euiButtonGroupButton__textShift"
+          )
+        }}
+        @isSelected={{if isNotLabel @isSelected}}
+        type={{if isNotLabel @type}}
+        htmlFor={{if (eq element "label") newId}}
+        id={{if isNotLabel newId}}
+        title={{innerText}}
+        {{on "click" (if isNotLabel (fn @onChange @id) (noop))}}
+        {{did-insert setInnerTextRef}}
+        ...attributes
+      >
+        {{#if (eq element "label")}}
+          <input
+            id={{newId}}
+            class="euiScreenReaderOnly"
+            name={{@name}}
+            checked={{@isSelected}}
+            disabled={{@isDisabled}}
+            value={{@value}}
+            type="radio"
+            {{on "change" (fn @onChange @id @value)}}
+          />
+        {{/if}}
+        {{@label}}
+      </EuiButton>
+    </EuiInnerText>
+  {{/let}}
+{{/let}}

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

@@ -1,8 +1,7 @@
 import EmberPowerSelectOptions from 'ember-power-select/components/power-select/options';
 import { emberPowerSelectIsGroup } from 'ember-power-select/helpers/ember-power-select-is-group';
-import config from 'ember-get-config';
+import euiConfig from '@ember-eui/core/utils/eui-config';
 
-const rowHeight = config['@ember-eui/core']?.euiComboBoxOptionsHeight || 29;
 export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions {
   _optionsCache = [];
 
@@ -30,7 +29,11 @@ export default class EuiComboBoxOptionsComponent extends EmberPowerSelectOptions
     return option;
   }
 
+  get configRowHeight() {
+    return euiConfig?.['@ember-eui/core']?.euiComboBoxOptionsHeight || 29;
+  }
+
   get rowHeight() {
-    return this.args.rowHeight ?? rowHeight;
+    return this.args.rowHeight ?? this.configRowHeight;
   }
 }

package/addon/components/eui-field-number/index.hbs

@@ -46,9 +46,11 @@
             id={{inputId}}
             class={{classes}}
             value={{@value}}
+            min={{@min}}
+            max={{@max}}
+            disabled={{@disabled}}
             step={{@step}}
             type="number"
-            disabled={{@disabled}}
             ...attributes
             {{validatable-control @isInvalid}}
           />

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

@@ -8,7 +8,8 @@ import {
 } from '../../utils/css-mappings/eui-icon';
 import { guidFor } from '@ember/object/internals';
 import { htmlSafe } from '@ember/template';
-import { getOwner } from '@ember/application';
+//@ts-ignore
+import euiConfig from '@ember-eui/core/utils/eui-config';
 
 export const TYPES = keysOf(typeToPathMap);
 
@@ -88,11 +89,9 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   get useSvg(): boolean {
-    //@ts-ignore
-    const config = getOwner(this).resolveRegistration('config:environment');
     return (
       this.args.useSvg ??
-      config?.['@ember-eui/core']?.['eui-icon']?.useSvg ??
+      euiConfig?.['@ember-eui/core']?.['eui-icon']?.useSvg ??
       false
     );
   }

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.hbs

@@ -106,7 +106,7 @@
               aria-describedby={{concat this.timeSelectionId " " legendId}}
               aria-label={{valueLabel}}
               @value={{this.timeValue}}
-              @onChange={{this.onTimeValueChange}}
+              {{on "input" (pick "target.value" (set this "timeValue"))}}
             />
           </Token>
         </EuiI18n>

package/addon/helpers/arg-or-default.ts

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import { assert } from '@ember/debug';
 //@ts-ignore
-import config from 'ember-get-config';
+import euiConfigs from '@ember-eui/core/utils/eui-config';
 import { get } from '@ember/object';
 
 /**
@@ -18,7 +18,7 @@ export function argOrDefault(
   assert('`defaultValue` must be provided', defaultValue !== undefined);
   let configValue;
   if (configKey) {
-    configValue = get(config, configKey);
+    configValue = get(euiConfigs, configKey);
   }
   return value !== undefined ? value : configValue || defaultValue;
 }

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

@@ -45,6 +45,8 @@ export function inlineStyles({
 
   if (imageUrl) {
     avatarStyle.backgroundImage = `url(${imageUrl})`;
+  } else {
+    avatarStyle.backgroundImage = 'none';
   }
 
   if (!isNamedColor) {

package/addon/utils/css-mappings/eui-button-group-button.ts

@@ -0,0 +1,27 @@
+export const baseClass = 'euiButtonGroupButton';
+import { colors } from './eui-button';
+
+const sizeMapping = {
+  s: `${baseClass}--small`,
+  m: ''
+};
+
+const colorMapping = {
+  primary: `${baseClass}${colors.primary}`,
+  accent: `${baseClass}${colors.accent}`,
+  success: `${baseClass}${colors.success}`,
+  warning: `${baseClass}${colors.warning}`,
+  danger: `${baseClass}${colors.danger}`,
+  ghost: `${baseClass}${colors.ghost}`,
+  text: `${baseClass}${colors.text}`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    color: colorMapping,
+    size: sizeMapping
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-button-group.ts

@@ -0,0 +1,28 @@
+export const baseClass = 'euiButtonGroup';
+import { colors } from './eui-button';
+
+const sizeMapping = {
+  s: `${baseClass}--small`,
+  m: `${baseClass}--medium`,
+  compressed: `${baseClass}--compressed`
+};
+
+const colorMapping = {
+  primary: `${baseClass}${colors.primary}`,
+  accent: `${baseClass}${colors.accent}`,
+  success: `${baseClass}${colors.success}`,
+  warning: `${baseClass}${colors.warning}`,
+  danger: `${baseClass}${colors.danger}`,
+  ghost: `${baseClass}${colors.ghost}`,
+  text: `${baseClass}${colors.text}`
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    color: colorMapping,
+    size: sizeMapping
+  }
+};
+
+export default mapping;

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

@@ -1,17 +1,28 @@
 export const baseClass = 'euiButton';
 
 const sizeMapping = {
-  s: `${baseClass}--small`
+  s: `${baseClass}--small`,
+  m: ''
+};
+
+export const colors = {
+  primary: `--primary`,
+  accent: `--accent`,
+  success: `--success`,
+  warning: `--warning`,
+  danger: `--danger`,
+  ghost: `--ghost`,
+  text: `--text`
 };
 
 const colorMapping = {
-  primary: `${baseClass}--primary`,
-  accent: `${baseClass}--accent`,
-  success: `${baseClass}--success`,
-  warning: `${baseClass}--warning`,
-  danger: `${baseClass}--danger`,
-  ghost: `${baseClass}--ghost`,
-  text: `${baseClass}--text`
+  primary: `${baseClass}${colors.primary}`,
+  accent: `${baseClass}${colors.accent}`,
+  success: `${baseClass}${colors.success}`,
+  warning: `${baseClass}${colors.warning}`,
+  danger: `${baseClass}${colors.danger}`,
+  ghost: `${baseClass}${colors.ghost}`,
+  text: `${baseClass}${colors.text}`
 };
 
 const mapping: ComponentMapping = {

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

@@ -7,6 +7,8 @@ import EuiBottomBar from './eui-bottom-bar';
 import EuiButton from './eui-button';
 import EuiButtonEmpty from './eui-button-empty';
 import EuiButtonIcon from './eui-button-icon';
+import EuiButtonGroup from './eui-button-group';
+import EuiButtonGroupButton from './eui-button-group-button';
 import EuiCallOut from './eui-call-out';
 import EuiCard from './eui-card';
 import EuiCardSelect from './eui-card-select';
@@ -77,6 +79,8 @@ const mapping: Mapping = {
   EuiButton,
   EuiButtonEmpty,
   EuiButtonIcon,
+  EuiButtonGroup,
+  EuiButtonGroupButton,
   EuiCallOut,
   EuiCard,
   EuiCardSelect,
@@ -135,7 +139,7 @@ const mapping: Mapping = {
   EuiTextColor,
   EuiTitle,
   EuiToast,
-  EuiToolTip,
+  EuiToolTip
 };
 
 export default mapping;

package/addon/utils/eui-config.ts

@@ -0,0 +1,12 @@
+export default {
+  '@ember-eui/core': {
+    euiButtonIcon: {
+      size: 'xs'
+    },
+    '@ember-eui/core': {
+      'eui-icon': {
+        useSvg: false
+      }
+    }
+  }
+};

package/addon/version.ts

@@ -1,4 +1,3 @@
-// import config from 'ember-get-config';
 // import Ember from 'ember';
 
 export function registerLibrary() {

package/app/components/eui-button-group/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-button-group';

package/app/components/eui-button-group-button/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-button-group-button';

package/app/utils/eui-config.js

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

package/docs/navigation/button/demo/d08-split-buttons.md

@@ -4,40 +4,19 @@ order: 8
 
 # Split buttons
 
+<EuiText>
+<p>EUI split buttons specifically. Instead, we recommend using separate buttons for the main and overflow actions. You can achieve this by simply using the <EuiCode>display</EuiCode> and <EuiCode>size</EuiCode> args <strong>EuiButtonIcon</strong> to match that of the primary action button.</p>
+</EuiText>
 
 ```hbs template
-<TodoText/>
-<!-- <EuiFlexGroup @responsive={{false}} @gutterSize="xs" @alignItems="center">
+<EuiFlexGroup @responsive={{false}} @gutterSize='xs' @alignItems='center'>
   <EuiFlexItem @grow={{false}}>
-    <EuiButton @size="s" @iconType="calendar">
+    <EuiButton @size='s' @iconType='calendar'>
       Last 15 min
     </EuiButton>
   </EuiFlexItem>
   <EuiFlexItem @grow={{false}}>
-
-    <EuiPopover
-      @ownFocus={{true}}
-      @isOpen={{this.popover}}
-      @anchorPosition='downCenter'
-      @closePopover={{set this 'popover' false}}
-    >
-      <:button>
-        <EuiButton
-          @iconType='arrowDown'
-          @iconSide='right'
-          {{on 'click' (set this 'popover' true)}}
-        >
-          Show Popover
-        </EuiButton>
-      </:button>
-      <:content>
-        <EuiText @size="m" style="width: 300px;">
-          <p>
-            Popover content that’s wider than the default width
-          </p>
-        </EuiText>
-      </:content>
-    </EuiPopover>
+    <EuiButtonIcon @iconType='boxesVertical' @display='base' @size='s' />
   </EuiFlexItem>
-</EuiFlexGroup> -->
-```
+</EuiFlexGroup>
+```

package/docs/navigation/button/demo/d09-toggle-buttons.md

@@ -4,7 +4,49 @@ order: 9
 
 # Toggle buttons
 
+<EuiText>
+<p>You can create a toggle button with any button type like the standard <strong>EuiButton</strong>, <strong>EuiButtonEmpty</strong>, or <strong>EuiButtonIcon</strong>. Use state management to handle the visual differences for on and off. Though there are two <strong>exclusive</strong> situations to consider.</p>
+<ol>
+	<li>If your button changes its readable <strong>text</strong>, via children or <EuiCode>aria-label</EuiCode>, then there is no additional accessibility concern.</li>
+	<li>If your button only changes the <strong>visual</strong> appearance, you must add <EuiCode>aria-pressed</EuiCode> passing a boolean for the on and off states. All EUI button types provide a helper prop for this called <EuiCode>isSelected</EuiCode>.</li>
+</ol>
+
+</EuiText>
 
 ```hbs template
-<TodoText/>
-```
+{{#let
+  (use-state false)
+  (use-state false)
+  (use-state true)
+  (use-state false)
+  as |toggle0 toggle1 toggle2 toggle3|
+}}
+  <EuiButton {{on 'click' (fn toggle0.setState (not toggle0.value))}}>
+    {{if toggle0.value 'Hey there good lookin' 'Toggle me'}}
+  </EuiButton>
+  <EuiButtonIcon
+    @iconType={{if toggle1.value 'play' 'pause'}}
+    title={{if toggle1.value 'Play' 'Pause'}}
+    aria-label={{if toggle1.value 'Play' 'Pause'}}
+    {{on 'click' (fn toggle1.setState (not toggle1.value))}}
+  />
+  <EuiButton
+    @isSelected={{toggle2.value}}
+    @fill={{toggle2.value}}
+    @iconType={{if toggle2.value 'starFilledSpace' 'starPlusEmpty'}}
+    {{on 'click' (fn toggle2.setState (not toggle2.value))}}
+  >
+    Toggle me
+  </EuiButton>
+  <EuiButtonIcon
+    @display={{if toggle3.value 'base' 'empty'}}
+    @size='m'
+    aria-label='Autosave'
+    title='Autosave'
+    @iconType='save'
+    aria-pressed={{toggle3.value}}
+    @color={{toggle3.value 'primary' 'text'}}
+    {{on 'click' (fn toggle3.setState (not toggle3.value))}}
+  />
+{{/let}}
+```

package/docs/navigation/button/demo/d10-button-groups.md

@@ -4,7 +4,110 @@ order: 10
 
 # Button groups
 
-
 ```hbs template
-<TodoText/>
-```
+<EuiButtonGroup
+  @legend='This is a basic group'
+  @options={{this.toggleButtons}}
+  @idSelected={{this.toggleIdSelected}}
+  @onChange={{set this 'toggleIdSelected'}}
+/>
+<EuiSpacer @size='m' />
+<EuiTitle @size='xxs' @tagName='h3'>
+  Primary &amp; multi select
+</EuiTitle>
+<EuiSpacer @size='s' />
+<EuiButtonGroup
+  @legend='This is a primary group'
+  @options={{this.toggleButtonsMulti}}
+  @idToSelectedMap={{this.toggleIdToSelectedMap}}
+  @onChange={{this.onChangeMulti}}
+  @color='primary'
+  @type='multi'
+/>
+<EuiSpacer @size='m' />
+<EuiTitle @size='xxs' @tagName='h3'>
+  Disabled &amp; full width
+</EuiTitle>
+<EuiSpacer @size='s' />
+<EuiButtonGroup
+  @legend='This is a disabled group'
+  @options={{this.toggleButtonsDisabled}}
+  @idSelected={{this.toggleIdDisabled}}
+  @onChange={{set this 'toggleIdDisabled'}}
+  @buttonSize='m'
+  @isDisabled={{true}}
+  @isFullWidth={{true}}
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
+
+const basicButtonGroupPrefix = guidFor({});
+const multiSelectButtonGroupPrefix = guidFor({});
+const disabledButtonGroupPrefix = guidFor({});
+export default class extends Component {
+  @tracked toggleIdSelected = `${basicButtonGroupPrefix}__1`;
+  @tracked toggleIdDisabled = `${disabledButtonGroupPrefix}__1`;
+  @tracked toggleIdToSelectedMap = {
+    [`${multiSelectButtonGroupPrefix}__1`]: true
+  };
+
+  toggleButtons = [
+    {
+      id: `${basicButtonGroupPrefix}__0`,
+      label: 'Option one'
+    },
+    {
+      id: `${basicButtonGroupPrefix}__1`,
+      label: 'Option two is selected by default'
+    },
+    {
+      id: `${basicButtonGroupPrefix}__2`,
+      label: 'Option three'
+    }
+  ];
+
+  toggleButtonsDisabled = [
+    {
+      id: `${disabledButtonGroupPrefix}__0`,
+      label: 'Option one'
+    },
+    {
+      id: `${disabledButtonGroupPrefix}__1`,
+      label: 'Option two is selected by default'
+    },
+    {
+      id: `${disabledButtonGroupPrefix}__2`,
+      label: 'Option three'
+    }
+  ];
+
+  toggleButtonsMulti = [
+    {
+      id: `${multiSelectButtonGroupPrefix}__0`,
+      label: 'Option one'
+    },
+    {
+      id: `${multiSelectButtonGroupPrefix}__1`,
+      label: 'Option two is selected by default'
+    },
+    {
+      id: `${multiSelectButtonGroupPrefix}__2`,
+      label: 'Option three'
+    }
+  ];
+
+  onChangeMulti = (optionId) => {
+    const newToggleIdToSelectedMap = {
+      ...this.toggleIdToSelectedMap,
+      ...{
+        [optionId]: !this.toggleIdToSelectedMap[optionId]
+      }
+    };
+    this.toggleIdToSelectedMap = newToggleIdToSelectedMap;
+  };
+}
+```

package/docs/navigation/button/demo/d11-icon-only-button-groups.md

@@ -0,0 +1,92 @@
+---
+order: 11
+---
+
+# Icon only button groups
+
+```hbs template
+<EuiButtonGroup
+  @legend='Text align'
+  @options={{this.toggleButtonsIcons}}
+  @idSelected={{this.toggleIconIdSelected}}
+  @onChange={{set this 'toggleIconIdSelected'}}
+  @isIconOnly={{true}}
+/>
+<EuiButtonGroup
+  @legend='Text style'
+  @options={{this.toggleButtonsIconsMulti}}
+  @idToSelectedMap={{this.toggleIdToSelectedMap}}
+  @onChange={{this.onChangeMulti}}
+  @type='multi'
+  @isIconOnly={{true}}
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
+
+const idPrefix3 = guidFor({});
+export default class extends Component {
+  @tracked toggleIconIdSelected = `${idPrefix3}1`;
+  @tracked toggleIdToSelectedMap = {};
+
+  toggleButtonsIcons = [
+    {
+      id: `${idPrefix3}0`,
+      label: 'Align left',
+      iconType: 'editorAlignLeft'
+    },
+    {
+      id: `${idPrefix3}1`,
+      label: 'Align center',
+      iconType: 'editorAlignCenter'
+    },
+    {
+      id: `${idPrefix3}2`,
+      label: 'Align right',
+      iconType: 'editorAlignRight',
+      isDisabled: true
+    }
+  ];
+
+  toggleButtonsIconsMulti = [
+    {
+      id: `${idPrefix3}3`,
+      label: 'Bold',
+      name: 'bold',
+      iconType: 'editorBold'
+    },
+    {
+      id: `${idPrefix3}4`,
+      label: 'Italic',
+      name: 'italic',
+      iconType: 'editorItalic',
+      isDisabled: true
+    },
+    {
+      id: `${idPrefix3}5`,
+      label: 'Underline',
+      name: 'underline',
+      iconType: 'editorUnderline'
+    },
+    {
+      id: `${idPrefix3}6`,
+      label: 'Strikethrough',
+      name: 'strikethrough',
+      iconType: 'editorStrike'
+    }
+  ];
+
+  onChangeMulti = (optionId) => {
+    const newToggleIdToSelectedMap = {
+      ...this.toggleIdToSelectedMap,
+      ...{
+        [optionId]: !this.toggleIdToSelectedMap[optionId]
+      }
+    };
+    this.toggleIdToSelectedMap = newToggleIdToSelectedMap;
+  };
+}
+```

package/docs/navigation/button/demo/d12-button-groups-in-forms.md

@@ -0,0 +1,101 @@
+---
+order: 12
+---
+
+# Button groups in forms
+
+<EuiText>
+<p>When using button groups within compressed forms, match the form elements by adding <EuiCode>buttonSize="compressed"</EuiCode>. Compressed groups should always be <EuiCode>fullWidth</EuiCode> so they line up nicely in their small container <strong>unless</strong> they are icon only.
+</p>
+
+</EuiText>
+
+```hbs template
+<EuiPanel @hasBorder={{true}} style='max-width: 300px'>
+  <EuiButtonGroup
+    @name='coarsness'
+    @legend='This is a basic group'
+    @options={{this.toggleButtonsCompressed}}
+    @idSelected={{this.toggleCompressedIdSelected}}
+    @onChange={{set this 'toggleCompressedIdSelected'}}
+    @buttonSize='compressed'
+    @isFullWidth={{true}}
+  />
+  <EuiSpacer />
+  <EuiButtonGroup
+    @legend='Text style'
+    class='eui-displayInlineBlock'
+    @options={{this.toggleButtonsIconsMulti}}
+    @idToSelectedMap={{this.toggleIconIdToSelectedMapIcon}}
+    @onChange={{this.onChangeMulti}}
+    @type='multi'
+    @buttonSize='compressed'
+    @isIconOnly={{true}}
+  />
+</EuiPanel>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
+
+const idPrefix3 = guidFor({});
+export default class extends Component {
+  @tracked toggleCompressedIdSelected = `${idPrefix3}__1`;
+  @tracked toggleIconIdToSelectedMapIcon = {};
+
+  toggleButtonsCompressed = [
+    {
+      id: `${idPrefix3}__0`,
+      label: 'fine'
+    },
+    {
+      id: `${idPrefix3}__1`,
+      label: 'rough'
+    },
+    {
+      id: `${idPrefix3}__2`,
+      label: 'coarse'
+    }
+  ];
+
+  toggleButtonsIconsMulti = [
+    {
+      id: `${idPrefix3}__multi__0`,
+      label: 'Bold',
+      name: 'bold',
+      iconType: 'editorBold'
+    },
+    {
+      id: `${idPrefix3}__multi__1`,
+      label: 'Italic',
+      name: 'italic',
+      iconType: 'editorItalic',
+      isDisabled: true
+    },
+    {
+      id: `${idPrefix3}__multi__2`,
+      label: 'Underline',
+      name: 'underline',
+      iconType: 'editorUnderline'
+    },
+    {
+      id: `${idPrefix3}__multi__3`,
+      label: 'Strikethrough',
+      name: 'strikethrough',
+      iconType: 'editorStrike'
+    }
+  ];
+
+  onChangeMulti = (optionId) => {
+    const newtoggleIconIdToSelectedMapIcon = {
+      ...this.toggleIconIdToSelectedMapIcon,
+      ...{
+        [optionId]: !this.toggleIconIdToSelectedMapIcon[optionId]
+      }
+    };
+    this.toggleIconIdToSelectedMapIcon = newtoggleIconIdToSelectedMapIcon;
+  };
+}
+```

package/docs/navigation/button/demo/{d11-ghost.md → d12-ghost.md}

@@ -1,5 +1,5 @@
 ---
-order: 11
+order: 13
 ---
 
 # Ghost

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.11.2",
+  "version": "5.12.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -143,7 +143,6 @@
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-focus-trap": "^1.0.1",
-    "ember-get-config": "~1.0.2",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
@@ -186,5 +185,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "1cd24924c53796caa668748d526d25ae7565a9b8"
+  "gitHead": "71a46f9fbaf5152cb42b71e0338e718408478dcc"
 }