From 31e6a5b21a7cf47d9f6eded41f57baaafe2cea26 Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Thu, 18 Dec 2025 16:36:18 -0500 Subject: [PATCH 1/9] feat: added flush variant for accordion component, UXDS-999 --- .../accordion/src/lib/Accordion.stories.tsx | 22 ++++++++ packages/accordion/src/lib/Accordion.tsx | 52 +++++++++++++++---- 2 files changed, 64 insertions(+), 10 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index 99bfcebdcc..8ab3fcb1c2 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -85,6 +85,28 @@ export const _Variants: StoryObj = { + + + + Flush + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit + leo lobortis eget. + + + + Flush Nested Accordion + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet + blandit leo lobortis eget. + + + + + + ), }; diff --git a/packages/accordion/src/lib/Accordion.tsx b/packages/accordion/src/lib/Accordion.tsx index 9189b9b2d4..e8980b82f8 100644 --- a/packages/accordion/src/lib/Accordion.tsx +++ b/packages/accordion/src/lib/Accordion.tsx @@ -2,9 +2,11 @@ import MuiAccordion, { AccordionProps as MuiAccordionProps } from '@mui/material import { styled } from '@mui/material/styles'; import { forwardRef } from 'react'; +type Variant = 'filled' | 'outlined' | 'flush'; + export type AccordionProps = { /** @default "filled" */ - variant?: 'filled' | 'outlined'; + variant?: Variant /** * Disable nested styling for child `Accordions` * @default false @@ -33,19 +35,49 @@ const OutlinedAccordion = styled(MuiAccordion, { backgroundColor: theme.palette.background.paper, }, '> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type': - { - borderTop: `1px solid ${theme.palette.divider}`, - }, + { + borderTop: `1px solid ${theme.palette.divider}`, + }, })); +const FlushAccordion = styled(MuiAccordion, { + name: 'MuiAccordion', + slot: 'AvFlush', + overridesResolver: (props, styles) => styles.avFlush, +})(({ theme }) => ({ + '&&': { + borderRadius: 0, + border: 0, + borderBottom: `1px solid ${theme.palette.divider}`, + }, + '&&:first-of-type': { + borderTop: `1px solid ${theme.palette.divider}`, + }, + '> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': { + backgroundColor: 'transparent' + }, + '> .MuiAccordion-heading .MuiAccordionSummary-root': { + padding: 0, + paddingLeft: 8, + paddingRight: 8, + minHeight: 40, + }, + '> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content': { + margin: 8, + } +})); + +const VariantComponent: Record = { + filled: FilledAccordion, + outlined: OutlinedAccordion, + flush: FlushAccordion +} + export const Accordion = forwardRef((allProps, ref) => { const { variant = 'filled', disableNestedStyling = false, className, ...props } = allProps; + const Variant = VariantComponent[variant] - const classnames = `${variant === 'filled' ? 'MuiAccordion-avFilled' : 'MuiAccordion-avOutlined'}${disableNestedStyling ? ' Av-disableNested' : ''} ${className || ''}`; + const classnames = `MuiAccordion-av${variant.charAt(0).toUpperCase() + variant.slice(1)}${disableNestedStyling ? ' Av-disableNested' : ''} ${className || ''}`; - return variant === 'filled' ? ( - - ) : ( - - ); + return ; }); From a5be06fd731e0d55a34165f359d7fc22c5cdb1bc Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Thu, 18 Dec 2025 17:47:08 -0500 Subject: [PATCH 2/9] fix: fixed spacing between button and header, UXDS-999 --- packages/accordion/src/lib/Accordion.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.tsx b/packages/accordion/src/lib/Accordion.tsx index e8980b82f8..252c202bcc 100644 --- a/packages/accordion/src/lib/Accordion.tsx +++ b/packages/accordion/src/lib/Accordion.tsx @@ -57,13 +57,11 @@ const FlushAccordion = styled(MuiAccordion, { backgroundColor: 'transparent' }, '> .MuiAccordion-heading .MuiAccordionSummary-root': { - padding: 0, - paddingLeft: 8, - paddingRight: 8, + padding: 8, minHeight: 40, }, '> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content': { - margin: 8, + margin: 0 } })); From 3ad5734da5f53e0ebc28846345ba616836e3f215 Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Thu, 18 Dec 2025 18:18:34 -0500 Subject: [PATCH 3/9] fix: added flush as an option for variants on accordion storybook page, UXDS-999 --- packages/accordion/src/lib/Accordion.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index 8ab3fcb1c2..fcd98d3093 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { tags: ['autodocs'], argTypes: { variant: { - options: ['filled', 'outlined'], + options: ['filled', 'outlined', 'flush'], }, }, }; From 9e9013c1a342b2a5cadba88ca8c6a09f3ec71a45 Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Tue, 23 Dec 2025 14:06:27 -0500 Subject: [PATCH 4/9] feat: rounded the corners of nested accordions to 4px, UXDS-999 --- .../accordion/src/lib/Accordion.stories.tsx | 2 +- packages/accordion/src/lib/Accordion.tsx | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index fcd98d3093..5ba572e7c6 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -94,7 +94,7 @@ export const _Variants: StoryObj = { Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - + Flush Nested Accordion diff --git a/packages/accordion/src/lib/Accordion.tsx b/packages/accordion/src/lib/Accordion.tsx index 252c202bcc..a3dacd3d4c 100644 --- a/packages/accordion/src/lib/Accordion.tsx +++ b/packages/accordion/src/lib/Accordion.tsx @@ -14,11 +14,18 @@ export type AccordionProps = { disableNestedStyling?: boolean; } & Omit; +const baseStyles = (theme: any) => ({ + '> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root > .MuiBox-root > .MuiAccordion-root > .MuiAccordion-heading > .MuiAccordionSummary-root': { + borderRadius: '4px', + } +}); + const FilledAccordion = styled(MuiAccordion, { name: 'MuiAccordion', slot: 'AvFilled', overridesResolver: (props, styles) => styles.avFilled, })(({ theme }) => ({ + ...baseStyles(theme), borderColor: theme.palette.grey[100], '> .MuiAccordion-heading .MuiAccordionSummary-root': { backgroundColor: theme.palette.grey[100], @@ -30,6 +37,7 @@ const OutlinedAccordion = styled(MuiAccordion, { slot: 'AvOutlined', overridesResolver: (props, styles) => styles.avOutlined, })(({ theme }) => ({ + ...baseStyles(theme), borderColor: theme.palette.divider, '> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': { backgroundColor: theme.palette.background.paper, @@ -45,12 +53,13 @@ const FlushAccordion = styled(MuiAccordion, { slot: 'AvFlush', overridesResolver: (props, styles) => styles.avFlush, })(({ theme }) => ({ + ...baseStyles(theme), + border: 0, + borderBottom: `1px solid ${theme.palette.divider}`, '&&': { borderRadius: 0, - border: 0, - borderBottom: `1px solid ${theme.palette.divider}`, }, - '&&:first-of-type': { + '&:first-of-type': { borderTop: `1px solid ${theme.palette.divider}`, }, '> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': { @@ -62,7 +71,7 @@ const FlushAccordion = styled(MuiAccordion, { }, '> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content': { margin: 0 - } + }, })); const VariantComponent: Record = { From 0e43b143f7a6afa64aede0066fae4ac9acaf6b2f Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Tue, 23 Dec 2025 15:32:34 -0500 Subject: [PATCH 5/9] feat: added expanded flush variant to states as well as flush option to spacing, UXDS-999 --- .../accordion/src/lib/Accordion.stories.tsx | 32 +++++++++++++++---- packages/accordion/src/lib/Accordion.tsx | 4 +-- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index 5ba572e7c6..797b0bf199 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -119,13 +119,13 @@ export const _Variants: StoryObj = { * this is due to Material's default gutter behavior when expanded along with how they overwrite the behavior when disabling the gutters. */ export const _Spacing: StoryObj = { - render: () => ( + render: (args: AccordionProps) => (
Grouped
- + Accordion 1 @@ -134,7 +134,7 @@ export const _Spacing: StoryObj = { leo lobortis eget. - + Accordion 2 @@ -143,7 +143,7 @@ export const _Spacing: StoryObj = { leo lobortis eget. - + Accordion 3 with Actions @@ -162,7 +162,7 @@ export const _Spacing: StoryObj = { Separated in a Grid - + Accordion 4 @@ -173,7 +173,7 @@ export const _Spacing: StoryObj = { - + Accordion 5 @@ -184,7 +184,7 @@ export const _Spacing: StoryObj = { - + Accordion 6 with Actions @@ -242,6 +242,24 @@ export const _States: StoryObj = { + + + + Flush Expanded + + + + + Flush Nested Accordion + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet + blandit leo lobortis eget. + + + + + diff --git a/packages/accordion/src/lib/Accordion.tsx b/packages/accordion/src/lib/Accordion.tsx index a3dacd3d4c..a7662d4cc1 100644 --- a/packages/accordion/src/lib/Accordion.tsx +++ b/packages/accordion/src/lib/Accordion.tsx @@ -15,8 +15,8 @@ export type AccordionProps = { } & Omit; const baseStyles = (theme: any) => ({ - '> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root > .MuiBox-root > .MuiAccordion-root > .MuiAccordion-heading > .MuiAccordionSummary-root': { - borderRadius: '4px', + '& .MuiAccordionDetails-root .MuiAccordionSummary-root': { + borderRadius: 4, } }); From b150b28d2da33e0dc1e6b68f1e660e9de1d7b27f Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Mon, 29 Dec 2025 10:11:36 -0500 Subject: [PATCH 6/9] fix: removed shared styles, UXDS-999 --- packages/accordion/src/lib/Accordion.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.tsx b/packages/accordion/src/lib/Accordion.tsx index a7662d4cc1..f4e86e25db 100644 --- a/packages/accordion/src/lib/Accordion.tsx +++ b/packages/accordion/src/lib/Accordion.tsx @@ -14,18 +14,11 @@ export type AccordionProps = { disableNestedStyling?: boolean; } & Omit; -const baseStyles = (theme: any) => ({ - '& .MuiAccordionDetails-root .MuiAccordionSummary-root': { - borderRadius: 4, - } -}); - const FilledAccordion = styled(MuiAccordion, { name: 'MuiAccordion', slot: 'AvFilled', overridesResolver: (props, styles) => styles.avFilled, })(({ theme }) => ({ - ...baseStyles(theme), borderColor: theme.palette.grey[100], '> .MuiAccordion-heading .MuiAccordionSummary-root': { backgroundColor: theme.palette.grey[100], @@ -37,7 +30,6 @@ const OutlinedAccordion = styled(MuiAccordion, { slot: 'AvOutlined', overridesResolver: (props, styles) => styles.avOutlined, })(({ theme }) => ({ - ...baseStyles(theme), borderColor: theme.palette.divider, '> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': { backgroundColor: theme.palette.background.paper, @@ -53,7 +45,6 @@ const FlushAccordion = styled(MuiAccordion, { slot: 'AvFlush', overridesResolver: (props, styles) => styles.avFlush, })(({ theme }) => ({ - ...baseStyles(theme), border: 0, borderBottom: `1px solid ${theme.palette.divider}`, '&&': { @@ -72,6 +63,9 @@ const FlushAccordion = styled(MuiAccordion, { '> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content': { margin: 0 }, + '& .MuiAccordionDetails-root .MuiAccordion-heading': { + borderRadius: 4, + } })); const VariantComponent: Record = { From ddd24d299e6d953771b170e207386e65696684c5 Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Mon, 29 Dec 2025 10:16:18 -0500 Subject: [PATCH 7/9] fix: fixed naming issue, UXDS-999 --- packages/accordion/src/lib/Accordion.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index 797b0bf199..1d12058082 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -244,12 +244,12 @@ export const _States: StoryObj = { - + Flush Expanded - + Flush Nested Accordion From fe0259892eca9f569a7d0cb5a6012455f638c5c3 Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Mon, 29 Dec 2025 10:18:05 -0500 Subject: [PATCH 8/9] fix: fixed another naming issue, UXDS-999 --- packages/accordion/src/lib/Accordion.stories.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index 1d12058082..84c4fd8521 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -87,7 +87,7 @@ export const _Variants: StoryObj = { - + Flush @@ -95,7 +95,7 @@ export const _Variants: StoryObj = { leo lobortis eget. - + Flush Nested Accordion @@ -249,7 +249,9 @@ export const _States: StoryObj = { - + Flush Nested Accordion From d12a54212456090e00ec9072fb0811025ff6e34c Mon Sep 17 00:00:00 2001 From: David Glen Crittendon Date: Mon, 29 Dec 2025 10:19:35 -0500 Subject: [PATCH 9/9] fix: fixed accidental paste, UXDS-999 --- packages/accordion/src/lib/Accordion.stories.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/accordion/src/lib/Accordion.stories.tsx b/packages/accordion/src/lib/Accordion.stories.tsx index 84c4fd8521..698be10e4b 100644 --- a/packages/accordion/src/lib/Accordion.stories.tsx +++ b/packages/accordion/src/lib/Accordion.stories.tsx @@ -249,9 +249,7 @@ export const _States: StoryObj = { - + Flush Nested Accordion