From 6d76a4979693b087bcc825da36f267d705998842 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 9 Apr 2024 11:37:58 +0300 Subject: [PATCH 1/5] Overlay Section - Classnames not being set in unstyled mode #6329 --- components/lib/confirmpopup/ConfirmPopup.js | 2 +- components/lib/dialog/Dialog.js | 4 ++-- components/lib/dialog/DialogBase.js | 2 +- components/lib/overlaypanel/OverlayPanel.js | 4 ++-- components/lib/overlaypanel/OverlayPanelBase.js | 2 +- components/lib/sidebar/Sidebar.js | 4 ++-- components/lib/sidebar/SidebarBase.js | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js index 44836aaeba..0cf5b68f43 100644 --- a/components/lib/confirmpopup/ConfirmPopup.js +++ b/components/lib/confirmpopup/ConfirmPopup.js @@ -353,7 +353,7 @@ export const ConfirmPopup = React.memo( { ref: overlayRef, id: getPropValue('id'), - className: cx('root', { context, getPropValue }), + className: classNames(props.className, cx('root', { context, getPropValue })), style: getPropValue('style'), onClick: onPanelClick }, diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index b5452ddeb1..9b22c407a0 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -8,7 +8,7 @@ import { WindowMaximizeIcon } from '../icons/windowmaximize'; import { WindowMinimizeIcon } from '../icons/windowminimize'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { DialogBase } from './DialogBase'; export const Dialog = React.forwardRef((inProps, ref) => { @@ -714,7 +714,7 @@ export const Dialog = React.forwardRef((inProps, ref) => { { ref: dialogRef, id: idState, - className: cx('root', { props, maximized, context }), + className: classNames(props.className, cx('root', { props, maximized, context })), style: props.style, onClick: props.onClick, role: 'dialog', diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js index affa53ccca..d3a88ac409 100644 --- a/components/lib/dialog/DialogBase.js +++ b/components/lib/dialog/DialogBase.js @@ -29,7 +29,7 @@ const classes = { ); }, root: ({ props, maximized, context }) => - classNames('p-dialog p-component', props.className, { + classNames('p-dialog p-component', { 'p-dialog-rtl': props.rtl, 'p-dialog-maximized': maximized, 'p-dialog-default': !maximized, diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js index 28b5348e03..08deb96a7d 100644 --- a/components/lib/overlaypanel/OverlayPanel.js +++ b/components/lib/overlaypanel/OverlayPanel.js @@ -7,7 +7,7 @@ import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { OverlayPanelBase } from './OverlayPanelBase'; export const OverlayPanel = React.forwardRef((inProps, ref) => { @@ -266,7 +266,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { const rootProps = mergeProps( { id: props.id, - className: cx('root', { context }), + className: classNames(props.className, cx('root', { context })), style: props.style, onClick: (e) => onPanelClick(e) }, diff --git a/components/lib/overlaypanel/OverlayPanelBase.js b/components/lib/overlaypanel/OverlayPanelBase.js index 21aedc35cf..d3f9a8c8a0 100644 --- a/components/lib/overlaypanel/OverlayPanelBase.js +++ b/components/lib/overlaypanel/OverlayPanelBase.js @@ -4,7 +4,7 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props, context }) => - classNames('p-overlaypanel p-component', props.className, { + classNames('p-overlaypanel p-component', { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js index 25fc2a79e3..1cac18042e 100644 --- a/components/lib/sidebar/Sidebar.js +++ b/components/lib/sidebar/Sidebar.js @@ -6,7 +6,7 @@ import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlob import { TimesIcon } from '../icons/times'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { SidebarBase } from './SidebarBase'; export const Sidebar = React.forwardRef((inProps, ref) => { @@ -215,7 +215,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => { const rootProps = mergeProps( { id: props.id, - className: cx('root', { context }), + className: classNames(props.className, cx('root', { context })), style: props.style, role: 'complementary' }, diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js index 452538ec61..922a73c8bb 100644 --- a/components/lib/sidebar/SidebarBase.js +++ b/components/lib/sidebar/SidebarBase.js @@ -28,7 +28,7 @@ const classes = { content: 'p-sidebar-content', icons: 'p-sidebar-icons', root: ({ props, context }) => - classNames('p-sidebar p-component', props.className, { + classNames('p-sidebar p-component', { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), From f5207ba65db7017fc4fddc28ac2b257f2d24d4a4 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 9 Apr 2024 11:39:26 +0300 Subject: [PATCH 2/5] Misc Section - classnames not being set in unstyled mode #6329 --- components/lib/blockui/BlockUI.js | 2 +- components/lib/blockui/BlockUIBase.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index e5872a593d..777d1b489a 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -124,7 +124,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => { id: props.id, ref: elementRef, style: props.containerStyle, - className: cx('root'), + className: classNames(props.containerClassName, cx('root')), 'aria-busy': props.blocked }, BlockUIBase.getOtherProps(props), diff --git a/components/lib/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js index fd5e10a005..0a3e3f7e75 100644 --- a/components/lib/blockui/BlockUIBase.js +++ b/components/lib/blockui/BlockUIBase.js @@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames('p-blockui-container', props.containerClassName), + root: 'p-blockui-container', mask: ({ props }) => classNames('p-blockui p-component-overlay p-component-overlay-enter', { 'p-blockui-document': props.fullScreen From 0909626ef7b8c3f2438e4d68a5d0a465b07437c3 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 9 Apr 2024 11:41:23 +0300 Subject: [PATCH 3/5] Menu Section - classnames not being set in unstyled mode #6329 --- components/lib/breadcrumb/BreadCrumb.js | 4 ++-- components/lib/breadcrumb/BreadCrumbBase.js | 2 +- components/lib/panelmenu/PanelMenu.js | 2 +- components/lib/panelmenu/PanelMenuBase.js | 2 +- components/lib/steps/Steps.js | 2 +- components/lib/steps/StepsBase.js | 10 +++------- components/lib/tabmenu/TabMenu.js | 2 +- components/lib/tabmenu/TabMenuBase.js | 2 +- components/lib/tieredmenu/TieredMenu.js | 4 ++-- components/lib/tieredmenu/TieredMenuBase.js | 14 +++++--------- 10 files changed, 18 insertions(+), 26 deletions(-) diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index bc836c3199..db845ec77a 100644 --- 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 index 70f0b0ce31..4193c44914 100644 --- 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 index 5507a5f463..b9ff158bae 100644 --- 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 index 25f5e5d08c..4ea25c7ecb 100644 --- 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 index d9c64d538b..c0ca977276 100644 --- 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 index dfa09583a7..f3dd6f1bac 100644 --- 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 index 9a1af9a82f..778b6ce57d 100644 --- 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 index e07f058bdb..19585bc5d7 100644 --- 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 index 81b086c797..9c65acad12 100644 --- 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 index 0084886dbd..0966c3e009 100644 --- 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', From 36f1358f4cee71e7346e33a52cab0ebd13fbf488 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 9 Apr 2024 11:43:39 +0300 Subject: [PATCH 4/5] Panel section - classnames not being set in unstyled mode #6329 --- components/lib/card/Card.js | 4 ++-- components/lib/card/CardBase.js | 3 +-- components/lib/scrollpanel/ScrollPanel.js | 4 ++-- components/lib/scrollpanel/ScrollPanelBase.js | 3 +-- components/lib/tabview/TabView.js | 4 ++-- components/lib/tabview/TabViewBase.js | 10 +++------- components/lib/toolbar/Toolbar.js | 4 ++-- components/lib/toolbar/ToolbarBase.js | 3 +-- 8 files changed, 14 insertions(+), 21 deletions(-) diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js index 5762d3da0e..a12ec9c1ac 100644 --- 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 index d1ca05c987..23c4210d3d 100644 --- 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 index 41bc187ae0..77118b573e 100644 --- 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 index 1db438537f..ef6ad83723 100644 --- 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 index fe09014f13..f60733419d 100644 --- 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 index b658ed6306..bcfd63832d 100644 --- 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 index 293d4feb45..f997644b19 100644 --- 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 index 3dd5054015..94797a2565 100644 --- 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' From 6ac1fb625797668345acf12678f2431a1a13e112 Mon Sep 17 00:00:00 2001 From: gucal Date: Tue, 9 Apr 2024 11:45:54 +0300 Subject: [PATCH 5/5] #6329 - classnames not being set in unstyled mode --- components/lib/cascadeselect/CascadeSelect.js | 4 ++-- .../lib/cascadeselect/CascadeSelectBase.js | 20 +++++++--------- components/lib/chart/Chart.js | 3 ++- components/lib/chart/ChartBase.js | 3 +-- components/lib/colorpicker/ColorPicker.js | 4 ++-- components/lib/colorpicker/ColorPickerBase.js | 10 +++----- components/lib/fileupload/FileUpload.js | 2 +- components/lib/iconfield/IconField.js | 5 ++-- components/lib/image/Image.js | 2 +- components/lib/image/ImageBase.js | 2 +- components/lib/inputtextarea/InputTextarea.js | 4 ++-- .../lib/inputtextarea/InputTextareaBase.js | 18 ++++++-------- components/lib/knob/Knob.js | 3 ++- components/lib/knob/KnobBase.js | 10 +++----- components/lib/mention/Mention.js | 4 ++-- components/lib/mention/MentionBase.js | 12 ++++------ components/lib/password/Password.js | 2 +- components/lib/password/PasswordBase.js | 14 ++++------- components/lib/rating/Rating.js | 4 ++-- components/lib/rating/RatingBase.js | 12 ++++------ components/lib/selectbutton/SelectButton.js | 4 ++-- .../lib/selectbutton/SelectButtonBase.js | 2 +- components/lib/slidemenu/SlideMenu.js | 4 ++-- components/lib/slidemenu/SlideMenuBase.js | 10 +++----- components/lib/slider/Slider.js | 4 ++-- components/lib/slider/SliderBase.js | 2 +- components/lib/togglebutton/ToggleButton.js | 4 ++-- .../lib/togglebutton/ToggleButtonBase.js | 14 ++++------- components/lib/treeselect/TreeSelect.js | 4 ++-- components/lib/treeselect/TreeSelectBase.js | 24 ++++++++----------- 30 files changed, 86 insertions(+), 124 deletions(-) diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js index 8f6c81f75d..0d726dda99 100644 --- a/components/lib/cascadeselect/CascadeSelect.js +++ b/components/lib/cascadeselect/CascadeSelect.js @@ -7,7 +7,7 @@ import { ChevronDownIcon } from '../icons/chevrondown'; import { SpinnerIcon } from '../icons/spinner'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { CascadeSelectBase } from './CascadeSelectBase'; import { CascadeSelectSub } from './CascadeSelectSub'; @@ -471,7 +471,7 @@ export const CascadeSelect = React.memo( { id: props.id, ref: elementRef, - className: cx('root', { focusedState, overlayVisibleState, context }), + className: classNames(props.className, cx('root', { focusedState, overlayVisibleState, context })), style: props.style, onClick: (e) => onClick(e) }, diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js index c5e1ad9c10..74c6d100e6 100644 --- a/components/lib/cascadeselect/CascadeSelectBase.js +++ b/components/lib/cascadeselect/CascadeSelectBase.js @@ -3,18 +3,14 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props, focusedState, overlayVisibleState, context }) => - classNames( - 'p-cascadeselect p-component p-inputwrapper', - { - 'p-disabled': props.disabled, - 'p-invalid': props.invalid, - 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled', - 'p-focus': focusedState, - 'p-inputwrapper-filled': props.value, - 'p-inputwrapper-focus': focusedState || overlayVisibleState - }, - props.className - ), + classNames('p-cascadeselect p-component p-inputwrapper', { + 'p-disabled': props.disabled, + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled', + 'p-focus': focusedState, + 'p-inputwrapper-filled': props.value, + 'p-inputwrapper-focus': focusedState || overlayVisibleState + }), label: ({ props, label }) => classNames('p-cascadeselect-label ', { 'p-placeholder': label === props.placeholder, diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js index 75207de71b..94984315ff 100644 --- a/components/lib/chart/Chart.js +++ b/components/lib/chart/Chart.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps, useUnmountEffect } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { ChartBase } from './ChartBase'; // GitHub #3059 wrapper if loaded by script tag @@ -96,7 +97,7 @@ const PrimeReactChart = React.memo( id: props.id, ref: elementRef, style: sx('root'), - className: cx('root') + className: classNames(props.className, cx('root')) }, ChartBase.getOtherProps(props), ptm('root') diff --git a/components/lib/chart/ChartBase.js b/components/lib/chart/ChartBase.js index 575ed666df..cb03aa81c1 100644 --- a/components/lib/chart/ChartBase.js +++ b/components/lib/chart/ChartBase.js @@ -1,5 +1,4 @@ import { ComponentBase } from '../componentbase/ComponentBase'; -import { classNames } from '../utils/Utils'; export const ChartBase = ComponentBase.extend({ defaultProps: { @@ -17,7 +16,7 @@ export const ChartBase = ComponentBase.extend({ }, css: { classes: { - root: ({ props }) => classNames('p-chart', props.className) + root: 'p-chart' }, inlineStyles: { root: ({ props }) => diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js index 74200a0330..8be0c82a4a 100644 --- a/components/lib/colorpicker/ColorPicker.js +++ b/components/lib/colorpicker/ColorPicker.js @@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase'; import { useEventListener, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { ColorPickerBase } from './ColorPickerBase'; import { ColorPickerPanel } from './ColorPickerPanel'; @@ -650,7 +650,7 @@ export const ColorPicker = React.memo( id: props.id, ref: elementRef, style: props.style, - className: cx('root') + className: classNames(props.className, cx('root')) }, ColorPickerBase.getOtherProps(props), ptm('root') diff --git a/components/lib/colorpicker/ColorPickerBase.js b/components/lib/colorpicker/ColorPickerBase.js index 2727b4d710..800ed104a2 100644 --- a/components/lib/colorpicker/ColorPickerBase.js +++ b/components/lib/colorpicker/ColorPickerBase.js @@ -4,13 +4,9 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props }) => - classNames( - 'p-colorpicker p-component', - { - 'p-colorpicker-overlay': !props.inline - }, - props.className - ), + classNames('p-colorpicker p-component', { + 'p-colorpicker-overlay': !props.inline + }), input: ({ props }) => classNames('p-colorpicker-preview p-inputtext', props.inputClassName, { 'p-disabled': props.disabled diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index 9dfdb9be7f..ab6b76d17d 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -646,7 +646,7 @@ export const FileUpload = React.memo( const rootProps = mergeProps( { id: props.id, - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style }, FileUploadBase.getOtherProps(props), diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js index a4ef6c66ee..59845ed00e 100644 --- a/components/lib/iconfield/IconField.js +++ b/components/lib/iconfield/IconField.js @@ -1,6 +1,7 @@ import React, { useContext, useRef } from 'react'; -import { useMergeProps } from '../hooks/Hooks'; import { PrimeReactContext } from '../api/Api'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { IconFieldBase } from './IconFieldBase'; export const IconField = React.memo( @@ -20,7 +21,7 @@ export const IconField = React.memo( const rootProps = mergeProps( { - className: cx('root', { iconPosition: props.iconPosition }) + className: classNames(props.className, cx('root', { iconPosition: props.iconPosition })) }, IconFieldBase.getOtherProps(props), ptm('root') diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js index c32a7ff1b8..58fcc1e379 100644 --- a/components/lib/image/Image.js +++ b/components/lib/image/Image.js @@ -384,7 +384,7 @@ export const Image = React.memo( const rootProps = mergeProps( { ref: elementRef, - className: cx('root') + className: classNames(props.className, cx('root')) }, ImageBase.getOtherProps(props), ptm('root') diff --git a/components/lib/image/ImageBase.js b/components/lib/image/ImageBase.js index 572a107ac6..bd83163719 100644 --- a/components/lib/image/ImageBase.js +++ b/components/lib/image/ImageBase.js @@ -14,7 +14,7 @@ const classes = { preview: 'p-image-preview', icon: 'p-image-preview-icon', root: ({ props }) => - classNames('p-image p-component', props.className, { + classNames('p-image p-component', { 'p-image-preview-container': props.preview }), transition: 'p-image-preview' diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js index eb8b514e98..f0b502f6a6 100644 --- a/components/lib/inputtextarea/InputTextarea.js +++ b/components/lib/inputtextarea/InputTextarea.js @@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps } from '../hooks/Hooks'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { InputTextareaBase } from './InputTextareaBase'; export const InputTextarea = React.memo( @@ -127,7 +127,7 @@ export const InputTextarea = React.memo( const rootProps = mergeProps( { ref: elementRef, - className: cx('root', { context, isFilled }), + className: classNames(props.className, cx('root', { context, isFilled })), onFocus: onFocus, onBlur: onBlur, onKeyUp: onKeyUp, diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js index 59f831c0c4..21e839d36c 100644 --- a/components/lib/inputtextarea/InputTextareaBase.js +++ b/components/lib/inputtextarea/InputTextareaBase.js @@ -3,17 +3,13 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props, context, isFilled }) => - classNames( - 'p-inputtextarea p-inputtext p-component', - { - 'p-disabled': props.disabled, - 'p-filled': isFilled, - 'p-inputtextarea-resizable': props.autoResize, - 'p-invalid': props.invalid, - 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' - }, - props.className - ) + classNames('p-inputtextarea p-inputtext p-component', { + 'p-disabled': props.disabled, + 'p-filled': isFilled, + 'p-inputtextarea-resizable': props.autoResize, + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' + }) }; const styles = ` diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js index aa1da5c665..092893dee8 100644 --- a/components/lib/knob/Knob.js +++ b/components/lib/knob/Knob.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useEventListener, useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; import { KnobBase } from './KnobBase'; const radius = 40; @@ -243,7 +244,7 @@ export const Knob = React.memo( { ref: elementRef, id: props.id, - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style }, ptm('root') diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js index b16dca1f6c..3614ce334e 100644 --- a/components/lib/knob/KnobBase.js +++ b/components/lib/knob/KnobBase.js @@ -31,13 +31,9 @@ export const KnobBase = ComponentBase.extend({ value: 'p-knob-value', label: 'p-knob-text', root: ({ props }) => - classNames( - 'p-knob p-component', - { - 'p-disabled': props.disabled - }, - props.className - ) + classNames('p-knob p-component', { + 'p-disabled': props.disabled + }) }, styles: ` @keyframes dash-frame { diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index 55e52c5c71..0e7e3e76e1 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -7,7 +7,7 @@ import { InputTextarea } from '../inputtextarea/InputTextarea'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils'; import { MentionBase } from './MentionBase'; export const Mention = React.memo( @@ -550,7 +550,7 @@ export const Mention = React.memo( { ref: elementRef, id: props.id, - className: cx('root', { focusedState, isFilled }), + className: classNames(props.className, cx('root', { focusedState, isFilled })), style: props.style }, MentionBase.getOtherProps(props), diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js index d8ff46ae7d..553ef49f8e 100644 --- a/components/lib/mention/MentionBase.js +++ b/components/lib/mention/MentionBase.js @@ -10,14 +10,10 @@ const classes = { panel: ({ props }) => classNames('p-mention-panel p-component', props.panelClassName), input: ({ props }) => classNames('p-mention-input', props.inputClassName), root: ({ props, isFilled, focusedState }) => - classNames( - 'p-mention p-component p-inputwrapper', - { - 'p-inputwrapper-filled': isFilled, - 'p-inputwrapper-focus': focusedState - }, - props.className - ), + classNames('p-mention p-component p-inputwrapper', { + 'p-inputwrapper-filled': isFilled, + 'p-inputwrapper-focus': focusedState + }), transition: 'p-connected-overlay' }; diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index 87f6156e90..d85f7b60d7 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -445,7 +445,7 @@ export const Password = React.memo( { ref: elementRef, id: props.id, - className: cx('root', { isFilled, focusedState }), + className: classNames(props.className, cx('root', { isFilled, focusedState })), style: props.style }, ptm('root') diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js index 16ef732bf2..e1b3b197b0 100644 --- a/components/lib/password/PasswordBase.js +++ b/components/lib/password/PasswordBase.js @@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props, isFilled, focusedState }) => - classNames( - 'p-password p-component p-inputwrapper', - { - 'p-inputwrapper-filled': isFilled, - 'p-inputwrapper-focus': focusedState, - 'p-input-icon-right': props.toggleMask - }, - props.className - ), + classNames('p-password p-component p-inputwrapper', { + 'p-inputwrapper-filled': isFilled, + 'p-inputwrapper-focus': focusedState, + 'p-input-icon-right': props.toggleMask + }), input: ({ props }) => classNames('p-password-input', props.inputClassName), panel: ({ props, context }) => classNames('p-password-panel p-component', props.panelClassName, { diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index e5efe1fc71..4b50af41dc 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -6,7 +6,7 @@ import { BanIcon } from '../icons/ban'; import { StarIcon } from '../icons/star'; import { StarFillIcon } from '../icons/starfill'; import { Tooltip } from '../tooltip/Tooltip'; -import { IconUtils, ObjectUtils } from '../utils/Utils'; +import { IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { RatingBase } from './RatingBase'; export const Rating = React.memo( @@ -198,7 +198,7 @@ export const Rating = React.memo( { ref: elementRef, id: props.id, - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style }, RatingBase.getOtherProps(props), diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js index 26321d6d55..d2cbc666f7 100644 --- a/components/lib/rating/RatingBase.js +++ b/components/lib/rating/RatingBase.js @@ -7,14 +7,10 @@ const classes = { cancelIcon: 'p-rating-icon p-rating-cancel', cancelItem: 'p-rating-item p-rating-cancel-item', root: ({ props }) => - classNames( - 'p-rating', - { - 'p-disabled': props.disabled, - 'p-readonly': props.readOnly - }, - props.className - ) + classNames('p-rating', { + 'p-disabled': props.disabled, + 'p-readonly': props.readOnly + }) }; const styles = ` diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js index 39fcd15108..62a154b6a4 100644 --- a/components/lib/selectbutton/SelectButton.js +++ b/components/lib/selectbutton/SelectButton.js @@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { SelectButtonBase } from './SelectButtonBase'; import { SelectButtonItem } from './SelectButtonItem'; @@ -140,7 +140,7 @@ export const SelectButton = React.memo( { ref: elementRef, id: props.id, - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style, role: 'group' }, diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js index 6576fefee6..e72c5ed614 100644 --- a/components/lib/selectbutton/SelectButtonBase.js +++ b/components/lib/selectbutton/SelectButtonBase.js @@ -2,7 +2,7 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames('p-selectbutton p-button-group p-component', props.className, { 'p-invalid': props.invalid }), + root: ({ props }) => classNames('p-selectbutton p-button-group p-component', { 'p-invalid': props.invalid }), button: ({ itemProps: props, focusedState }) => classNames('p-button p-component', { 'p-highlight': props.selected, diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js index 6f5e90ad86..6db1fe25a3 100644 --- a/components/lib/slidemenu/SlideMenu.js +++ b/components/lib/slidemenu/SlideMenu.js @@ -6,7 +6,7 @@ import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, use import { ChevronLeftIcon } from '../icons/chevronleft'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { SlideMenuBase } from './SlideMenuBase'; import { SlideMenuSub } from './SlideMenuSub'; @@ -175,7 +175,7 @@ export const SlideMenu = React.memo( { ref: menuRef, id: props.id, - className: cx('root'), + className: classNames(props.className, cx('root')), style: props.style, onClick: (e) => onPanelClick(e) }, diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js index c9c19a136e..3dcdd5ef97 100644 --- a/components/lib/slidemenu/SlideMenuBase.js +++ b/components/lib/slidemenu/SlideMenuBase.js @@ -9,13 +9,9 @@ const classes = { 'p-slidemenu-separator': levelState > 0 }), root: ({ props }) => - classNames( - 'p-slidemenu p-component', - { - 'p-slidemenu-overlay': props.popup - }, - props.className - ), + classNames('p-slidemenu p-component', { + 'p-slidemenu-overlay': props.popup + }), wrapper: 'p-slidemenu-wrapper', content: 'p-slidemenu-content', separator: 'p-slidemenu-separator', diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js index e291592e6a..c599f6e1b1 100644 --- a/components/lib/slider/Slider.js +++ b/components/lib/slider/Slider.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useEventListener, useMergeProps } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils } from '../utils/Utils'; +import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { SliderBase } from './SliderBase'; export const Slider = React.memo( @@ -358,7 +358,7 @@ export const Slider = React.memo( const rootProps = mergeProps( { style: props.style, - className: cx('root', { vertical, horizontal }), + className: classNames(props.className, cx('root', { vertical, horizontal })), onClick: onBarClick }, SliderBase.getOtherProps(props), diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js index 8e99753678..b9623e44d7 100644 --- a/components/lib/slider/SliderBase.js +++ b/components/lib/slider/SliderBase.js @@ -10,7 +10,7 @@ const classes = { }), range: 'p-slider-range', root: ({ props, vertical, horizontal }) => - classNames('p-slider p-component', props.className, { + classNames('p-slider p-component', { 'p-disabled': props.disabled, 'p-slider-horizontal': horizontal, 'p-slider-vertical': vertical diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index dfd7c059a2..08cdc487ca 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -4,7 +4,7 @@ import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps, useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; -import { DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils'; import { ToggleButtonBase } from './ToggleButtonBase'; export const ToggleButton = React.memo( @@ -101,7 +101,7 @@ export const ToggleButton = React.memo( { ref: elementRef, id: props.id, - className: cx('root', { hasIcon, hasLabel }), + className: classNames(props.className, cx('root', { hasIcon, hasLabel })), 'data-p-highlight': props.checked, 'data-p-disabled': props.disabled }, diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js index b2092977e8..1f8bc70bc9 100644 --- a/components/lib/togglebutton/ToggleButtonBase.js +++ b/components/lib/togglebutton/ToggleButtonBase.js @@ -3,15 +3,11 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props }) => - classNames( - 'p-togglebutton p-component', - { - 'p-disabled': props.disabled, - 'p-highlight': props.checked, - 'p-invalid': props.invalid - }, - props.className - ), + classNames('p-togglebutton p-component', { + 'p-disabled': props.disabled, + 'p-highlight': props.checked, + 'p-invalid': props.invalid + }), input: 'p-togglebutton-input', box: ({ hasIcon, hasLabel }) => classNames('p-button p-component', { diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js index f78ad7ff61..43b0ec1963 100644 --- a/components/lib/treeselect/TreeSelect.js +++ b/components/lib/treeselect/TreeSelect.js @@ -9,7 +9,7 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { Tree } from '../tree/Tree'; -import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils'; import { TreeSelectBase } from './TreeSelectBase'; import { TreeSelectPanel } from './TreeSelectPanel'; @@ -840,7 +840,7 @@ export const TreeSelect = React.memo( const rootProps = mergeProps( { ref: elementRef, - className: cx('root', { context, focusedState, overlayVisibleState, isValueEmpty }), + className: classNames(props.className, cx('root', { context, focusedState, overlayVisibleState, isValueEmpty })), style: props.style, onClick: onClick }, diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js index 3115beec28..28f0a38290 100644 --- a/components/lib/treeselect/TreeSelectBase.js +++ b/components/lib/treeselect/TreeSelectBase.js @@ -4,20 +4,16 @@ import { classNames } from '../utils/Utils'; const classes = { root: ({ props, focusedState, context, overlayVisibleState, isValueEmpty }) => - classNames( - 'p-treeselect p-component p-inputwrapper', - { - 'p-treeselect-chip': props.display === 'chip', - 'p-treeselect-clearable': props.showClear && !props.disabled, - 'p-disabled': props.disabled, - 'p-invalid': props.invalid, - 'p-focus': focusedState, - 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled', - 'p-inputwrapper-filled': !isValueEmpty, - 'p-inputwrapper-focus': focusedState || overlayVisibleState - }, - props.className - ), + classNames('p-treeselect p-component p-inputwrapper', { + 'p-treeselect-chip': props.display === 'chip', + 'p-treeselect-clearable': props.showClear && !props.disabled, + 'p-disabled': props.disabled, + 'p-invalid': props.invalid, + 'p-focus': focusedState, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled', + 'p-inputwrapper-filled': !isValueEmpty, + 'p-inputwrapper-focus': focusedState || overlayVisibleState + }), label: ({ props, isValueEmpty, getLabel }) => classNames('p-treeselect-label', { 'p-placeholder': getLabel() === props.placeholder,