fix(PageWizard): add stepWidth prop support

fixes: #3836
carbon-design-system · Jan 8, 2024 · 2561813 · 2561813
1 parent c71ef5c
commit 2561813
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/react/src/components/PageWizard/PageWizard.jsx b/packages/react/src/components/PageWizard/PageWizard.jsx
@@ -60,6 +60,7 @@ export const PageWizardPropTypes = {
   testId: PropTypes.string,
   /** Specify whether the progress steps should be split equally in size in the div */
   spaceEqually: PropTypes.bool,
+  stepWidth: PropTypes.number,
 };
 
 export const defaultProps = {
@@ -85,6 +86,7 @@ export const defaultProps = {
   isClickable: false,
   testId: 'page-wizard',
   spaceEqually: false,
+  stepWidth: null,
 };
 
 const PageWizard = ({
@@ -108,6 +110,7 @@ const PageWizard = ({
   isClickable,
   testId,
   spaceEqually,
+  stepWidth,
 }) => {
   const children = ch.length ? ch : [ch];
   const steps = React.Children.map(children, (step) => step.props);
@@ -195,6 +198,7 @@ const PageWizard = ({
             isVerticalMode={isProgressIndicatorVertical}
             isClickable={isClickable}
             spaceEqually={spaceEqually}
+            stepWidth={stepWidth}
             // TODO: pass down the testId in v3 instead of falling back to the
             // default.
             // testId={`${testId}-progress-indicator`}

diff --git a/packages/react/src/components/PageWizard/PageWizard.story.jsx b/packages/react/src/components/PageWizard/PageWizard.story.jsx
@@ -1,7 +1,7 @@
 /* Used dependencies */
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
+import { boolean, number, text } from '@storybook/addon-knobs';
 import { Button, Form, FormGroup, FormItem, Link, TextInput } from 'carbon-components-react';
 import { InformationFilled20 } from '@carbon/icons-react';
 
@@ -352,7 +352,7 @@ export const StatefulExampleWValidationInPageTitleBar = () => (
         <Link to="www.ibm.com">Something</Link>,
         <Link to="www.ibm.com">Something Else</Link>,
       ]}
-      content={<StepValidationWizard />}
+      content={<StepValidationWizard stepWidth={number('stepWidth', 6)} />}
     />
   </div>
 );
@@ -457,6 +457,7 @@ export const WithStickyFooterStatefulExampleWValidationInPageTitleBar = () => (
           isProgressIndicatorVertical={boolean('Toggle Progress Indicator Alignment', false)}
           isClickable
           spaceEqually={boolean('spaceEqually', false)}
+          stepWidth={number('stepWidth', 6)}
         />
       }
     />