[joy-ui][Accordion] Fix incorrect display of classname (mui#38695)

mnajdova · Sep 8, 2023 · a8797ce · a8797ce
1 parent 8385f91
commit a8797ce
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 3 deletions.
diff --git a/docs/pages/joy-ui/api/accordion-group.json b/docs/pages/joy-ui/api/accordion-group.json
@@ -53,7 +53,7 @@
     "import AccordionGroup from '@mui/joy/AccordionGroup';",
     "import { AccordionGroup } from '@mui/joy';"
   ],
-  "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiAccordionGroup" },
+  "styles": { "classes": [], "globalClasses": {}, "name": "MuiAccordionGroup" },
   "slots": [
     {
       "name": "root",
@@ -62,6 +62,7 @@
       "class": ".MuiAccordionGroup-root"
     }
   ],
+  "classes": { "classes": ["sizeLg", "sizeMd", "sizeSm"], "globalClasses": {} },
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "JoyAccordionGroup",

diff --git a/docs/translations/api-docs-joy/accordion-group/accordion-group.json b/docs/translations/api-docs-joy/accordion-group/accordion-group.json
@@ -24,6 +24,23 @@
       "description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
     }
   },
-  "classDescriptions": { "root": { "description": "Class name applied to the root element." } },
+  "classDescriptions": {
+    "root": { "description": "Class name applied to the root element." },
+    "sizeSm": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"sm\"</code>"
+    },
+    "sizeMd": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"md\"</code>"
+    },
+    "sizeLg": {
+      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"lg\"</code>"
+    }
+  },
   "slotDescriptions": { "root": "The component that renders the root." }
 }
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
 import { ThemeProvider } from '@mui/joy/styles';
 import AccordionGroup, { accordionGroupClasses as classes } from '@mui/joy/AccordionGroup';
@@ -21,4 +22,22 @@ describe('<AccordionGroup />', () => {
       },
     },
   }));
+
+  describe('classes', () => {
+    (
+      [
+        { size: 'sm', class: classes.sizeSm },
+        { size: 'md', class: classes.sizeMd },
+        { size: 'lg', class: classes.sizeLg },
+      ] as const
+    ).forEach((sizeConfig) => {
+      it(`should have ${sizeConfig.class} class for ${sizeConfig.size} size `, () => {
+        const { getByTestId } = render(
+          <AccordionGroup data-testid="root" size={sizeConfig.size} />,
+        );
+
+        expect(getByTestId('root')).to.have.class(sizeConfig.class);
+      });
+    });
+  });
 });
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
@@ -25,7 +25,7 @@ const useUtilityClasses = (ownerState: AccordionGroupOwnerState) => {
       'root',
       variant && `variant${capitalize(variant)}`,
       color && `color${capitalize(color)}`,
-      size && `size${capitalize(size)}}`,
+      size && `size${capitalize(size)}`,
     ],
   };
 

diff --git a/packages/mui-joy/src/AccordionGroup/accordionGroupClasses.ts b/packages/mui-joy/src/AccordionGroup/accordionGroupClasses.ts
@@ -3,6 +3,12 @@ import { generateUtilityClass, generateUtilityClasses } from '../className';
 export interface AccordionGroupClasses {
   /** Class name applied to the root element. */
   root: string;
+  /** Class name applied to the root element if `size="sm"`. */
+  sizeSm: string;
+  /** Class name applied to the root element if `size="md"`. */
+  sizeMd: string;
+  /** Class name applied to the root element if `size="lg"`. */
+  sizeLg: string;
 }
 
 export type AccordionGroupClassKey = keyof AccordionGroupClasses;
@@ -13,6 +19,9 @@ export function getAccordionGroupUtilityClass(slot: string): string {
 
 const accordionGroupClasses: AccordionGroupClasses = generateUtilityClasses('MuiAccordionGroup', [
   'root',
+  'sizeSm',
+  'sizeMd',
+  'sizeLg',
 ]);
 
 export default accordionGroupClasses;