fix(Accordion): close content when it contains nested children and th…

…e title is closed (#108) fix the accordion content to collapse when it contains nested children content and the accordion is closed
stardust-ui · Jul 19, 2018 · 2b07c29 · 2b07c29
1 parent 9d144c6
commit 2b07c29
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Remove broken normalize.css button styles @levithomason ([#79](https://github.com/stardust-ui/react/pulls/79))
 - Add missing Button styles @levithomason ([#82](https://github.com/stardust-ui/react/pulls/82))
+- Fix Accordion to hide the content provided as nested children when closed ([#108](https://github.com/stardust-ui/react/pull/108))
 
 ### Features
 - Add Icon `circular` and `bordered` props @kuzhelov [#85](https://github.com/stardust-ui/react/pull/85)

diff --git a/...ents/Accordion/Types/AccordionExample.tsx → ...dion/Types/AccordionExample.shorthand.tsx b/...ents/Accordion/Types/AccordionExample.tsx → ...dion/Types/AccordionExample.shorthand.tsx
@@ -3,10 +3,12 @@ import { Accordion } from '@stardust-ui/react'
 
 const panels = [
   {
+    key: 'p',
     title: 'What is a point?',
     content: 'Use the haptic SDD circuit, then you can index the redundant pixel!',
   },
   {
+    key: 'd',
     title: 'What is a dimension of a point?',
     content: 'We need to copy the primary USB firewall!',
   },

diff --git a/...rdion/Types/AccordionExclusiveExample.tsx → ...s/AccordionExclusiveExample.shorthand.tsx b/...rdion/Types/AccordionExclusiveExample.tsx → ...s/AccordionExclusiveExample.shorthand.tsx
@@ -3,14 +3,17 @@ import { Accordion } from '@stardust-ui/react'
 
 const panels = [
   {
+    key: 'one',
     title: 'One',
     content: '2 3 4',
   },
   {
+    key: 'two',
     title: 'Five',
     content: '6 7 8 9',
   },
   {
+    key: 'three',
     title: "What's next?",
     content: '10',
   },

diff --git a/...rdion/Variations/AccordionExampleList.tsx → ...ations/AccordionExampleList.shorthand.tsx b/...rdion/Variations/AccordionExampleList.tsx → ...ations/AccordionExampleList.shorthand.tsx
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -9,6 +9,8 @@ import AccordionContent from './AccordionContent'
 
 /**
  * A standard Accordion.
+ * @accessibility
+ * Concern: how do we optimally navigate through an Accordion element with nested children?
  */
 class Accordion extends AutoControlledComponent<any, any> {
   static displayName = 'Accordion'
@@ -128,10 +130,13 @@ class Accordion extends AutoControlledComponent<any, any> {
         }),
       )
       children.push(
-        AccordionContent.create(content, {
-          autoGenerateKey: true,
-          defaultProps: { active },
-        }),
+        AccordionContent.create(
+          { content },
+          {
+            autoGenerateKey: true,
+            defaultProps: { active },
+          },
+        ),
       )
     })