@availity/mui-accordion 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.1.0](https://github.com/Availity/element/compare/@availity/mui-accordion@2.0.2...@availity/mui-accordion@2.1.0) (2025-12-31)
+
+
+### Features
+
+* added expanded flush variant to states as well as flush option to spacing, UXDS-999 ([0e43b14](https://github.com/Availity/element/commit/0e43b143f7a6afa64aede0066fae4ac9acaf6b2f))
+* added flush variant for accordion component, UXDS-999 ([31e6a5b](https://github.com/Availity/element/commit/31e6a5b21a7cf47d9f6eded41f57baaafe2cea26))
+* rounded the corners of nested accordions to 4px, UXDS-999 ([9e9013c](https://github.com/Availity/element/commit/9e9013c1a342b2a5cadba88ca8c6a09f3ec71a45))
+
+
+### Bug Fixes
+
+* added flush as an option for variants on accordion storybook page, UXDS-999 ([3ad5734](https://github.com/Availity/element/commit/3ad5734da5f53e0ebc28846345ba616836e3f215))
+* fixed accidental paste, UXDS-999 ([d12a542](https://github.com/Availity/element/commit/d12a54212456090e00ec9072fb0811025ff6e34c))
+* fixed another naming issue, UXDS-999 ([fe02598](https://github.com/Availity/element/commit/fe0259892eca9f569a7d0cb5a6012455f638c5c3))
+* fixed naming issue, UXDS-999 ([ddd24d2](https://github.com/Availity/element/commit/ddd24d299e6d953771b170e207386e65696684c5))
+* fixed spacing between button and header, UXDS-999 ([a5be06f](https://github.com/Availity/element/commit/a5be06fd731e0d55a34165f359d7fc22c5cdb1bc))
+* removed shared styles, UXDS-999 ([b150b28](https://github.com/Availity/element/commit/b150b28d2da33e0dc1e6b68f1e660e9de1d7b27f))
+
 ## [2.0.2](https://github.com/Availity/element/compare/@availity/mui-accordion@2.0.1...@availity/mui-accordion@2.0.2) (2025-12-09)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -6,9 +6,10 @@ import { AccordionDetailsProps as AccordionDetailsProps$1 } from '@mui/material/
 import { AccordionSummaryProps as AccordionSummaryProps$1 } from '@mui/material/AccordionSummary';
 import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
 
+type Variant = 'filled' | 'outlined' | 'flush';
 type AccordionProps = {
     /** @default "filled" */
-    variant?: 'filled' | 'outlined';
+    variant?: Variant;
     /**
      * Disable nested styling for child `Accordions`
      * @default false

package/dist/index.d.ts

@@ -6,9 +6,10 @@ import { AccordionDetailsProps as AccordionDetailsProps$1 } from '@mui/material/
 import { AccordionSummaryProps as AccordionSummaryProps$1 } from '@mui/material/AccordionSummary';
 import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
 
+type Variant = 'filled' | 'outlined' | 'flush';
 type AccordionProps = {
     /** @default "filled" */
-    variant?: 'filled' | 'outlined';
+    variant?: Variant;
     /**
      * Disable nested styling for child `Accordions`
      * @default false

package/dist/index.js

@@ -94,10 +94,43 @@ var OutlinedAccordion = (0, import_styles.styled)(import_Accordion.default, {
     borderTop: `1px solid ${theme.palette.divider}`
   }
 }));
+var FlushAccordion = (0, import_styles.styled)(import_Accordion.default, {
+  name: "MuiAccordion",
+  slot: "AvFlush",
+  overridesResolver: (props, styles) => styles.avFlush
+})(({ theme }) => ({
+  border: 0,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  "&&": {
+    borderRadius: 0
+  },
+  "&: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: 8,
+    minHeight: 40
+  },
+  "> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content": {
+    margin: 0
+  },
+  "& .MuiAccordionDetails-root .MuiAccordion-heading": {
+    borderRadius: 4
+  }
+}));
+var VariantComponent = {
+  filled: FilledAccordion,
+  outlined: OutlinedAccordion,
+  flush: FlushAccordion
+};
 var Accordion = (0, import_react.forwardRef)((allProps, ref) => {
   const _a = allProps, { variant = "filled", disableNestedStyling = false, className } = _a, props = __objRest(_a, ["variant", "disableNestedStyling", "className"]);
-  const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ""}`;
-  return variant === "filled" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilledAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref })) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutlinedAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
+  const Variant = VariantComponent[variant];
+  const classnames = `MuiAccordion-av${variant.charAt(0).toUpperCase() + variant.slice(1)}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Variant, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
 });
 
 // src/lib/AccordionActions.tsx

package/dist/index.mjs

@@ -58,10 +58,43 @@ var OutlinedAccordion = styled(MuiAccordion, {
     borderTop: `1px solid ${theme.palette.divider}`
   }
 }));
+var FlushAccordion = styled(MuiAccordion, {
+  name: "MuiAccordion",
+  slot: "AvFlush",
+  overridesResolver: (props, styles) => styles.avFlush
+})(({ theme }) => ({
+  border: 0,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  "&&": {
+    borderRadius: 0
+  },
+  "&: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: 8,
+    minHeight: 40
+  },
+  "> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content": {
+    margin: 0
+  },
+  "& .MuiAccordionDetails-root .MuiAccordion-heading": {
+    borderRadius: 4
+  }
+}));
+var VariantComponent = {
+  filled: FilledAccordion,
+  outlined: OutlinedAccordion,
+  flush: FlushAccordion
+};
 var Accordion = forwardRef((allProps, ref) => {
   const _a = allProps, { variant = "filled", disableNestedStyling = false, className } = _a, props = __objRest(_a, ["variant", "disableNestedStyling", "className"]);
-  const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ""}`;
-  return variant === "filled" ? /* @__PURE__ */ jsx(FilledAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref })) : /* @__PURE__ */ jsx(OutlinedAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
+  const Variant = VariantComponent[variant];
+  const classnames = `MuiAccordion-av${variant.charAt(0).toUpperCase() + variant.slice(1)}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ""}`;
+  return /* @__PURE__ */ jsx(Variant, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
 });
 
 // src/lib/AccordionActions.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-accordion",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Availity MUI Accordion Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Accordion.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Accordion> = {
   tags: ['autodocs'],
   argTypes: {
     variant: {
-      options: ['filled', 'outlined'],
+      options: ['filled', 'outlined', 'flush'],
     },
   },
 };
@@ -85,6 +85,28 @@ export const _Variants: StoryObj<typeof Accordion> = {
           </AccordionDetails>
         </Accordion>
       </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Accordion {...args} variant='flush'>
+          <AccordionSummary aria-controls="flush-summary-content" id="flush-summary-header" secondary="Secondary">
+            Flush
+          </AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+            <Box sx={{ mt: 2 }}>
+              <Accordion {...args} variant='flush'>
+                <AccordionSummary aria-controls="flush-nested-content" id="flush-nested-header">
+                  Flush Nested Accordion
+                </AccordionSummary>
+                <AccordionDetails>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+                  blandit leo lobortis eget.
+                </AccordionDetails>
+              </Accordion>
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+      </Grid>
     </Grid>
   ),
 };
@@ -97,13 +119,13 @@ export const _Variants: StoryObj<typeof Accordion> = {
  * 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<typeof Accordion> = {
-  render: () => (
+  render: (args: AccordionProps) => (
     <div>
       <Typography variant="h5" component="h2">
         Grouped
       </Typography>
       <div>
-        <Accordion>
+        <Accordion {...args}>
           <AccordionSummary aria-controls="grouped-panel1-content" id="grouped-panel1-header">
             Accordion 1
           </AccordionSummary>
@@ -112,7 +134,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
             leo lobortis eget.
           </AccordionDetails>
         </Accordion>
-        <Accordion>
+        <Accordion {...args}>
           <AccordionSummary aria-controls="grouped-panel2-content" id="grouped-panel2-header">
             Accordion 2
           </AccordionSummary>
@@ -121,7 +143,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
             leo lobortis eget.
           </AccordionDetails>
         </Accordion>
-        <Accordion>
+        <Accordion {...args}>
           <AccordionSummary aria-controls="grouped-panel3-content" id="grouped-panel3-header">
             Accordion 3 with Actions
           </AccordionSummary>
@@ -140,7 +162,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
           Separated in a Grid
         </Typography>
         <Grid size={{ xs: 12 }}>
-          <Accordion>
+          <Accordion {...args}>
             <AccordionSummary aria-controls="panel1-content" id="panel1-header">
               Accordion 4
             </AccordionSummary>
@@ -151,7 +173,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
           </Accordion>
         </Grid>
         <Grid size={{ xs: 12 }}>
-          <Accordion>
+          <Accordion {...args}>
             <AccordionSummary aria-controls="panel2-content" id="panel2-header">
               Accordion 5
             </AccordionSummary>
@@ -162,7 +184,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
           </Accordion>
         </Grid>
         <Grid size={{ xs: 12 }}>
-          <Accordion>
+          <Accordion {...args}>
             <AccordionSummary aria-controls="panel3-content" id="panel3-header">
               Accordion 6 with Actions
             </AccordionSummary>
@@ -220,6 +242,24 @@ export const _States: StoryObj<typeof Accordion> = {
           </AccordionDetails>
         </Accordion>
       </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Accordion {...args} variant="flush" defaultExpanded>
+          <AccordionSummary aria-controls="flushexpanded-content" id="flushexpanded-header">
+            Flush Expanded
+          </AccordionSummary>
+          <AccordionDetails>
+            <Accordion>
+              <AccordionSummary aria-controls="flushexpanded-nested-content" id="flushexpanded-nested-header">
+                Flush  Nested Accordion
+              </AccordionSummary>
+              <AccordionDetails>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+                blandit leo lobortis eget.
+              </AccordionDetails>
+            </Accordion>
+          </AccordionDetails>
+        </Accordion>
+      </Grid>
       <Grid size={{ xs: 12 }}>
         <Accordion {...args}>
           <AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">

package/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,50 @@ 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 }) => ({
+  border: 0,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '&&': {
+    borderRadius: 0,
+  },
+  '&: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: 8,
+    minHeight: 40,
+  },
+  '> .MuiAccordion-heading .MuiAccordionSummary-root .MuiAccordionSummary-content': {
+    margin: 0
+  },
+  '& .MuiAccordionDetails-root .MuiAccordion-heading': {
+    borderRadius: 4,
+  }
 }));
 
+const VariantComponent: Record<Variant, typeof FilledAccordion> = {
+  filled: FilledAccordion,
+  outlined: OutlinedAccordion,
+  flush: FlushAccordion
+}
+
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>((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' ? (
-    <FilledAccordion className={classnames} {...props} ref={ref} />
-  ) : (
-    <OutlinedAccordion className={classnames} {...props} ref={ref} />
-  );
+  return <Variant className={classnames} {...props} ref={ref} />;
 });