From 1fbe7dd6b229140044200e76feab4690919f1e01 Mon Sep 17 00:00:00 2001
From: Sumeet Mourya <go69ciq@mytum.de>
Date: Wed, 21 Aug 2024 15:55:37 +0200
Subject: [PATCH 1/3] correct passthrough (pt) implementation for stepperpanel.
 Updated Stepper components to use mergeProps for pt attributes.

---
 components/lib/stepper/Stepper.js        | 13 +++++--------
 components/lib/stepper/StepperBase.js    |  8 ++++----
 components/lib/stepper/StepperContent.js |  6 ++----
 components/lib/stepper/StepperHeader.js  | 19 ++++++++++++++++---
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index d21d010133..a20d662f84 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -140,10 +140,9 @@ export const Stepper = React.memo(
                         role: 'presentation',
                         'data-p-highlight': isStepActive(index),
                         'data-p-disabled': isItemDisabled(index),
-                        'data-p-active': isStepActive(index)
-                    },
-                    ptm('stepperpanel')
-                );
+                        'data-p-active': isStepActive(index),
+                        ...getStepPT(step, 'header', index)
+                    });
 
                 return (
                     <li key={getStepKey(step, index)} {...panelProps}>
@@ -236,16 +235,14 @@ export const Stepper = React.memo(
                 const navProps = mergeProps(
                     {
                         ref: navRef,
-                        className: cx('panel', { props, index, isStepActive }),
+                        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)
-                    },
-                    ptm('nav')
-                );
+                    });
 
                 const headerProps = mergeProps({
                     className: cx('stepper.header', { step, isStepActive, isItemDisabled, index }),
diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js
index 832077751e..3d2e2ca37a 100644
--- a/components/lib/stepper/StepperBase.js
+++ b/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)
-        })
 };
 
 const styles = `
diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js
index c0711d47e4..acb6fc4f37 100644
--- a/components/lib/stepper/StepperContent.js
+++ b/components/lib/stepper/StepperContent.js
@@ -4,7 +4,7 @@ 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(
             {
@@ -16,9 +16,7 @@ export const StepperContent = React.memo(
                 ...props.getStepPT(props.stepperpanel, 'root', props.index),
                 ...props.getStepPT(props.stepperpanel, 'content', props.index),
                 'data-p-active': props.active
-            },
-            ptm('stepperpanel')
-        );
+            });
 
         const createContent = () => {
             const ComponentToRender = props.template;
diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js
index 1c984fc5c8..32ae77cec3 100644
--- a/components/lib/stepper/StepperHeader.js
+++ b/components/lib/stepper/StepperHeader.js
@@ -14,15 +14,28 @@ 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>
         );
     })

From 1a610a7c693f5cd1e1615584e4792631f14dd5b4 Mon Sep 17 00:00:00 2001
From: Sumeet Mourya <go69ciq@mytum.de>
Date: Wed, 21 Aug 2024 17:08:17 +0200
Subject: [PATCH 2/3] style: apply code formatting.

---
 components/lib/stepper/Stepper.js        | 40 +++++++++++-------------
 components/lib/stepper/StepperBase.js    |  4 +--
 components/lib/stepper/StepperContent.js | 21 ++++++-------
 components/lib/stepper/StepperHeader.js  | 20 ++++++------
 4 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
index a20d662f84..f7f59a0ed7 100644
--- a/components/lib/stepper/Stepper.js
+++ b/components/lib/stepper/Stepper.js
@@ -133,16 +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),
-                        ...getStepPT(step, 'header', 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),
+                    ...getStepPT(step, 'header', index)
+                });
 
                 return (
                     <li key={getStepKey(step, index)} {...panelProps}>
@@ -232,17 +231,16 @@ export const Stepper = React.memo(
             return stepperPanels().map((step, index) => {
                 const contentRef = React.createRef(null);
 
-                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 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 }),
diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js
index 3d2e2ca37a..0425906933 100644
--- a/components/lib/stepper/StepperBase.js
+++ b/components/lib/stepper/StepperBase.js
@@ -28,10 +28,10 @@ const classes = {
             }),
         panel: ({ props, isStepActive, index }) =>
             classNames('p-stepper-panel', {
-                    'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
+                'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
             })
     },
-    panelContainer: 'p-stepper-panels',
+    panelContainer: 'p-stepper-panels'
 };
 
 const styles = `
diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js
index acb6fc4f37..83363bcfea 100644
--- a/components/lib/stepper/StepperContent.js
+++ b/components/lib/stepper/StepperContent.js
@@ -6,17 +6,16 @@ export const StepperContent = React.memo(
         const mergeProps = useMergeProps();
         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
-            });
+        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;
diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js
index 32ae77cec3..b0735b76dc 100644
--- a/components/lib/stepper/StepperHeader.js
+++ b/components/lib/stepper/StepperHeader.js
@@ -18,17 +18,15 @@ export const StepperHeader = React.memo(
             ...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),
-            });
+        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()

From 02210760ae98d58d1afc1bd77fcd10d5432da5ce Mon Sep 17 00:00:00 2001
From: Sumeet Mourya <go69ciq@mytum.de>
Date: Wed, 21 Aug 2024 18:59:18 +0200
Subject: [PATCH 3/3] Snapshot updated for Stepper/Stepperpanel.

---
 .../__snapshots__/Stepper.spec.js.snap        | 82 ++++++++++++++-----
 1 file changed, 62 insertions(+), 20 deletions(-)

diff --git a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap
index 9e912e9ee5..ab3a085b99 100644
--- a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap
+++ b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap
@@ -38,23 +38,26 @@ exports[`Stepper header position bottom 1`] = `
         data-p-active="true"
         data-p-disabled="false"
         data-p-highlight="true"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_6_0content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_6_0_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             1
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header I
           </span>
@@ -71,23 +74,26 @@ exports[`Stepper header position bottom 1`] = `
         data-p-active="false"
         data-p-disabled="false"
         data-p-highlight="false"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_6_1content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_6_1_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             2
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header II
           </span>
@@ -103,7 +109,7 @@ exports[`Stepper header position bottom 1`] = `
         class="p-stepper-content"
         data-p-active="true"
         data-pc-name=""
-        data-pc-section="stepperpanel"
+        data-pc-section="content"
         id="pr_id_6_0content"
         role="tabpanel"
       >
@@ -132,23 +138,26 @@ exports[`Stepper header position left 1`] = `
         data-p-active="true"
         data-p-disabled="false"
         data-p-highlight="true"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_7_0content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_7_0_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             1
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header I
           </span>
@@ -165,23 +174,26 @@ exports[`Stepper header position left 1`] = `
         data-p-active="false"
         data-p-disabled="false"
         data-p-highlight="false"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_7_1content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_7_1_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             2
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header II
           </span>
@@ -197,7 +209,7 @@ exports[`Stepper header position left 1`] = `
         class="p-stepper-content"
         data-p-active="true"
         data-pc-name=""
-        data-pc-section="stepperpanel"
+        data-pc-section="content"
         id="pr_id_7_0content"
         role="tabpanel"
       >
@@ -226,23 +238,26 @@ exports[`Stepper header position right 1`] = `
         data-p-active="true"
         data-p-disabled="false"
         data-p-highlight="true"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_5_0content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_5_0_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             1
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header I
           </span>
@@ -259,23 +274,26 @@ exports[`Stepper header position right 1`] = `
         data-p-active="false"
         data-p-disabled="false"
         data-p-highlight="false"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_5_1content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_5_1_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             2
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header II
           </span>
@@ -291,7 +309,7 @@ exports[`Stepper header position right 1`] = `
         class="p-stepper-content"
         data-p-active="true"
         data-pc-name=""
-        data-pc-section="stepperpanel"
+        data-pc-section="content"
         id="pr_id_5_0content"
         role="tabpanel"
       >
@@ -320,23 +338,26 @@ exports[`Stepper header position top 1`] = `
         data-p-active="true"
         data-p-disabled="false"
         data-p-highlight="true"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_4_0content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_4_0_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             1
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header I
           </span>
