fix(accordion): Adjusted styling to only target first children

salesforce-ux · Oct 18, 2017 · 9f8f601 · 9f8f601
1 parent 418f8d7
commit 9f8f601
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 6 deletions.
diff --git a/ui/components/accordion/base/_index.scss b/ui/components/accordion/base/_index.scss
@@ -112,15 +112,15 @@
  */
 .slds-is-open {
 
-  .slds-accordion__summary {
+  > .slds-accordion__summary {
     margin-bottom: $spacing-small;
+
+    .slds-accordion__summary-action-icon {
+      transform: rotate(0deg);
+    }
   }
 
-  .slds-accordion__summary-action-icon {
-    transform: rotate(0deg);
-  }
-
-  .slds-accordion__content {
+  > .slds-accordion__content {
     visibility: visible;
     opacity: 1;
     height: auto;

diff --git a/ui/components/accordion/base/example.jsx b/ui/components/accordion/base/example.jsx
@@ -14,6 +14,8 @@ import {
 const referenceId01 = 'accordion-details-01';
 const referenceId02 = 'accordion-details-02';
 const referenceId03 = 'accordion-details-03';
+const referenceId04 = 'accordion-details-04';
+const referenceId05 = 'accordion-details-05';
 
 let Accordion = props => (
   <ul className={classNames('slds-accordion', props.className)}>
@@ -249,3 +251,50 @@ export let states = [
     )
   }
 ];
+
+export let examples = [
+  {
+    id: 'nested-accordions',
+    label: 'Nested Accordions',
+    element: (
+      <Accordion>
+        <AccordionSection
+          summary="Accordion summary"
+          isOpen
+          referenceId={referenceId01}
+        >
+          <Accordion>
+            <AccordionSection
+              summary="Nested accordion summary"
+              isOpen
+              referenceId={referenceId04}
+            >
+              Accordion details - A
+            </AccordionSection>
+            <AccordionSection
+              summary="Nested accordion summary"
+              isOpen={false}
+              referenceId={referenceId05}
+            >
+              Accordion details - B
+            </AccordionSection>
+          </Accordion>
+        </AccordionSection>
+        <AccordionSection
+          summary="Accordion summary"
+          isOpen={false}
+          referenceId={referenceId02}
+        >
+          Accordion details - B
+        </AccordionSection>
+        <AccordionSection
+          summary="Accordion summary"
+          isOpen={false}
+          referenceId={referenceId03}
+        >
+          Accordion details - C
+        </AccordionSection>
+      </Accordion>
+    )
+  }
+];