Correct passthrough (pt) implementation for Stepperpanel. (#7069)

* correct passthrough (pt) implementation for stepperpanel. Updated Stepper components to use mergeProps for pt attributes.

* style: apply code formatting.

* Snapshot updated for Stepper/Stepperpanel.

Author: Sumeet-2023

components/lib/stepper/Stepper.js

@@ -133,17 +133,15 @@ export const Stepper = React.memo(
 
         const createPanel = () => {
             return stepperPanels().map((step, index) => {
-                const panelProps = mergeProps(
-                    {
-                        className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })),
-                        'aria-current': isStepActive(index) && 'step',
-                        role: 'presentation',
-                        'data-p-highlight': isStepActive(index),
-                        'data-p-disabled': isItemDisabled(index),
-                        'data-p-active': isStepActive(index)
-                    },
-                    ptm('stepperpanel')
-                );
+                const panelProps = mergeProps({
+                    className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })),
+                    'aria-current': isStepActive(index) && 'step',
+                    role: 'presentation',
+                    'data-p-highlight': isStepActive(index),
+                    'data-p-disabled': isItemDisabled(index),
+                    'data-p-active': isStepActive(index),
+                    ...getStepPT(step, 'header', index)
+                });
 
                 return (
                     <li key={getStepKey(step, index)} {...panelProps}>
@@ -233,19 +231,16 @@ export const Stepper = React.memo(
             return stepperPanels().map((step, index) => {
                 const contentRef = React.createRef(null);
 
-                const navProps = mergeProps(
-                    {
-                        ref: navRef,
-                        className: cx('panel', { props, index, isStepActive }),
-                        'aria-current': isStepActive(index) && 'step',
-                        ...getStepPT(step, 'root', index),
-                        ...getStepPT(step, 'panel', index),
-                        'data-p-highlight': isStepActive(index),
-                        'data-p-disabled': isItemDisabled(index),
-                        'data-p-active': isStepActive(index)
-                    },
-                    ptm('nav')
-                );
+                const navProps = mergeProps({
+                    ref: navRef,
+                    className: cx('stepper.panel', { props, index, isStepActive }),
+                    'aria-current': isStepActive(index) && 'step',
+                    ...getStepPT(step, 'root', index),
+                    ...getStepPT(step, 'panel', index),
+                    'data-p-highlight': isStepActive(index),
+                    'data-p-disabled': isItemDisabled(index),
+                    'data-p-active': isStepActive(index)
+                });
 
                 const headerProps = mergeProps({
                     className: cx('stepper.header', { step, isStepActive, isItemDisabled, index }),

components/lib/stepper/StepperBase.js

@@ -25,13 +25,13 @@ const classes = {
         content: ({ props }) =>
             classNames('p-stepper-content', {
                 'p-toggleable-content': props.orientation === 'vertical'
+            }),
+        panel: ({ props, isStepActive, index }) =>
+            classNames('p-stepper-panel', {
+                'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
             })
     },
-    panelContainer: 'p-stepper-panels',
-    panel: ({ props, isStepActive, index }) =>
-        classNames('p-stepper-panel', {
-            'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
-        })
+    panelContainer: 'p-stepper-panels'
 };
 
 const styles = `

components/lib/stepper/StepperContent.js

@@ -4,21 +4,18 @@ import { useMergeProps } from '../hooks/Hooks';
 export const StepperContent = React.memo(
     React.forwardRef((props, ref) => {
         const mergeProps = useMergeProps();
-        const { cx, ptm } = props;
+        const { cx } = props;
 
-        const rootProps = mergeProps(
-            {
-                ref: ref,
-                id: props.id,
-                className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }),
-                role: 'tabpanel',
-                'aria-labelledby': props.ariaLabelledby,
-                ...props.getStepPT(props.stepperpanel, 'root', props.index),
-                ...props.getStepPT(props.stepperpanel, 'content', props.index),
-                'data-p-active': props.active
-            },
-            ptm('stepperpanel')
-        );
+        const rootProps = mergeProps({
+            ref: ref,
+            id: props.id,
+            className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }),
+            role: 'tabpanel',
+            'aria-labelledby': props.ariaLabelledby,
+            ...props.getStepPT(props.stepperpanel, 'root', props.index),
+            ...props.getStepPT(props.stepperpanel, 'content', props.index),
+            'data-p-active': props.active
+        });
 
         const createContent = () => {
             const ComponentToRender = props.template;

components/lib/stepper/StepperHeader.js

@@ -14,15 +14,26 @@ export const StepperHeader = React.memo(
             type: 'button',
             tabIndex: props.disabled ? -1 : undefined,
             'aria-controls': props.ariaControls,
-            onClick: (e) => props.clickCallback(e, props.index)
+            onClick: (e) => props.clickCallback(e, props.index),
+            ...props.getStepPT(props.stepperpanel, 'action', props.index)
+        });
+
+        const numberProps = mergeProps({
+            className: cx('stepper.number'),
+            ...props.getStepPT(props.stepperpanel, 'number', props.index)
+        });
+
+        const titleProps = mergeProps({
+            className: cx('stepper.title'),
+            ...props.getStepPT(props.stepperpanel, 'title', props.index)
         });
 
         return props.template ? (
             props.template()
         ) : (
             <button {...buttonProps}>
-                <span className={cx('stepper.number')}>{props.index + 1}</span>
-                <span className={cx('stepper.title')}>{props.getStepProp(props.stepperpanel, 'header')}</span>
+                <span {...numberProps}>{props.index + 1}</span>
+                <span {...titleProps}>{props.getStepProp(props.stepperpanel, 'header')}</span>
             </button>
         );
     })