Fix #6389: Passthrough accordiontab not tab

primefaces · Apr 13, 2024 · bd35244 · bd35244
1 parent 7a3210f
commit bd35244
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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,15 +212,15 @@ 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)
         );
         const icon = selected ? props.collapseIcon || <ChevronDownIcon {...headerIconProps} /> : props.expandIcon || <ChevronRightIcon {...headerIconProps} />;
         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
@@ -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
@@ -241,6 +241,10 @@ export interface AccordionPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: AccordionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to accordion tabs.
+     */
+    accordiontab?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
 }
 
 /**

diff --git 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 {

diff --git a/components/lib/tabview/tabview.d.ts b/components/lib/tabview/tabview.d.ts
@@ -363,6 +363,10 @@ export interface TabViewPassThroughOptions {
      * Uses to pass attributes to the panel's DOM element.
      */
     panelContainer?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to accordion tabs.
+     */
+    tab?: TabPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
 }
 
 /**