Fixed disabled accordions having status styling (#4013)

jpmorganchase · Aug 22, 2024 · 77dc32e · 77dc32e
1 parent 222c47a
commit 77dc32e
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 43 deletions.
diff --git a/.changeset/spotty-beers-add.md b/.changeset/spotty-beers-add.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed Accordion having status styling when disabled and status is set.
diff --git a/packages/core/src/accordion/Accordion.css b/packages/core/src/accordion/Accordion.css
@@ -13,3 +13,7 @@
 .saltAccordion-success {
   border-top-color: var(--salt-status-success-borderColor);
 }
+
+.saltAccordion-disabled {
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
diff --git a/packages/core/src/accordion/Accordion.tsx b/packages/core/src/accordion/Accordion.tsx
@@ -101,7 +101,10 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
           ref={ref}
           className={clsx(
             withBaseName(),
-            { [withBaseName(status ?? "")]: status },
+            {
+              [withBaseName(status ?? "")]: status,
+              [withBaseName("disabled")]: disabled,
+            },
             className,
           )}
           {...rest}

diff --git a/packages/core/src/accordion/AccordionHeader.css b/packages/core/src/accordion/AccordionHeader.css
@@ -21,12 +21,6 @@
   outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
 }
 
-.saltAccordionHeader:disabled {
-  background: var(--salt-actionable-secondary-background);
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-actionable-cursor-disabled);
-}
-
 .saltAccordionHeader-content {
   padding: var(--salt-spacing-75) 0;
   width: 100%;
@@ -65,3 +59,9 @@
   height: var(--salt-size-base);
   margin-left: auto;
 }
+
+.saltAccordionHeader:disabled {
+  background: var(--salt-actionable-secondary-background);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-actionable-cursor-disabled);
+}
diff --git a/packages/core/src/accordion/AccordionHeader.tsx b/packages/core/src/accordion/AccordionHeader.tsx
@@ -66,7 +66,7 @@ export const AccordionHeader = forwardRef<
     if (id) {
       setHeaderId(id);
     }
-  }, [id]);
+  }, [id, setHeaderId]);
 
   return (
     <button
@@ -87,7 +87,7 @@ export const AccordionHeader = forwardRef<
     >
       {indicatorSide === "left" && <ExpansionIcon expanded={expanded} />}
       <span className={withBaseName("content")}>{children}</span>
-      {status && (
+      {status && !disabled && (
         <StatusIndicator
           className={withBaseName("statusIndicator")}
           status={status}

diff --git a/packages/core/src/accordion/AccordionPanel.tsx b/packages/core/src/accordion/AccordionPanel.tsx
@@ -38,7 +38,7 @@ export const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
       if (id) {
         setPanelId(id);
       }
-    }, [id]);
+    }, [id, setPanelId]);
 
     return (
       <div

diff --git a/packages/core/stories/accordion/accordion.qa.stories.tsx b/packages/core/stories/accordion/accordion.qa.stories.tsx
@@ -24,7 +24,7 @@ export default {
 const UI = () => (
   <AccordionGroup>
     <Accordion value="default">
-      <AccordionHeader>Accordion label</AccordionHeader>
+      <AccordionHeader>Default accordion</AccordionHeader>
       <AccordionPanel>
         <FlowLayout>
           This is content inside of an Accordion.
@@ -44,27 +44,11 @@ const UI = () => (
       </AccordionPanel>
     </Accordion>
     <Accordion value="disabled" disabled>
-      <AccordionHeader>Accordion label</AccordionHeader>
-      <AccordionPanel>
-        <FlowLayout>
-          This is content inside of an Accordion.
-          <FormField labelPlacement="left">
-            <FormLabel>Disclosure ID</FormLabel>
-            <Input />
-          </FormField>
-          <FormField labelPlacement="left">
-            <FormLabel>Email</FormLabel>
-            <Input />
-          </FormField>
-          <FormField labelPlacement="left">
-            <FormLabel>Justification</FormLabel>
-            <Input />
-          </FormField>
-        </FlowLayout>
-      </AccordionPanel>
+      <AccordionHeader>Disabled accordion</AccordionHeader>
+      <AccordionPanel />
     </Accordion>
     <Accordion value="error" status="error">
-      <AccordionHeader>Accordion label</AccordionHeader>
+      <AccordionHeader>Error accordion</AccordionHeader>
       <AccordionPanel>
         <FlowLayout>
           This is content inside of an Accordion.
@@ -84,7 +68,7 @@ const UI = () => (
       </AccordionPanel>
     </Accordion>
     <Accordion value="warning" status="warning">
-      <AccordionHeader>Accordion label</AccordionHeader>
+      <AccordionHeader>Warning accordion</AccordionHeader>
       <AccordionPanel>
         <FlowLayout>
           This is content inside of an Accordion.
@@ -104,7 +88,7 @@ const UI = () => (
       </AccordionPanel>
     </Accordion>
     <Accordion value="success" status="success">
-      <AccordionHeader>Accordion label</AccordionHeader>
+      <AccordionHeader>Success accordion</AccordionHeader>
       <AccordionPanel>
         <FlowLayout>
           This is content inside of an Accordion.
@@ -123,17 +107,9 @@ const UI = () => (
         </FlowLayout>
       </AccordionPanel>
     </Accordion>
-    <Accordion value="default" indicatorSide="right">
-      <AccordionHeader>Right align indicator</AccordionHeader>
-      <AccordionPanel>
-        <FlowLayout>
-          This is content inside of an Accordion.
-          <FormField labelPlacement="left">
-            <FormLabel>Disclosure ID</FormLabel>
-            <Input />
-          </FormField>
-        </FlowLayout>
-      </AccordionPanel>
+    <Accordion value="success" status="success" disabled>
+      <AccordionHeader>Disabled success accordion</AccordionHeader>
+      <AccordionPanel />
     </Accordion>
     <Accordion value="default" expanded>
       <AccordionHeader>Left align indicator</AccordionHeader>