@@ -353,23 +374,26 @@ exports[`Stepper header position top 1`] = `
         data-p-active="false"
         data-p-disabled="false"
         data-p-highlight="false"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_4_1content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_4_1_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             2
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header II
           </span>
@@ -385,7 +409,7 @@ exports[`Stepper header position top 1`] = `
         class="p-stepper-content"
         data-p-active="true"
         data-pc-name=""
-        data-pc-section="stepperpanel"
+        data-pc-section="content"
         id="pr_id_4_0content"
         role="tabpanel"
       >
@@ -414,23 +438,26 @@ exports[`Stepper panels 1`] = `
         data-p-active="true"
         data-p-disabled="false"
         data-p-highlight="true"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_2_0content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_2_0_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             1
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header I
           </span>
@@ -447,23 +474,26 @@ exports[`Stepper panels 1`] = `
         data-p-active="false"
         data-p-disabled="false"
         data-p-highlight="false"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_2_1content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_2_1_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             2
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header II
           </span>
@@ -480,23 +510,26 @@ exports[`Stepper panels 1`] = `
         data-p-active="false"
         data-p-disabled="false"
         data-p-highlight="false"
-        data-pc-section="stepperpanel"
+        data-pc-section="header"
         role="presentation"
       >
         <button
           aria-controls="pr_id_2_2content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_2_2_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             3
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header III
           </span>
@@ -512,7 +545,7 @@ exports[`Stepper panels 1`] = `
         class="p-stepper-content"
         data-p-active="true"
         data-pc-name=""
-        data-pc-section="stepperpanel"
+        data-pc-section="content"
         id="pr_id_2_0content"
         role="tabpanel"
       >
@@ -538,7 +571,7 @@ exports[`Stepper vertical 1`] = `
       data-p-disabled="false"
       data-p-highlight="true"
       data-pc-name=""
-      data-pc-section="nav"
+      data-pc-section="panel"
     >
       <div
         class="p-stepper-header p-highlight"
@@ -547,17 +580,20 @@ exports[`Stepper vertical 1`] = `
         <button
           aria-controls="pr_id_3_0content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_3_0_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             1
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header I
           </span>
@@ -577,7 +613,7 @@ exports[`Stepper vertical 1`] = `
           class="p-stepper-content p-toggleable-content"
           data-p-active="true"
           data-pc-name=""
-          data-pc-section="stepperpanel"
+          data-pc-section="content"
           id="pr_id_3_0content"
           role="tabpanel"
         >
@@ -592,7 +628,7 @@ exports[`Stepper vertical 1`] = `
       data-p-disabled="false"
       data-p-highlight="false"
       data-pc-name=""
-      data-pc-section="nav"
+      data-pc-section="panel"
     >
       <div
         class="p-stepper-header"
@@ -601,17 +637,20 @@ exports[`Stepper vertical 1`] = `
         <button
           aria-controls="pr_id_3_1content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_3_1_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             2
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header II
           </span>
@@ -625,7 +664,7 @@ exports[`Stepper vertical 1`] = `
       data-p-disabled="false"
       data-p-highlight="false"
       data-pc-name=""
-      data-pc-section="nav"
+      data-pc-section="panel"
     >
       <div
         class="p-stepper-header"
@@ -634,17 +673,20 @@ exports[`Stepper vertical 1`] = `
         <button
           aria-controls="pr_id_3_2content"
           class="p-stepper-action p-component"
+          data-pc-section="action"
           id="pr_id_3_2_header_action"
           role="tab"
           type="button"
         >
           <span
             class="p-stepper-number"
+            data-pc-section="number"
           >
             3
           </span>
           <span
             class="p-stepper-title"
+            data-pc-section="title"
           >
             Header III
           </span>