From 3d97e9f27e249e9a23598be9962a7eaa63273ea4 Mon Sep 17 00:00:00 2001 From: melloware Date: Fri, 12 Apr 2024 12:20:20 -0400 Subject: [PATCH] Fix #6389: Passthrough accordiontab not tab --- .../doc/accordion/theming/tailwinddoc.js | 2 +- components/lib/accordion/Accordion.js | 18 +++++++++--------- components/lib/accordion/AccordionBase.js | 2 +- components/lib/accordion/accordion.d.ts | 4 ++++ components/lib/passthrough/tailwind/index.js | 2 +- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/components/doc/accordion/theming/tailwinddoc.js b/components/doc/accordion/theming/tailwinddoc.js index 10ab21f4ad..6571b84ab3 100644 --- a/components/doc/accordion/theming/tailwinddoc.js +++ b/components/doc/accordion/theming/tailwinddoc.js @@ -19,7 +19,7 @@ const TRANSITIONS = { const Tailwind = { accordion: { root: 'mb-1', - tab: { + accordiontab: { root: 'mb-1', header: ({ props }) => ({ className: classNames( diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index 37eb772670..9d40a5bfb1 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -50,7 +50,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { } }; - return mergeProps(ptm(`tab.${key}`, { tab: tabMetaData }), ptm(`tab.${key}`, { tab: tabMetaData }), ptm(`tab.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData)); + return mergeProps(ptm(`accordiontab.${key}`, { tab: tabMetaData }), ptm(`accordiontab.${key}`, { tab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData)); }; const onTabHeaderClick = (event, tab, index) => { @@ -203,7 +203,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) ); @@ -212,7 +212,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const headerIconProps = mergeProps( { 'aria-hidden': 'true', - className: cx('tab.headericon') + className: cx('accordiontab.headericon') }, getTabPT(tab, 'headericon', index) ); @@ -220,7 +220,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const toggleIcon = IconUtils.getJSXIcon(icon, { ...headerIconProps }, { props, selected }); 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') @@ -232,7 +232,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { { id: headerId, href: '#' + ariaControls, - className: cx('tab.headeraction'), + className: cx('accordiontab.headeraction'), role: 'button', tabIndex, onClick: (e) => onTabHeaderClick(e, tab, index), @@ -263,7 +263,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 @@ -273,14 +273,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, @@ -308,7 +308,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 05c87f927a..c2972d96b2 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 diff --git a/components/lib/accordion/accordion.d.ts b/components/lib/accordion/accordion.d.ts index df90a79c48..e97271e53c 100644 --- a/components/lib/accordion/accordion.d.ts +++ b/components/lib/accordion/accordion.d.ts @@ -241,6 +241,10 @@ export interface AccordionPassThroughOptions { * Uses to pass attributes to the root's DOM element. */ root?: AccordionPassThroughType>; + /** + * Uses to pass attributes to the root's DOM element. + */ + accordiontab?: AccordionTabPassThroughOptions; } /** diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 70bcfbbae8..249f807b0c 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -129,7 +129,7 @@ const Tailwind = { }, accordion: { root: 'mb-1', - tab: { + accordiontab: { root: 'mb-1', header: ({ context }) => { return {