Accordion needs a height calculation on mount (#816)

* Accordion needs a height calculation on mount * add focus ring, fix styling in accordion
elastic · May 10, 2018 · 3d76684 · 3d76684
1 parent c0d1323
commit 3d76684
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 
 **Bug fixes**
 
+- Fixes height calculation error on `EuiAccordion` when it starts loads in an open state. ([#816](https://github.com/elastic/eui/pull/816))
 - Added aria-invalid labeling on `EuiFormRow` ([#777](https://github.com/elastic/eui/pull/799))
 - Added aria-live labeling for `EuiToasts` ([#777](https://github.com/elastic/eui/pull/777))
 - Added aria labeling requirements for `EuiBadge` , as well as a generic prop_type function `requiresAriaLabel` in `utils` to check for it. ([#777](https://github.com/elastic/eui/pull/777)) ([#802](https://github.com/elastic/eui/pull/802))

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -2,14 +2,20 @@
   text-align: left;
   width: 100%;
 
-  &:hover, &:focus {
+  &:hover {
     text-decoration: underline;
     cursor: pointer;
   }
 
   &:focus {
-    background-color: $euiFocusBackgroundColor;
+    .euiAccordion__iconWrapper {
+      @include euiFocusRing;
+
+      color: $euiColorPrimary;
+      border-radius: $euiBorderRadius;
+    }
   }
+
 }
 
 .euiAccordion__childWrapper {
@@ -24,6 +30,7 @@
   ;
 }
 
+
 $paddingSizes: (
   xs: $euiSizeXS,
   s: $euiSizeS,

diff --git a/src/components/accordion/_accordion_form.scss b/src/components/accordion/_accordion_form.scss
@@ -21,17 +21,6 @@
       text-decoration: underline;
     }
   }
-
-  &:focus {
-    text-decoration: none;
-    background-color: transparent;
-
-    .euiAccordionForm__title {
-      text-decoration: underline;
-      background-color: $euiFocusBackgroundColor;
-      outline: solid $euiSizeXS / 2 $euiFocusBackgroundColor;
-    }
-  }
 }
 .euiAccordionForm {
   border-top: $euiBorderThin;

diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js
@@ -35,10 +35,19 @@ export class EuiAccordion extends Component {
     this.onToggle = this.onToggle.bind(this);
   }
 
-  componentDidUpdate() {
-    const height = this.state.isOpen ? this.childContent.clientHeight: 0;
+  setChildContentHeight = () => {
+    requestAnimationFrame(() => {
+      const height = this.state.isOpen ? this.childContent.clientHeight: 0;
+      this.childWrapper.setAttribute('style', `height: ${height}px`);
+    });
+  }
 
-    this.childWrapper.setAttribute('style', `height: ${height}px`);
+  componentDidMount() {
+    this.setChildContentHeight();
+  }
+
+  componentDidUpdate() {
+    this.setChildContentHeight();
   }
 
   onToggle() {
@@ -112,7 +121,7 @@ export class EuiAccordion extends Component {
               className={buttonClasses}
             >
               <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
-                <EuiFlexItem grow={false}>
+                <EuiFlexItem grow={false} className="euiAccordion__iconWrapper">
                   {icon}
                 </EuiFlexItem>