From 42ee4ec05e958f69aaa79312e4f19944d77036b4 Mon Sep 17 00:00:00 2001
From: Diego <diegozubietap@gmail.com>
Date: Thu, 17 Mar 2022 10:41:30 -0600
Subject: [PATCH 1/4] refactor: eui-accordion

---
 packages/core/addon/components/common.ts      |  1 +
 .../addon/components/eui-accordion/index.hbs  | 53 ++++++++++---------
 .../addon/components/eui-accordion/index.ts   | 45 +++++++++++++---
 .../core/docs/layout/accordion-demo/demo1.md  | 49 ++++++++++++++---
 4 files changed, 109 insertions(+), 39 deletions(-)

diff --git a/packages/core/addon/components/common.ts b/packages/core/addon/components/common.ts
index 42095f45..8ca465ce 100644
--- a/packages/core/addon/components/common.ts
+++ b/packages/core/addon/components/common.ts
@@ -12,6 +12,7 @@ export type OneOf<T, K extends keyof T> = Omit<T, K> &
   { [k in K]: Pick<Required<T>, k> & { [k1 in Exclude<K, k>]?: never } }[K];
 
 export interface CommonArgs {
+  className?: string;
   'aria-label'?: string;
   'data-test-subj'?: string;
 }
diff --git a/packages/core/addon/components/eui-accordion/index.hbs b/packages/core/addon/components/eui-accordion/index.hbs
index e55c0fac..6cf65808 100644
--- a/packages/core/addon/components/eui-accordion/index.hbs
+++ b/packages/core/addon/components/eui-accordion/index.hbs
@@ -7,32 +7,30 @@
   ...attributes
 >
   <div class={{class-names "euiAccordion__triggerWrapper" @triggerClassName}}>
