From 9354a6acec9eab57a2f420d1f06d3f4d82960fbd Mon Sep 17 00:00:00 2001 From: melloware Date: Thu, 7 Dec 2023 10:06:05 -0500 Subject: [PATCH] Fix #5546: AccordionTab Tailwind issues --- components/lib/accordion/Accordion.js | 18 +++++++++--------- components/lib/accordion/AccordionBase.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index c87a69f0a0..fc078d1f4f 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -47,7 +47,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { } }; - return mergeProps(ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(tab.props, key, tabMetaData)); + return mergeProps(ptm(`accordion.${key}`, { tab: tabMetaData }), ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData)); }; const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name); @@ -108,7 +108,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex'); const headerTitleProps = mergeProps( { - className: cx('tab.headertitle') + className: cx('accordiontab.headertitle') }, getTabPT(tab, 'headertitle', index) ); @@ -116,7 +116,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : {ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps)}; const headerIconProps = mergeProps( { - className: cx('tab.headericon') + className: cx('accordiontab.headericon') }, getTabPT(tab, 'headericon', index) ); @@ -125,7 +125,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'); const headerProps = mergeProps( { - className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('tab.header', { selected, getTabProp, tab })), + className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('accordiontab.header', { selected, getTabProp, tab })), style, 'data-p-highlight': selected, 'data-p-disabled': getTabProp(tab, 'disabled') @@ -137,7 +137,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { { id: headerId, href: '#' + ariaControls, - className: cx('tab.headeraction'), + className: cx('accordiontab.headeraction'), role: 'tab', tabIndex, onClick: (e) => onTabHeaderClick(e, tab, index), @@ -167,7 +167,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { { id: contentId, ref: contentRef, - className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('tab.toggleablecontent')), + className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')), style, role: 'region', 'aria-labelledby': ariaLabelledby @@ -177,14 +177,14 @@ export const Accordion = React.forwardRef((inProps, ref) => { const contentProps = mergeProps( { - className: cx('tab.content') + className: cx('accordiontab.content') }, getTabPT(tab, 'content', index) ); const transitionProps = mergeProps( { - classNames: cx('tab.transition'), + classNames: cx('accordiontab.transition'), timeout: { enter: 1000, exit: 450 }, in: selected, unmountOnExit: true, @@ -212,7 +212,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const rootProps = mergeProps( { key, - className: cx('tab.root', { selected }) + className: cx('accordiontab.root', { selected }) }, AccordionTabBase.getCOtherProps(tab), getTabPT(tab, 'root', index) diff --git a/components/lib/accordion/AccordionBase.js b/components/lib/accordion/AccordionBase.js index 868a6345e7..51a379bbe5 100644 --- a/components/lib/accordion/AccordionBase.js +++ b/components/lib/accordion/AccordionBase.js @@ -3,7 +3,7 @@ import { ObjectUtils, classNames } from '../utils/Utils'; const classes = { root: 'p-accordion p-component', - tab: { + accordiontab: { root: ({ selected }) => classNames('p-accordion-tab', { 'p-accordion-tab-active': selected