Refactor #4391 - for Steps

components/doc/common/apidoc/index.json

@@ -30405,6 +30405,14 @@
                             "type": "ReactNode",
                             "default": "",
                             "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ]
                 },
@@ -30459,6 +30467,88 @@
                     ]
                 }
             }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "StepsThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepsProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the step's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepsPassThroughType": {
+                    "values": "PassThroughType<T, StepsThroughMethodOptions>"
+                }
+            }
         }
     },
     "styleclass": {

components/doc/steps/pt/ptdoc.js

@@ -0,0 +1,111 @@
+import { DocSectionText } from '../../common/docsectiontext';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { Steps } from '../../../lib/steps/Steps';
+
+export function PTDoc(props) {
+    const items = [
+        {
+            label: 'Personal'
+        },
+        {
+            label: 'Seat'
+        },
+        {
+            label: 'Payment'
+        },
+        {
+            label: 'Confirmation'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Steps
+    model={items}
+    pt={{
+    root: { className: 'w-30rem' }
+    }}
+/>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+
+export default function PTDemo() {
+    const items = [
+        {
+            label: 'Personal'
+        },
+        {
+            label: 'Seat'
+        },
+        {
+            label: 'Payment'
+        },
+        {
+            label: 'Confirmation'
+        }
+    ];
+
+    return (
+        <div class="card flex justify-content-center">
+            <Steps
+                model={items}
+                pt={{
+                    root: { className: 'w-30rem' }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function PTDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Personal'
+        },
+        {
+            label: 'Seat'
+        },
+        {
+            label: 'Payment'
+        },
+        {
+            label: 'Confirmation'
+        }
+    ];
+
+    return (
+        <div class="card flex justify-content-center">
+            <Steps
+                model={items}
+                pt={{
+                    root: { className: 'w-30rem' }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div class="card flex justify-content-center">
+                <Steps
+                    model={items}
+                    pt={{
+                        root: { className: 'w-30rem' }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/steps/pt/wireframe.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="steps" />
+            </div>
+        </>
+    );
+};

components/lib/steps/Steps.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
 import { StepsBase } from './StepsBase';
 
 export const Steps = React.memo(
@@ -8,6 +8,10 @@ export const Steps = React.memo(
 
         const elementRef = React.useRef(null);
 
+        const { ptm } = StepsBase.setMetaData({
+            props
+        });
+
         const itemClick = (event, item, index) => {
             if (props.readOnly || item.disabled) {
                 event.preventDefault();
@@ -49,12 +53,48 @@ export const Steps = React.memo(
                 'p-highlight p-steps-current': active,
                 'p-disabled': disabled
             });
+
             const iconClassName = classNames('p-menuitem-icon', item.icon);
-            const icon = IconUtils.getJSXIcon(item.icon, { className: 'p-menuitem-icon' }, { props });
-            const label = item.label && <span className="p-steps-title">{item.label}</span>;
+            const iconProps = mergeProps(
+                {
+                    className: iconClassName
+                },
+                ptm('icon')
+            );
+
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
+
+            const labelProps = mergeProps(
+                {
+                    className: 'p-steps-title'
+                },
+                ptm('label')
+            );
+
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+
+            const stepProps = mergeProps(
+                {
+                    className: 'p-steps-number'
+                },
+                ptm('step')
+            );
+
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: 'p-menuitem-link',
+                    role: 'presentation',
+                    target: item.target,
+                    onClick: (event) => itemClick(event, item, index),
+                    tabIndex
+                },
+                ptm('action')
+            );
+
             let content = (
-                <a href={item.url || '#'} className="p-menuitem-link" role="presentation" target={item.target} onClick={(event) => itemClick(event, item, index)} tabIndex={tabIndex}>
-                    <span className="p-steps-number">{index + 1}</span>
+                <a {...actionProps}>
+                    <span {...stepProps}>{index + 1}</span>
                     {icon}
                     {label}
                 </a>
@@ -77,18 +117,34 @@ export const Steps = React.memo(
                 content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
             }
 
-            return (
-                <li key={key} id={item.id} className={className} style={item.style} role="tab" aria-selected={active} aria-expanded={active}>
-                    {content}
-                </li>
+            const menuItemProps = mergeProps(
+                {
+                    key: key,
+                    id: item.id,
+                    className: className,
+                    style: item.style,
+                    role: 'tab',
+                    'aria-selected': active,
+                    'aria-expanded': active
+                },
+                ptm('menuitem')
             );
+
+            return <li {...menuItemProps}>{content}</li>;
         };
 
         const createItems = () => {
+            const menuProps = mergeProps(
+                {
+                    role: 'tablist'
+                },
+                ptm('menu')
+            );
+
             if (props.model) {
                 const items = props.model.map(createItem);
 
-                return <ul role="tablist">{items}</ul>;
+                return <ul {...menuProps}>{items}</ul>;
             }
 
             return null;
@@ -99,21 +155,28 @@ export const Steps = React.memo(
             getElement: () => elementRef.current
         }));
 
-        const otherProps = StepsBase.getOtherProps(props);
         const className = classNames(
             'p-steps p-component',
             {
                 'p-readonly': props.readOnly
             },
             props.className
         );
-        const items = createItems();
 
-        return (
-            <div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
-                {items}
-            </div>
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className,
+                style: props.style
+            },
+            StepsBase.getOtherProps(props),
+            ptm('root')
         );
+
+        const items = createItems();
+
+        return <div {...rootProps}>{items}</div>;
     })
 );
 

components/lib/steps/StepsBase.js

@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
 
-export const StepsBase = {
+export const StepsBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Steps',
         id: null,
@@ -11,7 +11,5 @@ export const StepsBase = {
         className: null,
         onSelect: null,
         children: undefined
-    },
-    getProps: (props) => ObjectUtils.getMergedProps(props, StepsBase.defaultProps),
-    getOtherProps: (props) => ObjectUtils.getDiffProps(props, StepsBase.defaultProps)
-};
+    }
+});