+    {{#if this.hasArrowDisplay}}
+      <button
+        type="button"
+        tabindex="-1"
+        class={{class-names
+          this.iconButtonClasses
+          "euiAccordion__icon"
+          (if this.isOpen "euiAccordion__iconButton-isOpen")
+        }}
+        {{on "click" this.onToggle}}
+      >
+        <EuiIcon @type="arrowRight" @size="m" />
+      </button>
+    {{/if}}
     <button
-      id={{this.buttonId}}
+      type="button"
+      id={{arg-or-default this.buttonProps.id (unique-id)}}
+      class={{class-names this.buttonClasses}}
       aria-controls={{@id}}
       aria-expanded={{this.isOpen}}
-      class={{this.buttonClasses}}
-      type="button"
+      aria-labelledby={{arg-or-default this.buttonProps.id (unique-id)}}
       {{on "click" this.onToggle}}
     >
-      {{#if this.hasArrowDisplay}}
-        <span
-          class={{concat
-            "euiAccordion__iconWrapper "
-            (if this.hasIconButton "euiAccordion__iconButton ")
-          }}
-        >
-          <EuiIcon
-            @iconClasses={{class-names
-              "euiAccordion__icon"
-              (if this.isOpen "euiAccordion__icon-isOpen")
-            }}
-            @type="arrowRight"
-            @size="m"
-          />
-        </span>
-      {{/if}}
-      <span class={{concat "euiIEFlexWrapFix " @buttonContentClassName}}>
+      <span class={{class-names this.buttonContentClasses}}>
         {{yield to="buttonContent"}}
       </span>
     </button>
@@ -53,7 +51,10 @@
         tabIndex={{-1}}
         class={{concat
           "euiAccordion__iconWrapper "
-          (if this.hasIconButton "euiAccordion__iconButton ")
+          "euiAccordion__icon "
+          this.iconButtonClasses
+          (if this.hasIconButton " euiAccordion__iconButton ")
+          (if this.isOpen "euiAccordion__iconButton-isOpen")
         }}
         type="button"
         {{on "click" this.onToggle}}
@@ -69,7 +70,11 @@
       </button>
     {{/if}}
   </div>
-  <div class="euiAccordion__childWrapper" style={{this.childContentStyle}} id={{@id}}>
+  <div
+    class="euiAccordion__childWrapper"
+    style={{this.childContentStyle}}
+    id={{@id}}
+  >
     <div
       class={{class-names
         (if this.isLoading " euiAccordion__children-isLoading")
@@ -93,4 +98,4 @@
       {{/if}}
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/packages/core/addon/components/eui-accordion/index.ts b/packages/core/addon/components/eui-accordion/index.ts
index d0d28ee7..baec1b83 100644
--- a/packages/core/addon/components/eui-accordion/index.ts
+++ b/packages/core/addon/components/eui-accordion/index.ts
@@ -1,19 +1,33 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { uniqueId } from '../../helpers/unique-id';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { paddingMapping } from '../../utils/css-mappings/eui-accordion';
 import { htmlSafe } from '@ember/template';
+import { CommonArgs } from '../common';
 
 type EuiAccordionPaddingSize = keyof typeof paddingMapping;
 
 type AccordionArgs = {
   id: string;
+
+  element?: 'div' | 'fieldset';
   /**
    * Class that will apply to the trigger for the accordion.
    */
   buttonClassName?: string;
+
+  buttonProps?: CommonArgs;
+
+  /**
+   * Applied to the main button receiving the `onToggle` event.
+   * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).
+   */
+  buttonElement?: 'div' | 'legend' | 'button';
+  /**
+   * Extra props to pass to the EuiButtonIcon containing the arrow.
+   */
+  arrowProps?: 'iconType' | 'onClick' | 'aria-labelledby';
   /**
    * Class that will apply to the trigger content for the accordion.
    */
@@ -54,6 +68,8 @@ type AccordionArgs = {
    * Choose whether the loading message replaces the content. Customize the message by passing a node
    */
   isLoadingMessage?: boolean | Component;
+
+  isOpen?: boolean;
 };
 
 export default class EuiAccordionAccordionComponent extends Component<AccordionArgs> {
@@ -66,8 +82,6 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
 
   @tracked _opened;
 
-  buttonId: string = uniqueId();
-
   constructor(owner: unknown, args: AccordionArgs) {
     super(owner, args);
 
@@ -83,11 +97,11 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
   }
 
   get hasIconButton(): boolean | undefined {
-    return this.args.extraAction && this.arrowDisplay === 'right';
+    return this.arrowDisplay === 'right';
   }
 
   get hasArrowDisplay(): boolean {
-    return this.arrowDisplay !== 'none';
+    return this.arrowDisplay !== 'none' && this.arrowDisplay !== 'right';
   }
 
   get buttonReverse(): boolean {
@@ -101,8 +115,25 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
   get buttonClasses(): string {
     return [
       'euiAccordion__button',
-      this.buttonReverse ? 'euiAccordion__buttonReverse' : '',
-      this.args.buttonClassName
+      this.args.buttonClassName,
+      this.args.buttonProps?.className
+    ].join(' ');
+  }
+
+  get buttonContentClasses(): string {
+    return [
+      'euiAccordion__buttonContent',
+      this.args.buttonContentClassName
+    ].join(' ');
+  }
+
+  get iconButtonClasses(): string {
+    return [
+      'euiAccordion__iconButton',
+      'euiButtonIcon',
+      'euiButtonIcon--text',
+      'euiButtonIcon--empty',
+      'euiButtonIcon--xSmall'
     ].join(' ');
   }
 
diff --git a/packages/core/docs/layout/accordion-demo/demo1.md b/packages/core/docs/layout/accordion-demo/demo1.md
index 85b5d068..ae1749a0 100644
--- a/packages/core/docs/layout/accordion-demo/demo1.md
+++ b/packages/core/docs/layout/accordion-demo/demo1.md
@@ -8,12 +8,12 @@
   </:content>
 </EuiAccordion>
 <br />
-<h1>
+<EuiTitle @size="xs">
   Accordion with
   <b>
     forceState
   </b>
-</h1>
+</EuiTitle>
 The accordion is
 {{this.accordionState}}
 <br />
@@ -39,12 +39,12 @@ The accordion is
   </:content>
 </EuiAccordion>
 <br />
-<h1>
+<EuiTitle @size="xs">
   Accordion with
   <b>
     isLoading = true
   </b>
-</h1>
+</EuiTitle>
 <EuiAccordion @isLoading={{true}}>
   <:buttonContent>
     "You spin my head right round"
@@ -62,12 +62,12 @@ The accordion is
   </:content>
 </EuiAccordion>
 <br />
-<h1>
+<EuiTitle @size="xs">
   Accordion with
   <b>
-    arrowDisplay = left
+    arrowDisplay = right
   </b>
-</h1>
+</EuiTitle>
 <EuiAccordion @arrowDisplay="right">
   <:buttonContent>
     Clickable Title
@@ -76,8 +76,41 @@ The accordion is
     My content
   </:content>
 </EuiAccordion>
+<br />
+
+<EuiTitle @size="xs">
+  Accordion with
+  <b>
+    arrowDisplay = left
+  </b>
+</EuiTitle>
+<EuiAccordion @arrowDisplay="left">
+  <:buttonContent>
+    Clickable Title
+  </:buttonContent>
+  <:content>
+    My content
+  </:content>
+</EuiAccordion>
+<br />
+
+<EuiTitle @size="xs">
+  Accordion with
+  <b>
+    arrowDisplay = none
+  </b>
+</EuiTitle>
+<EuiAccordion @arrowDisplay="none">
+  <:buttonContent>
+    Clickable Title
+  </:buttonContent>
+  <:content>
+    My content
+  </:content>
+</EuiAccordion>
+<br />
 
-<h1>Nested accordions</h1>
+<EuiTitle @size="xs">Nested accordions</EuiTitle>
 <EuiAccordion>
   <:buttonContent>
     Parent accordion

From 1bbb552b46a0254e6a89867abd377680dfcb31f4 Mon Sep 17 00:00:00 2001
From: betocantu93 <betocantu93@gmail.com>
Date: Mon, 28 Mar 2022 20:07:48 -0600
Subject: [PATCH 2/4] fixes and updates

---
 .../addon/components/eui-accordion/index.hbs  | 190 +++++++++---------
 .../addon/components/eui-accordion/index.ts   |  56 +++---
 .../core/docs/layout/accordion-demo/demo1.md  |  46 +++--
 3 files changed, 157 insertions(+), 135 deletions(-)

diff --git a/packages/core/addon/components/eui-accordion/index.hbs b/packages/core/addon/components/eui-accordion/index.hbs
index 6cf65808..7166a4e4 100644
--- a/packages/core/addon/components/eui-accordion/index.hbs
+++ b/packages/core/addon/components/eui-accordion/index.hbs
@@ -1,101 +1,109 @@
-<div
-  class={{class-names
-    (if this.isOpen "euiAccordion-isOpen")
-    componentName="EuiAccordion"
-    paddingSize=this.paddingSize
-  }}
-  ...attributes
->
-  <div class={{class-names "euiAccordion__triggerWrapper" @triggerClassName}}>
-    {{#if this.hasArrowDisplay}}
-      <button
+{{#let
+  (element (arg-or-default @element "div"))
+  (element this.buttonElement)
+  as |Element ButtonElement|
+}}
+  <Element
+    class={{class-names
+      (if this.isOpen "euiAccordion-isOpen")
+      componentName="EuiAccordion"
+      paddingSize=this.paddingSize
+    }}
+    ...attributes
+  >
+    <div class={{class-names "euiAccordion__triggerWrapper" @triggerClassName}}>
+      {{#if (eq this._arrowDisplay "left")}}
+        <EuiButtonIcon
+          @color="text"
+          class={{class-names
+            "euiAccordion__iconButton"
+            (if this.isOpen "euiAccordion__iconButton-isOpen")
+            (if
+              (eq this._arrowDisplay "right") "euiAccordion__iconButton--right"
+            )
+            (if @arrowProps.className @arrowProps.className)
+          }}
+          @iconType="arrowRight"
+          {{on "click" this.onToggle}}
+          aria-controls={{@id}}
+          aria-expanded={{this.isOpen}}
+          aria-labelledby={{this.buttonId}}
+          tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
+        />
+      {{/if}}
+      <ButtonElement
         type="button"
-        tabindex="-1"
-        class={{class-names
-          this.iconButtonClasses
-          "euiAccordion__icon"
-          (if this.isOpen "euiAccordion__iconButton-isOpen")
-        }}
-        {{on "click" this.onToggle}}
-      >
-        <EuiIcon @type="arrowRight" @size="m" />
-      </button>
-    {{/if}}
-    <button
-      type="button"
-      id={{arg-or-default this.buttonProps.id (unique-id)}}
-      class={{class-names this.buttonClasses}}
-      aria-controls={{@id}}
-      aria-expanded={{this.isOpen}}
-      aria-labelledby={{arg-or-default this.buttonProps.id (unique-id)}}
-      {{on "click" this.onToggle}}
-    >
-      <span class={{class-names this.buttonContentClasses}}>
-        {{yield to="buttonContent"}}
-      </span>
-    </button>
-    {{#if (and @extraAction (not this.isLoading))}}
-      <div class="euiAccordion__optionalAction">
-        {{@extraAction}}
-      </div>
-    {{else if this.isLoading}}
-      <div class="euiAccordion__optionalAction">
-        <EuiLoadingSpinner />
-      </div>
-    {{/if}}
-    {{#if this.hasIconButton}}
-      <button
+        id={{arg-or-default this.buttonProps.id (unique-id)}}
+        class={{this.buttonClasses}}
         aria-controls={{@id}}
         aria-expanded={{this.isOpen}}
-        aria-labelledby={{this.buttonId}}
-        tabIndex={{-1}}
-        class={{concat
-          "euiAccordion__iconWrapper "
-          "euiAccordion__icon "
-          this.iconButtonClasses
-          (if this.hasIconButton " euiAccordion__iconButton ")
-          (if this.isOpen "euiAccordion__iconButton-isOpen")
-        }}
-        type="button"
+        aria-labelledby={{arg-or-default this.buttonProps.id (unique-id)}}
         {{on "click" this.onToggle}}
       >
-        <EuiIcon
-          @iconClasses={{class-names
-            "euiAccordion__icon"
-            (if this.isOpen "euiAccordion__icon-isOpen")
+        <span class={{this.buttonContentClasses}}>
+          {{yield to="buttonContent"}}
+        </span>
+      </ButtonElement>
+      {{#if (and @extraAction (not this.isLoading))}}
+        <div class="euiAccordion__optionalAction">
+          {{yield to="extraAction"}}
+        </div>
+      {{else if this.isLoading}}
+        <div class="euiAccordion__optionalAction">
+          <EuiLoadingSpinner />
+        </div>
+      {{/if}}
+      {{#if (eq this._arrowDisplay "right")}}
+        <EuiButtonIcon
+          @color="text"
+          class={{class-names
+            "euiAccordion__iconButton"
+            (if this.isOpen "euiAccordion__iconButton-isOpen")
+            (if
+              (eq this._arrowDisplay "right") "euiAccordion__iconButton--right"
+            )
+            (if @arrowProps.className @arrowProps.className)
           }}
-          @type="arrowRight"
-          @size="m"
+          @iconType="arrowRight"
+          {{on "click" this.onToggle}}
+          aria-controls={{@id}}
+          aria-expanded={{this.isOpen}}
+          aria-labelledby={{this.buttonId}}
+          tabindex={{if this.buttonElementIsFocusable "-1" "0"}}
         />
-      </button>
-    {{/if}}
-  </div>
-  <div
-    class="euiAccordion__childWrapper"
-    style={{this.childContentStyle}}
-    id={{@id}}
-  >
+      {{/if}}
+    </div>
     <div
-      class={{class-names
-        (if this.isLoading " euiAccordion__children-isLoading")
-        @childClassName
-        paddingSize=this.paddingSize
-        componentName="EuiAccordion"
-      }}
+      class="euiAccordion__childWrapper"
+      style={{this.childContentStyle}}
+      id={{@id}}
+      {{did-insert (set this "childWrapper")}}
+      tabindex="-1"
+      role="region"
+      aria-labelledby={{this.buttonId}}
     >
-      {{#if (and this.isLoading this.isLoadingMessage)}}
-        <EuiLoadingSpinner class="euiAccordion__spinner" />
-        <span>
-          {{#if this.hasLoadingMessage}}
-            {{this.isLoadingMessage}}
-          {{else}}
-            {{! <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> }}
-            Loading...
-          {{/if}}
-        </span>
-      {{else}}
-        {{yield to="content"}}
-      {{/if}}
+      <div
+        class={{class-names
+          (if this.isLoading "euiAccordion__children-isLoading")
+          @childClassName
+        }}
+        {{did-insert (set this "childContent")}}
+        {{resize-observer onResize=this.setChildContentHeight}}
+      >
+        {{#if (and this.isLoading this.isLoadingMessage)}}
+          <EuiLoadingSpinner class="euiAccordion__spinner" />
+          <span>
+            {{#if this.hasLoadingMessage}}
+              {{this.isLoadingMessage}}
+            {{else}}
+              {{! <EuiI18n @token="euiAccordion.isLoading" @default="Loading" /> }}
+              Loading...
+            {{/if}}
+          </span>
+        {{else}}
+          {{yield to="content"}}
+        {{/if}}
+      </div>
     </div>
-  </div>
-</div>
\ No newline at end of file
+  </Element>
+{{/let}}
\ No newline at end of file
diff --git a/packages/core/addon/components/eui-accordion/index.ts b/packages/core/addon/components/eui-accordion/index.ts
index baec1b83..d0b2f0ad 100644
--- a/packages/core/addon/components/eui-accordion/index.ts
+++ b/packages/core/addon/components/eui-accordion/index.ts
@@ -81,6 +81,8 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
   @argOrDefault('left') arrowDisplay!: AccordionArgs['arrowDisplay'];
 
   @tracked _opened;
+  @tracked childWrapper: HTMLDivElement | null = null;
+  @tracked childContent: HTMLDivElement | null = null;
 
   constructor(owner: unknown, args: AccordionArgs) {
     super(owner, args);
@@ -90,22 +92,24 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
       : this.args.initialIsOpen;
   }
 
-  get isOpen(): boolean {
-    return this.args.forceState
-      ? this.args.forceState === 'open'
-      : this._opened;
+  get buttonElement() {
+    return this.args.element === 'fieldset' ? 'legend' : 'button';
   }
 
-  get hasIconButton(): boolean | undefined {
-    return this.arrowDisplay === 'right';
+  get buttonElementIsFocusable() {
+    return this.buttonElement === 'button';
   }
 
-  get hasArrowDisplay(): boolean {
-    return this.arrowDisplay !== 'none' && this.arrowDisplay !== 'right';
+  get _arrowDisplay() {
+    return this.arrowDisplay === 'none' && !this.buttonElementIsFocusable
+      ? 'left'
+      : this.arrowDisplay;
   }
 
-  get buttonReverse(): boolean {
-    return !this.args.extraAction && this.arrowDisplay === 'right';
+  get isOpen(): boolean {
+    return this.args.forceState
+      ? this.args.forceState === 'open'
+      : this._opened;
   }
 
   get hasLoadingMessage(): boolean {
@@ -127,28 +131,32 @@ export default class EuiAccordionAccordionComponent extends Component<AccordionA
     ].join(' ');
   }
 
-  get iconButtonClasses(): string {
-    return [
-      'euiAccordion__iconButton',
-      'euiButtonIcon',
-      'euiButtonIcon--text',
-      'euiButtonIcon--empty',
-      'euiButtonIcon--xSmall'
-    ].join(' ');
-  }
-
   get childContentStyle(): string | ReturnType<typeof htmlSafe> {
-    return this.isOpen ? '' : htmlSafe(`height: 0px;`);
+    return this._opened ? '' : htmlSafe(`height: 0px;`);
   }
 
+  setChildContentHeight = () => {
+    const { forceState } = this.args;
+    requestAnimationFrame(() => {
+      const height =
+        this.childContent && (forceState ? forceState === 'open' : this._opened)
+          ? this.childContent.clientHeight
+          : 0;
+      this.childWrapper &&
+        this.childWrapper.setAttribute('style', `height: ${height}px`);
+    });
+  };
+
   @action
   onToggle(): void {
     if (this.args.forceState) {
-      this.args.onToggle &&
-        this.args.onToggle(this.args.forceState === 'open' ? false : true);
+      this.args.onToggle?.(this.args.forceState === 'open' ? false : true);
     } else {
       this._opened = !this._opened;
-      this.args.onToggle && this.args.onToggle(this._opened);
+      if (this._opened && this.childWrapper) {
+        this.childWrapper.focus();
+      }
+      this.args.onToggle?.(this._opened);
     }
   }
 }
diff --git a/packages/core/docs/layout/accordion-demo/demo1.md b/packages/core/docs/layout/accordion-demo/demo1.md
index ae1749a0..b8eeab05 100644
--- a/packages/core/docs/layout/accordion-demo/demo1.md
+++ b/packages/core/docs/layout/accordion-demo/demo1.md
@@ -8,7 +8,7 @@
   </:content>
 </EuiAccordion>
 <br />
-<EuiTitle @size="xs">
+<EuiTitle @size='xs'>
   Accordion with
   <b>
     forceState
@@ -17,18 +17,24 @@
 The accordion is
 {{this.accordionState}}
 <br />
-<button type="button" {{on "click" (fn (mut this.accordionState) "open")}}>
-  Open
-</button>
-<button type="button" {{on "click" (fn (mut this.accordionState) "closed")}}>
-  Close
-</button>
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' (fn (mut this.accordionState) 'open')}}>
+      Open
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' (fn (mut this.accordionState) 'closed')}}>
+      Close
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
 <EuiAccordion
   @forceState={{this.accordionState}}
   @onToggle={{if
-    (eq this.accordionState "open")
-    (fn (mut this.accordionState) "closed")
-    (fn (mut this.accordionState) "open")
+    (eq this.accordionState 'open')
+    (fn (mut this.accordionState) 'closed')
+    (fn (mut this.accordionState) 'open')
   }}
 >
   <:buttonContent>
@@ -39,7 +45,7 @@ The accordion is
   </:content>
 </EuiAccordion>
 <br />
-<EuiTitle @size="xs">
+<EuiTitle @size='xs'>
   Accordion with
   <b>
     isLoading = true
@@ -53,7 +59,7 @@ The accordion is
     My content
   </:content>
 </EuiAccordion>
-<EuiAccordion @isLoading={{true}} @isLoadingMessage="What what">
+<EuiAccordion @isLoading={{true}} @isLoadingMessage='What what'>
   <:buttonContent>
     You spin my head right round also in content
   </:buttonContent>
@@ -62,13 +68,13 @@ The accordion is
   </:content>
 </EuiAccordion>
 <br />
-<EuiTitle @size="xs">
+<EuiTitle @size='xs'>
   Accordion with
   <b>
     arrowDisplay = right
   </b>
 </EuiTitle>
-<EuiAccordion @arrowDisplay="right">
+<EuiAccordion @arrowDisplay='right'>
   <:buttonContent>
     Clickable Title
   </:buttonContent>
@@ -78,13 +84,13 @@ The accordion is
 </EuiAccordion>
 <br />
 
-<EuiTitle @size="xs">
+<EuiTitle @size='xs'>
   Accordion with
   <b>
     arrowDisplay = left
   </b>
 </EuiTitle>
-<EuiAccordion @arrowDisplay="left">
+<EuiAccordion @arrowDisplay='left'>
   <:buttonContent>
     Clickable Title
   </:buttonContent>
@@ -94,13 +100,13 @@ The accordion is
 </EuiAccordion>
 <br />
 
-<EuiTitle @size="xs">
+<EuiTitle @size='xs'>
   Accordion with
   <b>
     arrowDisplay = none
   </b>
 </EuiTitle>
-<EuiAccordion @arrowDisplay="none">
+<EuiAccordion @arrowDisplay='none'>
   <:buttonContent>
     Clickable Title
   </:buttonContent>
@@ -110,7 +116,7 @@ The accordion is
 </EuiAccordion>
 <br />
 
-<EuiTitle @size="xs">Nested accordions</EuiTitle>
+<EuiTitle @size='xs'>Nested accordions</EuiTitle>
 <EuiAccordion>
   <:buttonContent>
     Parent accordion
@@ -142,6 +148,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
 export default class AccordionDemo1Component extends Component {
-	@tracked accordionState = false;
+  @tracked accordionState = false;
 }
 ```

From 1223a560a489b042bd08592bc590524e4e19da39 Mon Sep 17 00:00:00 2001
From: betocantu93 <betocantu93@gmail.com>
Date: Mon, 28 Mar 2022 20:09:28 -0600
Subject: [PATCH 3/4] execute on did insert

---
 packages/core/addon/components/eui-accordion/index.hbs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/addon/components/eui-accordion/index.hbs b/packages/core/addon/components/eui-accordion/index.hbs
index 7166a4e4..257c0e25 100644
--- a/packages/core/addon/components/eui-accordion/index.hbs
+++ b/packages/core/addon/components/eui-accordion/index.hbs
@@ -87,7 +87,9 @@
           (if this.isLoading "euiAccordion__children-isLoading")
           @childClassName
         }}
-        {{did-insert (set this "childContent")}}
+        {{did-insert
+          (queue (set this "childContent") this.setChildContentHeight)
+        }}
         {{resize-observer onResize=this.setChildContentHeight}}
       >
         {{#if (and this.isLoading this.isLoadingMessage)}}

From 76dc49afbdca1eae37ca722121ca22aa5e2cb5ce Mon Sep 17 00:00:00 2001
From: Diego <diegozubietap@gmail.com>
Date: Tue, 29 Mar 2022 15:22:07 -0600
Subject: [PATCH 4/4] accordion docs

---
 .../addon/components/eui-accordion/index.hbs  |  12 +-
 .../core/docs/layout/accordion-demo/demo1.md  | 189 ++++--------------
 .../core/docs/layout/accordion-demo/demo10.md | 113 +++++++++++
 .../core/docs/layout/accordion-demo/demo2.md  |  31 +++
 .../core/docs/layout/accordion-demo/demo3.md  |  77 +++++++
 .../core/docs/layout/accordion-demo/demo4.md  |  27 +++
 .../core/docs/layout/accordion-demo/demo5.md  |  28 +++
 .../core/docs/layout/accordion-demo/demo6.md  |  67 +++++++
 .../core/docs/layout/accordion-demo/demo7.md  |  80 ++++++++
 .../core/docs/layout/accordion-demo/demo8.md  |  68 +++++++
 .../core/docs/layout/accordion-demo/demo9.md  |  63 ++++++
 11 files changed, 602 insertions(+), 153 deletions(-)
 create mode 100644 packages/core/docs/layout/accordion-demo/demo10.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo2.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo3.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo4.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo5.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo6.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo7.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo8.md
 create mode 100644 packages/core/docs/layout/accordion-demo/demo9.md

diff --git a/packages/core/addon/components/eui-accordion/index.hbs b/packages/core/addon/components/eui-accordion/index.hbs
index 257c0e25..eafaf415 100644
--- a/packages/core/addon/components/eui-accordion/index.hbs
+++ b/packages/core/addon/components/eui-accordion/index.hbs
@@ -7,7 +7,6 @@
     class={{class-names
       (if this.isOpen "euiAccordion-isOpen")
       componentName="EuiAccordion"
-      paddingSize=this.paddingSize
     }}
     ...attributes
   >
@@ -15,7 +14,7 @@
       {{#if (eq this._arrowDisplay "left")}}
         <EuiButtonIcon
           @color="text"
-          class={{class-names
+          @iconClasses={{class-names
             "euiAccordion__iconButton"
             (if this.isOpen "euiAccordion__iconButton-isOpen")
             (if
@@ -103,7 +102,14 @@
             {{/if}}
           </span>
         {{else}}
-          {{yield to="content"}}
+          <div
+            class={{class-names
+              componentName="EuiAccordion"
+              paddingSize=this.paddingSize
+            }}
+          >
+            {{yield to="content"}}
+          </div>
         {{/if}}
       </div>
     </div>
diff --git a/packages/core/docs/layout/accordion-demo/demo1.md b/packages/core/docs/layout/accordion-demo/demo1.md
index b8eeab05..54ccfb5b 100644
--- a/packages/core/docs/layout/accordion-demo/demo1.md
+++ b/packages/core/docs/layout/accordion-demo/demo1.md
@@ -1,153 +1,42 @@
-```hbs template
-<EuiAccordion>
-  <:buttonContent>
-    Clickable title
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
-<EuiTitle @size='xs'>
-  Accordion with
-  <b>
-    forceState
-  </b>
-</EuiTitle>
-The accordion is
-{{this.accordionState}}
-<br />
-<EuiFlexGroup>
-  <EuiFlexItem>
-    <EuiButton {{on 'click' (fn (mut this.accordionState) 'open')}}>
-      Open
-    </EuiButton>
-  </EuiFlexItem>
-  <EuiFlexItem>
-    <EuiButton {{on 'click' (fn (mut this.accordionState) 'closed')}}>
-      Close
-    </EuiButton>
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiAccordion
-  @forceState={{this.accordionState}}
-  @onToggle={{if
-    (eq this.accordionState 'open')
-    (fn (mut this.accordionState) 'closed')
-    (fn (mut this.accordionState) 'open')
-  }}
->
-  <:buttonContent>
-    Clickable title
-  </:buttonContent>
-  <:content>
-    My Content
-  </:content>
-</EuiAccordion>
-<br />
-<EuiTitle @size='xs'>
-  Accordion with
-  <b>
-    isLoading = true
-  </b>
-</EuiTitle>
-<EuiAccordion @isLoading={{true}}>
-  <:buttonContent>
-    "You spin my head right round"
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<EuiAccordion @isLoading={{true}} @isLoadingMessage='What what'>
-  <:buttonContent>
-    You spin my head right round also in content
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
-<EuiTitle @size='xs'>
-  Accordion with
-  <b>
-    arrowDisplay = right
-  </b>
-</EuiTitle>
-<EuiAccordion @arrowDisplay='right'>
-  <:buttonContent>
-    Clickable Title
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
-
-<EuiTitle @size='xs'>
-  Accordion with
-  <b>
-    arrowDisplay = left
-  </b>
-</EuiTitle>
-<EuiAccordion @arrowDisplay='left'>
-  <:buttonContent>
-    Clickable Title
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
+---
+order: 1
+---
 
-<EuiTitle @size='xs'>
-  Accordion with
-  <b>
-    arrowDisplay = none
-  </b>
+```hbs template
+<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>
+<EuiSpacer />
+<EuiTitle>
+  Simple and unstyled
 </EuiTitle>
-<EuiAccordion @arrowDisplay='none'>
-  <:buttonContent>
-    Clickable Title
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
-
-<EuiTitle @size='xs'>Nested accordions</EuiTitle>
-<EuiAccordion>
-  <:buttonContent>
-    Parent accordion
-  </:buttonContent>
-  <:content>
-    Parent content
-    <EuiAccordion>
-      <:buttonContent>
-        Child accordion
-      </:buttonContent>
-      <:content>
-        Child content
-        <EuiAccordion>
-          <:buttonContent>
-            Grandchild accordion
-          </:buttonContent>
-          <:content>
-            Grandchild content
-          </:content>
-        </EuiAccordion>
-      </:content>
-    </EuiAccordion>
-  </:content>
-</EuiAccordion>
-```
-
-```js component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class AccordionDemo1Component extends Component {
-  @tracked accordionState = false;
-}
+<EuiSpacer />
+<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 />
+  A
+  <EuiCode>buttonContent</EuiCode>
+  prop defines the content of the clickable area. On click it will expose the
+  children and animate based on the height of those children.<br /><br />
+  For styling needs, classes can be individually applied with
+  <EuiCode>className</EuiCode>
+  (for the entire accordion), and
+  <EuiCode>buttonClassName</EuiCode>
+  (for the clickable area).
+</EuiText>
+<EuiSpacer />
 ```
diff --git a/packages/core/docs/layout/accordion-demo/demo10.md b/packages/core/docs/layout/accordion-demo/demo10.md
new file mode 100644
index 00000000..2eff97f6
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo10.md
@@ -0,0 +1,113 @@
+---
+order: 10
+---
+
+```hbs template
+<EuiTitle>
+  Styled for forms
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  Since accordions are unstyled by default, EUI also provides a few classes you
+  can add to parts of the EuiAccordion to give it more style, like when using
+  with forms.
+  <ul>
+    <li><EuiCode>.euiAccordionForm</EuiCode>: Applied to the
+      <EuiCode>className</EuiCode>, adds top and bottom borders</li>
+    <li><EuiCode>.euiAccordionForm__button</EuiCode>: Applied to the
+      <EuiCode>buttonClassName</EuiCode>, adds extra padding to the button for
+      better spacing</li>
+    <li><EuiCode>.euiAccordionForm__extraAction</EuiCode>: Applied to the button
+      passed to
+      <EuiCode>extraAction</EuiCode>, will visually hide it until hover or focus</li>
+  </ul>
+
+  We also recommend creating a fieldset/legend combination for better
+  accessibility and DOM structure by passing
+  <EuiCode>element="fieldset"</EuiCode>. This will set the entire accordion as a
+  <EuiCode>"fieldset"</EuiCode>
+  and automatically change the buttonElement to a
+  <EuiCode>"legend"</EuiCode>.
+</EuiText>
+<EuiSpacer />
+<EuiAccordion
+  @paddingSize='l'
+  @element='fieldset'
+  @className='euiAccordionForm'
+  @buttonClassName='euiAccordionForm__button'
+  @extraAction={{true}}
+>
+  <:buttonContent>
+    <EuiText
+      @onClick={{this.onClick}}
+      @href='#/layout/accordion#interactive-content-in-the-trigger'
+      @size='xs'
+    >
+      <div>
+        <EuiFlexGroup
+          @gutterSize='s'
+          @alignItems='center'
+          @responsive={{false}}
+        >
+          <EuiFlexItem @grow={{false}}>
+            <EuiIcon @type='logoWebhook' @size='m' />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTitle @size='xs'>
+              <h3>Webhook</h3>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiText @size='s'>
+          <p>
+            <EuiTextColor @color='subdued'>
+              Will send a POST request to www.example.com/some/path/
+            </EuiTextColor>
+          </p>
+        </EuiText>
+      </div>
+    </EuiText>
+  </:buttonContent>
+  <:content>
+    <EuiForm @component='form'>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow @label='Username'>
+            <EuiFieldText @icon='user' @placeholder='John' />
+          </EuiFormRow>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFormRow
+            @label='Password'
+            @helpText='Must include one number and one symbol'
+          >
+            <EuiFieldPassword @icon='lock' />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer @size='m' />
+
+      <EuiFormRow @label='Body'>
+        <EuiTextArea @placeholder='I am a textarea, put some content in me!' />
+      </EuiFormRow>
+    </EuiForm>
+  </: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 {
+  @action
+  onClick(e) {
+    e.stopPropagation();
+  }
+}
+```
diff --git a/packages/core/docs/layout/accordion-demo/demo2.md b/packages/core/docs/layout/accordion-demo/demo2.md
new file mode 100644
index 00000000..68d0c02c
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo2.md
@@ -0,0 +1,31 @@
+---
+order: 2
+---
+
+```hbs template
+<EuiTitle>
+  Arrow display
+</EuiTitle>
+<EuiSpacer />
+<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>
+<EuiSpacer />
+<EuiAccordion @arrowDisplay='right'>
+  <:buttonContent>
+    This accordion has the arrow on the right
+  </:buttonContent>
+  <:content>
+    Any content inside of <strong>EuiAccordion</strong> will appear here.
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @arrowDisplay='none'>
+  <:buttonContent>
+    This one has it removed entirely
+  </:buttonContent>
+  <:content>
+    Any content inside of <strong>EuiAccordion</strong> will appear here.
+  </:content>
+</EuiAccordion>
+```
diff --git a/packages/core/docs/layout/accordion-demo/demo3.md b/packages/core/docs/layout/accordion-demo/demo3.md
new file mode 100644
index 00000000..3f963b95
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo3.md
@@ -0,0 +1,77 @@
+---
+order: 3
+---
+
+```hbs template
+<EuiTitle>
+  Multiple accordions
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  Use any number of
+  <strong>EuiAccordion</strong>
+  elements to visually display them as a group.<br /><br />
+  Due to the previously mentioned bare styles, it is recommended to place an
+  <strong>EuiSpacer</strong>
+  between accordion items. Padding within each accordion item can be applied via
+  the
+  <EuiCode>paddingSize</EuiCode>
+  prop.
+</EuiText>
+<EuiSpacer />
+<EuiAccordion @paddingSize='l'>
+  <:buttonContent>
+    An accordion with padding applied through props
+  </:buttonContent>
+  <:content>
+    <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>
+    </EuiText>
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @paddingSize='l' @buttonContentClassName="eui-textTruncate">
+  <:buttonContent>
+    A second accordion with padding and a very long title that should truncate
+    because of eui-textTruncate
+  </:buttonContent>
+  <:content>
+    <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>
+      <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>
+    </EuiText>
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @paddingSize='m'>
+  <:buttonContent>
+    A third accordion with nested accordion
+  </:buttonContent>
+  <:content>
+    <EuiText size='s'>
+      <p>
+        This content area will grow to accommodate when the accordion below
+        opens
+      </p>
+    </EuiText>
+    <EuiAccordion @paddingSize='m'>
+      <:buttonContent>
+        A fourth nested accordion
+      </:buttonContent>
+      <:content>
+        <EuiPanel @color='subdued'>
+          Any content inside of
+          <strong>EuiAccordion</strong>
+          will appear here.
+        </EuiPanel>
+      </:content>
+    </EuiAccordion>
+  </:content>
+</EuiAccordion>
+```
diff --git a/packages/core/docs/layout/accordion-demo/demo4.md b/packages/core/docs/layout/accordion-demo/demo4.md
new file mode 100644
index 00000000..ac4e0a2e
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo4.md
@@ -0,0 +1,27 @@
+---
+order: 4
+---
+
+```hbs template
+<EuiTitle>
+  Extra actions
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  Use the <EuiCode>extraAction</EuiCode> prop to pass an extra action displayed on the right of any accordion. Usually this is a delete or button, but can be anything. Note that this action is separate from the click state that expands the accordion. This is needed to make it accessible.
+</EuiText>
+<EuiSpacer />
+<EuiAccordion @paddingSize='m' @extraAction={{true}}>
+  <:buttonContent>
+    Click to open
+  </:buttonContent>
+  <:content>
+    <EuiText size='s'>
+      <strong>Opened content </strong>
+    </EuiText>
+  </:content>
+  <:extraAction>
+    <EuiButton @size="s">Extra action!</EuiButton>
+  </:extraAction>
+</EuiAccordion>
+```
\ No newline at end of file
diff --git a/packages/core/docs/layout/accordion-demo/demo5.md b/packages/core/docs/layout/accordion-demo/demo5.md
new file mode 100644
index 00000000..1e8ee477
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo5.md
@@ -0,0 +1,28 @@
+---
+order: 5
+---
+
+```hbs template
+<EuiTitle>
+  Opened on initial render
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  Use the
+  <EuiCode>initialIsOpen</EuiCode>
+  prop to open the accordion when first rendered.
+</EuiText>
+<EuiSpacer />
+<EuiAccordion @paddingSize='m' @initialIsOpen={{true}}>
+  <:buttonContent>
+    I am opened by default. Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Any content inside of
+      <strong>EuiAccordion</strong>
+      will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```
\ No newline at end of file
diff --git a/packages/core/docs/layout/accordion-demo/demo6.md b/packages/core/docs/layout/accordion-demo/demo6.md
new file mode 100644
index 00000000..5d1021c7
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo6.md
@@ -0,0 +1,67 @@
+---
+order: 6
+---
+
+```hbs template
+<EuiTitle>
+  Controlling toggled state
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  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:
+  <ul>
+    <li><EuiCode>forceState</EuiCode>: Accepts either
+      <EuiCode>'open'</EuiCode>
+      or
+      <EuiCode>'closed'</EuiCode>.</li>
+    <li><EuiCode>onToggle</EuiCode>: A callback function returning
+      <EuiCode>true</EuiCode>
+      if the accordion is open</li>
+  </ul>
+</EuiText>
+<EuiSpacer />
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' (fn (mut this.accordionState) 'open')}}>
+      Open
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' (fn (mut this.accordionState) 'closed')}}>
+      Close
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiAccordion
+  @forceState={{this.accordionState}}
+  @onToggle={{if
+    (eq this.accordionState 'open')
+    (fn (mut this.accordionState) 'closed')
+    (fn (mut this.accordionState) 'open')
+  }}
+>
+  <:buttonContent>
+    I am a controlled accordion
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Any content inside of
+      <strong>EuiAccordion</strong>
+      will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionDemo1Component extends Component {
+  @tracked accordionState = false;
+}
+```
diff --git a/packages/core/docs/layout/accordion-demo/demo7.md b/packages/core/docs/layout/accordion-demo/demo7.md
new file mode 100644
index 00000000..2e5e9582
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo7.md
@@ -0,0 +1,80 @@
+---
+order: 7
+---
+
+```hbs template
+<EuiTitle>
+  Loading state
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  Use the
+  <EuiCode>isLoading</EuiCode>
+  prop when not all of the accordion's content is ready yet. When using
+  <EuiCode>isLoading</EuiCode>, the content of
+  <EuiCode>extraAction</EuiCode>
+  is replaced with a loading spinner.<br /><br />
+  Manage the content of the accordion using
+  <EuiCode>isLoadingMessage</EuiCode>. By default, it is set to
+  <EuiCode>false</EuiCode>
+  and the content will remain unaltered. Set it to
+  <EuiCode>true</EuiCode>
+  to show a default loading message or pass a node to show a custom loading
+  message.
+</EuiText>
+<EuiSpacer />
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiText>
+      isLoadingMessage:
+    </EuiText>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty {{on 'click' (fn (mut this.isLoadingMessage) false)}}>
+      False
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty {{on 'click' (fn (mut this.isLoadingMessage) true)}}>
+      True
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty
+      {{on
+        'click'
+        (fn (mut this.isLoadingMessage) 'This is a custom loading message')
+      }}
+    >
+      Custom
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiAccordion
+  @isLoading={{true}}
+  @isLoadingMessage={{this.isLoadingMessage}}
+  @extraAction={{true}}
+>
+  <:buttonContent>
+    Accordion is loading, click to toggle
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Opened content
+    </EuiPanel>
+  </:content>
+  <:extraAction>
+    <EuiButton size='s'>Extra action!</EuiButton>
+  </:extraAction>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionDemo1Component extends Component {
+  @tracked isLoadingMessage = false;
+}
+```
diff --git a/packages/core/docs/layout/accordion-demo/demo8.md b/packages/core/docs/layout/accordion-demo/demo8.md
new file mode 100644
index 00000000..36f767e1
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo8.md
@@ -0,0 +1,68 @@
+---
+order: 8
+---
+
+```hbs template
+<EuiTitle>
+  When content changes dynamically
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  If an accordion’s content changes height while the accordion is open, it will
+  resize dynamically.
+</EuiText>
+<EuiSpacer />
+<EuiAccordion @paddingSize='s'>
+  <:buttonContent>
+    Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+    <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>
+    <EuiSpacer />
+    <EuiPanel @color='subdued'>
+      <ul>
+        {{#each (range 0 this.counter) as |row|}}
+          <li> Row {{row}}</li>
+        {{/each}}
+      </ul>
+    </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--;
+    }
+  }
+}
+```
diff --git a/packages/core/docs/layout/accordion-demo/demo9.md b/packages/core/docs/layout/accordion-demo/demo9.md
new file mode 100644
index 00000000..3400cbd8
--- /dev/null
+++ b/packages/core/docs/layout/accordion-demo/demo9.md
@@ -0,0 +1,63 @@
+---
+order: 9
+---
+
+```hbs template
+<EuiTitle>
+  Interactive content in the trigger
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  Passing interactive content like links, buttons, or form elements as the
+  <EuiCode>buttonContent</EuiCode>, will cause issues with the wrapping button
+  element. To fix this, you can change this wrapping element to a div using
+  <EuiCode>buttonElement="div"</EuiCode>.<br /><br />
+
+  If you don't want the interactive content to trigger the accordion expansion,
+  you will have to apply
+  <EuiCode>e.stopPropagation()</EuiCode>
+  to your element manually.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut @iconType='accessibility' @color='warning'>
+  <:body>
+    <EuiText>
+      Accordions need a focusable button for accessibility, so changing the
+      element to anything other than a button will enforce the display of the
+      arrow.
+    </EuiText>
+  </:body>
+</EuiCallOut>
+<EuiSpacer />
+<EuiAccordion @paddingSize='s' @buttonElement="div">
+  <:buttonContent>
+    <EuiText
+      onClick={{this.onClick}}
+      href='#/layout/accordion#interactive-content-in-the-trigger'
+    >
+      This is a nested link
+    </EuiText>
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Any content inside of
+      <strong>EuiAccordion</strong>
+      will appear here.
+    </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 {
+
+  @action
+  onClick(e) {
+    e.stopPropagation();
+  }
+}
+```