Menu Section - classnames not being set in unstyled mode #6329

primefaces · Apr 9, 2024 · 0909626 · 0909626
1 parent f5207ba
commit 0909626
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 26 deletions.
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronRightIcon } from '../icons/chevronright';
-import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { BreadCrumbBase } from './BreadCrumbBase';
 
 export const BreadCrumb = React.memo(
@@ -243,7 +243,7 @@ export const BreadCrumb = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             BreadCrumbBase.getOtherProps(props),

diff --git a/components/lib/breadcrumb/BreadCrumbBase.js b/components/lib/breadcrumb/BreadCrumbBase.js
@@ -10,7 +10,7 @@ const classes = {
     separator: 'p-menuitem-separator',
     menuitem: ({ item }) => classNames('p-menuitem', item.className, { 'p-disabled': item.disabled }),
     menu: 'p-breadcrumb-list',
-    root: ({ props }) => classNames('p-breadcrumb p-component', props.className)
+    root: 'p-breadcrumb p-component'
 };
 
 const styles = `

diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
@@ -429,7 +429,7 @@ export const PanelMenu = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 id: props.id,
                 style: props.style
             },

diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
@@ -10,7 +10,7 @@ const classes = {
     header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active && !!item.items, 'p-disabled': item.disabled }),
     headerContent: 'p-panelmenu-header-content',
     menuContent: 'p-panelmenu-content',
-    root: ({ props }) => classNames('p-panelmenu p-component', props.className),
+    root: 'p-panelmenu p-component',
     separator: 'p-menuitem-separator',
     toggleableContent: ({ active }) =>
         classNames('p-toggleable-content', {

diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
@@ -282,7 +282,7 @@ export const Steps = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             StepsBase.getOtherProps(props),

diff --git a/components/lib/steps/StepsBase.js b/components/lib/steps/StepsBase.js
@@ -12,13 +12,9 @@ const classes = {
             'p-disabled': disabled
         }),
     root: ({ props }) =>
-        classNames(
-            'p-steps p-component',
-            {
-                'p-readonly': props.readOnly
-            },
-            props.className
-        )
+        classNames('p-steps p-component', {
+            'p-readonly': props.readOnly
+        })
 };
 
 const styles = `

diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
@@ -329,7 +329,7 @@ export const TabMenu = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style
                 },
                 TabMenuBase.getOtherProps(props),

diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js
@@ -16,7 +16,7 @@ const classes = {
         ),
     inkbar: 'p-tabmenu-ink-bar',
     menu: 'p-tabmenu-nav p-reset',
-    root: ({ props }) => classNames('p-tabmenu p-component', props.className)
+    root: 'p-tabmenu p-component'
 };
 
 const styles = `

diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
@@ -5,7 +5,7 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { TieredMenuBase } from './TieredMenuBase';
 import { TieredMenuSub } from './TieredMenuSub';
 
@@ -682,7 +682,7 @@ export const TieredMenu = React.memo(
                 {
                     ref: containerRef,
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     onClick: onPanelClick
                 },

diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js
@@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, context }) =>
-        classNames(
-            'p-tieredmenu p-component',
-            {
-                'p-tieredmenu-overlay': props.popup,
-                'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
-                'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
-            },
-            props.className
-        ),
+        classNames('p-tieredmenu p-component', {
+            'p-tieredmenu-overlay': props.popup,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
     separator: 'p-menuitem-separator',
     icon: ({ _icon }) => classNames('p-menuitem-icon', _icon),
     content: 'p-menuitem-content',