From 77dc32e2a2c9f06351040818d4bd3ea45beae251 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Thu, 22 Aug 2024 13:30:30 +0100 Subject: [PATCH] Fixed disabled accordions having status styling (#4013) --- .changeset/spotty-beers-add.md | 5 +++ packages/core/src/accordion/Accordion.css | 4 ++ packages/core/src/accordion/Accordion.tsx | 5 ++- .../core/src/accordion/AccordionHeader.css | 12 +++--- .../core/src/accordion/AccordionHeader.tsx | 4 +- .../core/src/accordion/AccordionPanel.tsx | 2 +- .../accordion/accordion.qa.stories.tsx | 42 ++++--------------- 7 files changed, 31 insertions(+), 43 deletions(-) create mode 100644 .changeset/spotty-beers-add.md diff --git a/.changeset/spotty-beers-add.md b/.changeset/spotty-beers-add.md new file mode 100644 index 00000000000..b0bc8c794f7 --- /dev/null +++ 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 index 9e2bb977ccd..5d4a59a8c88 100644 --- 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 index 607d7cdefd1..8157ccbf433 100644 --- a/packages/core/src/accordion/Accordion.tsx +++ b/packages/core/src/accordion/Accordion.tsx @@ -101,7 +101,10 @@ export const Accordion = forwardRef( 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 index 5129a501cff..8ba3d572291 100644 --- 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 index 5517cf882e7..9ec9ffc24f9 100644 --- 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 (