[joy-ui][AccordionGroup] Fix console warning when using custom color (#…

…38950)
mui · Sep 18, 2023 · 1895fc3 · 1895fc3
1 parent 806f84c
commit 1895fc3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/docs/pages/joy-ui/api/accordion-group.json b/docs/pages/joy-ui/api/accordion-group.json
@@ -3,16 +3,19 @@
     "children": { "type": { "name": "node" } },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'danger'<br>&#124;&nbsp;'neutral'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+        "name": "union",
+        "description": "'danger'<br>&#124;&nbsp;'neutral'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'neutral'",
       "additionalInfo": { "joy-color": true }
     },
     "component": { "type": { "name": "elementType" } },
     "disableDivider": { "type": { "name": "bool" }, "default": "false" },
     "size": {
-      "type": { "name": "enum", "description": "'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'" },
+      "type": {
+        "name": "union",
+        "description": "'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;string"
+      },
       "default": "'md'",
       "additionalInfo": { "joy-size": true }
     },
@@ -41,8 +44,8 @@
     },
     "variant": {
       "type": {
-        "name": "enum",
-        "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'"
+        "name": "union",
+        "description": "'outlined'<br>&#124;&nbsp;'plain'<br>&#124;&nbsp;'soft'<br>&#124;&nbsp;'solid'<br>&#124;&nbsp;string"
       },
       "default": "'plain'",
       "additionalInfo": { "joy-variant": true }

diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.test.tsx
@@ -76,4 +76,11 @@ describe('<AccordionGroup />', () => {
 
     describeJoyColorInversion(<AccordionGroup />, { muiName: 'JoyAccordionGroup', classes });
   });
+
+  it('should not warn when using custom color, variant, size', () => {
+    expect(() => {
+      // @ts-expect-error as `custom` color, varaint, size is not part of the type system
+      render(<AccordionGroup color="custom" variant="custom" size="custom" />);
+    }).not.toErrorDev();
+  });
 });
diff --git a/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx b/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx
@@ -141,7 +141,10 @@ AccordionGroup.propTypes /* remove-proptypes */ = {
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'neutral'
    */
-  color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']),
+    PropTypes.string,
+  ]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -156,7 +159,10 @@ AccordionGroup.propTypes /* remove-proptypes */ = {
    * The size of the component (affect other nested list* components).
    * @default 'md'
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['sm', 'md', 'lg']),
+    PropTypes.string,
+  ]),
   /**
    * The props used for each slot inside.
    * @default {}
@@ -194,7 +200,10 @@ AccordionGroup.propTypes /* remove-proptypes */ = {
    * The [global variant](https://mui.com/joy-ui/main-features/global-variants/) to use.
    * @default 'plain'
    */
-  variant: PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['outlined', 'plain', 'soft', 'solid']),
+    PropTypes.string,
+  ]),
 } as any;
 
 export default AccordionGroup;