Panel section - classnames not being set in unstyled mode #6329

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

Hide file tree

Showing 8 changed files with 14 additions and 21 deletions.
diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { ObjectUtils } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 import { CardBase } from './CardBase';
 
 export const Card = React.forwardRef((inProps, ref) => {
@@ -96,7 +96,7 @@ export const Card = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: elementRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         CardBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/card/CardBase.js b/components/lib/card/CardBase.js
@@ -1,8 +1,7 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 const classes = {
-    root: ({ props }) => classNames('p-card p-component', props.className),
+    root: 'p-card p-component',
     header: 'p-card-header',
     title: 'p-card-title',
     subTitle: 'p-card-subtitle',

diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect, useUnmountEffect } from '../hooks/Hooks';
-import { DomHandler, UniqueComponentId } from '../utils/Utils';
+import { DomHandler, UniqueComponentId, classNames } from '../utils/Utils';
 import { ScrollPanelBase } from './ScrollPanelBase';
 
 export const ScrollPanel = React.forwardRef((inProps, ref) => {
@@ -287,7 +287,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
             id: props.id,
             ref: containerRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         ScrollPanelBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/scrollpanel/ScrollPanelBase.js b/components/lib/scrollpanel/ScrollPanelBase.js
@@ -1,5 +1,4 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 export const ScrollPanelBase = ComponentBase.extend({
     defaultProps: {
@@ -12,7 +11,7 @@ export const ScrollPanelBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) => classNames('p-scrollpanel p-component', props.className),
+            root: 'p-scrollpanel p-component',
             wrapper: 'p-scrollpanel-wrapper',
             content: 'p-scrollpanel-content',
             barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',

diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
@@ -6,7 +6,7 @@ import { ChevronLeftIcon } from '../icons/chevronleft';
 import { ChevronRightIcon } from '../icons/chevronright';
 import { TimesIcon } from '../icons/times';
 import { Ripple } from '../ripple/Ripple';
-import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { TabPanelBase, TabViewBase } from './TabViewBase';
 
 export const TabPanel = () => {};
@@ -566,7 +566,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
             id: idState,
             ref: elementRef,
             style: props.style,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         TabViewBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js
@@ -9,13 +9,9 @@ const classes = {
     prevbutton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
     nextbutton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
     root: ({ props }) =>
-        classNames(
-            'p-tabview p-component',
-            {
-                'p-tabview-scrollable': props.scrollable
-            },
-            props.className
-        ),
+        classNames('p-tabview p-component', {
+            'p-tabview-scrollable': props.scrollable
+        }),
     navcontainer: 'p-tabview-nav-container',
     tab: {
         header: ({ selected, disabled, headerClassName, _className }) => classNames('p-unselectable-text', { 'p-tabview-selected p-highlight': selected, 'p-disabled': disabled }, headerClassName, _className),

diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
-import { ObjectUtils } from '../utils/Utils';
+import { ObjectUtils, classNames } from '../utils/Utils';
 import { ToolbarBase } from './ToolbarBase';
 
 export const Toolbar = React.memo(
@@ -51,7 +51,7 @@ export const Toolbar = React.memo(
                 id: props.id,
                 ref: elementRef,
                 style: props.style,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 role: 'toolbar'
             },
             ToolbarBase.getOtherProps(props),

diff --git a/components/lib/toolbar/ToolbarBase.js b/components/lib/toolbar/ToolbarBase.js
@@ -1,5 +1,4 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { classNames } from '../utils/Utils';
 
 export const ToolbarBase = ComponentBase.extend({
     defaultProps: {
@@ -16,7 +15,7 @@ export const ToolbarBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) => classNames('p-toolbar p-component', props.className),
+            root: 'p-toolbar p-component',
             start: 'p-toolbar-group-start p-toolbar-group-left',
             center: 'p-toolbar-group-center',
             end: 'p-toolbar-group-end p-toolbar-group-right'