Multiple Components: classnames not being set in unstyled mode

[peconomou929]

Describe the bug

This bug applies to many different components (listed below). The issue is that, when in unstyled mode, any class names given to the component are not propagated properly. For example, if I have <TabMenu className="my-menu" unstyled/> then, upon inspecting the DOM, you will see that the root of the tab menu does NOT have the class name "my-menu."

This issue has already been raised for the InputText component. However, it is much more widespread than this. I have not physically tested it for different components, but, upon inspecting the code (grepping for the string className: cx('root'), I suspect it is an issue for the components listed below. The solution for these components should be the same as for the InputText, which can be found in the this PR.

Components Affected:

• BlockUi
• OverlayPanel
• SideBar
• ToggleButton
• IconField
• Dialog
• Knob
• FileUpload
• Password
• Mention
• Chart
• ScrollPanel
• TabView
• Card
• Steps
• BreadCrumb
• TreeSelect
• PanelMenu
• TabMenu
• CascadeSelect
• SlideMenu
• ConfirmPopup
• ColorPicker
• Slider
• Rating
• SelectButton
• TieredMenu
• Image
• Toolbar
• InputTextArea

Reproducer

No response

PrimeReact version

10.6.2

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Create a tab menu as follows: <TabMenu className="my-menu" unstyled/>
2. Observe in the rendered DOM that the root of the tab menu does NOT have the class name "my-menu."

Expected behavior

Any class names passed to a component should be appended to the default class names, even when we are in unstyled mode.

[gucal]

Thank you for the detailed information.
We will fix it all as soon as possible and make it ready for the new version.
Best regards!