[Accordion][joy-ui] Unexpected character } in the class name, warnings in the console when using own color, variant or size

[Bestwebdesign]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://stackblitz.com/edit/react-ycprbf?file=Demo.js

Steps:

1. Open the attached link
2. Inspect the root element of the AccordionGroup component to see a class name containing an unexpected character }.
3. Open console to see the warning:

Warning: Failed prop type: Invalid prop color of value secondary supplied to ForwardRef(AccordionGroup), expected one of ["danger","neutral","primary","success","warning"].

Current behavior 😯

The attached file demonstrates two issues:

1. The class name generated for the selected size contains an unexpected character }, example: MuiAccordionGroup-sizeMd}.
2. Passing own color, variant or size to the AccordionGroup component generates a warning in the console.

Expected behavior 🤔

1. The class name should not contain } at the end.
2. Using your own color, variant or size should not generate a warning in the console.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[sai6855]

The class name should not contain } at the end.

It's coming from this line, i'm opening a PR
https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/AccordionGroup/AccordionGroup.tsx#L28

EDIT:
PR: #38695

[sai6855]

Not really sure what's the appropriate fix for console warnings when custom sizes are used. I'll let @siriwatknp answer this

[siriwatknp]

@sai6855 custom color should not produce a warning. The proptype is missing PropTypes.string, would you like to fix this?

- color: PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']),
+ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+     PropTypes.oneOf(['danger', 'neutral', 'primary', 'success', 'warning']),
+     PropTypes.string,
+   ]),

[sai6855]

Yup, I'll open a PR