From 146c8e98c3ad25373489df9200ef855cb2228af0 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 15 Nov 2024 17:28:34 -0600 Subject: [PATCH 01/18] allowed passing custom icon for completed steps --- apps/react-workshop/src/Stepper.stories.tsx | 21 ++++++++++++++ .../src/core/Stepper/Stepper.test.tsx | 29 +++++++++++++++++++ .../src/core/Stepper/Stepper.tsx | 6 ++++ .../src/core/Stepper/StepperStep.tsx | 9 +++++- 4 files changed, 64 insertions(+), 1 deletion(-) diff --git a/apps/react-workshop/src/Stepper.stories.tsx b/apps/react-workshop/src/Stepper.stories.tsx index 65a128070bd..66ec0e031ca 100644 --- a/apps/react-workshop/src/Stepper.stories.tsx +++ b/apps/react-workshop/src/Stepper.stories.tsx @@ -3,6 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import { Stepper, type StepperLocalization } from '@itwin/itwinui-react'; +import { SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; export default { title: 'Stepper', @@ -27,6 +28,26 @@ export const Basic = () => { ); }; +export const CustomIcon = () => { + const onStepClick = (index: number) => { + console.log(`Clicked index: ${index}`); + }; + return ( + } + onStepClick={onStepClick} + /> + ); +}; + export const Long = () => { const onStepClick = (index: number) => { console.log(`Clicked index: ${index}`); diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx index fa9441c72c0..305cbefa03d 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { screen, render, fireEvent, act } from '@testing-library/react'; import { Stepper } from './Stepper.js'; +import { SvgCheckmarkSmall } from '../../utils/index.js'; it('should render all step names and numbers in default stepper', () => { const stepper = ( @@ -69,6 +70,34 @@ it('should add custom props to Stepper', () => { ).toBeTruthy(); }); +it('should pass custom icon for completed steps', () => { + const stepper = ( + ( + + + + )} + /> + ); + + const { container } = render(stepper); + const completedSteps = container.querySelectorAll('.test-icon'); + expect(completedSteps).toHaveLength(2); +}); + it('should set the active step to the step provided and raises onClick event on completed steps', () => { const mockedOnClick = vi.fn(); const stepper = ( diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.tsx index 3a8ecacf702..86c27395c51 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.tsx @@ -41,6 +41,10 @@ export type StepperProps = { * Option to provide localized strings. */ localization?: StepperLocalization; + /** + * Custom content passed for completed step. + */ + completedStepRenderer?: (completedIndex: number) => React.ReactNode; /** * Click handler on completed step. */ @@ -82,6 +86,7 @@ export const Stepper = React.forwardRef((props, ref) => { steps, type = 'default', localization = defaultStepperLocalization, + completedStepRenderer, onStepClick, stepProps, trackContentProps, @@ -119,6 +124,7 @@ export const Stepper = React.forwardRef((props, ref) => { type={type} onClick={onStepClick} description={s.description} + completedStepRenderer={completedStepRenderer} /> ); })} diff --git a/packages/itwinui-react/src/core/Stepper/StepperStep.tsx b/packages/itwinui-react/src/core/Stepper/StepperStep.tsx index 453eef6d0c4..0411dabbe4b 100644 --- a/packages/itwinui-react/src/core/Stepper/StepperStep.tsx +++ b/packages/itwinui-react/src/core/Stepper/StepperStep.tsx @@ -37,6 +37,10 @@ export type StepperStepProps = { * A tooltip giving detailed description to this step. */ description?: string; + /** + * Custom content passed for completed step. + */ + completedStepRenderer?: (index: number) => React.ReactNode; /** * Allows props to be passed for stepper step. */ @@ -70,6 +74,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => { trackContentProps, circleProps, nameProps, + completedStepRenderer, ...rest } = props; @@ -132,7 +137,9 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => { {...circleProps} className={cx('iui-stepper-circle', circleProps?.className)} > - {index + 1} + {completedStepRenderer && isPast + ? completedStepRenderer(index) + : index + 1} From 4ca4fffdf1c38a951b615c446db484107ce60267 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Fri, 15 Nov 2024 18:29:09 -0600 Subject: [PATCH 02/18] icon styling --- packages/itwinui-css/src/stepper/stepper.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/itwinui-css/src/stepper/stepper.scss b/packages/itwinui-css/src/stepper/stepper.scss index 40d84b2659d..64c5218b699 100644 --- a/packages/itwinui-css/src/stepper/stepper.scss +++ b/packages/itwinui-css/src/stepper/stepper.scss @@ -18,6 +18,7 @@ --_iui-stepper-step-background-color: var(--iui-color-background); --_iui-stepper-step-border-color: var(--iui-color-border-positive); --_iui-stepper-step-number-color: var(--iui-color-text-positive); + --_iui-stepper-step-icon-color: var(--iui-color-text-positive); --_iui-stepper-step-text-color: var(--iui-color-text-positive); --_iui-stepper-step-track-before-color: var(--iui-color-border-positive); --_iui-stepper-step-track-after-color: var(--iui-color-border-positive); @@ -82,6 +83,10 @@ background-color: var(--_iui-stepper-step-background-color); color: var(--_iui-stepper-step-number-color); + :is(svg, img) { + fill: var(--_iui-stepper-step-icon-color); + } + .iui-clickable & { cursor: pointer; transition: @@ -93,6 +98,7 @@ --_iui-stepper-step-background-color: var(--iui-color-background-positive); --_iui-stepper-step-border-color: var(--iui-color-background-positive); --_iui-stepper-step-number-color: var(--iui-color-white); + --_iui-stepper-step-icon-color: var(--iui-color-white); } } From 03b8349fba13a3dd0c87bbc3d74dbf54d5fcb8a6 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 11:17:09 -0600 Subject: [PATCH 03/18] updated docs --- apps/website/src/content/docs/stepper.mdx | 8 +++ examples/Stepper.customIcon.css | 15 ++++++ examples/Stepper.customIcon.jsx | 53 +++++++++++++++++++ examples/index.tsx | 4 ++ .../src/core/Stepper/Stepper.tsx | 8 +-- .../src/core/Stepper/StepperStep.tsx | 8 ++- 6 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 examples/Stepper.customIcon.css create mode 100644 examples/Stepper.customIcon.jsx diff --git a/apps/website/src/content/docs/stepper.mdx b/apps/website/src/content/docs/stepper.mdx index d53c86953aa..be27945855e 100644 --- a/apps/website/src/content/docs/stepper.mdx +++ b/apps/website/src/content/docs/stepper.mdx @@ -60,6 +60,14 @@ The ‘Step X of X’ label that appears in the default long stepper can be repl +### Custom Icon + +By default, each step circle displays the step number. However, end users can customize the icon or content shown for completed steps in the `Stepper` component by using the `stepCircleRenderer` prop. This prop accepts a function that takes the step index and returns the custom content to represent step completion. + + + + + ### Layout We recommend the following layout: diff --git a/examples/Stepper.customIcon.css b/examples/Stepper.customIcon.css new file mode 100644 index 00000000000..5add2d2720b --- /dev/null +++ b/examples/Stepper.customIcon.css @@ -0,0 +1,15 @@ +.demo-container { + min-width: min(100%, 400px); + display: flex; + flex-direction: column; + gap: var(--iui-size-m); +} + +.demo-stepper { + align-self: stretch; +} + +.demo-button-container { + display: flex; + gap: var(--iui-size-xs); +} diff --git a/examples/Stepper.customIcon.jsx b/examples/Stepper.customIcon.jsx new file mode 100644 index 00000000000..fd9a549a9c4 --- /dev/null +++ b/examples/Stepper.customIcon.jsx @@ -0,0 +1,53 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Stepper } from '@itwin/itwinui-react'; +import { SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; + +const steps = [ + { name: 'First Step' }, + { name: 'Second Step' }, + { name: 'Third Step' }, + { name: 'Last Step' }, +]; + +export default () => { + const [currentStep, setCurrentStep] = React.useState(2); + + return ( +
+
+ { + setCurrentStep(index); + }} + stepCircleRenderer={() => } + /> +
+ +
+ + +
+
+ ); +}; diff --git a/examples/index.tsx b/examples/index.tsx index 12306db49cf..d93f584e732 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -1136,6 +1136,10 @@ import { default as StepperMainExampleRaw } from './Stepper.main'; const StepperMainExample = withThemeProvider(StepperMainExampleRaw); export { StepperMainExample }; +import { default as StepperCustomIconExampleRaw } from './Stepper.customIcon'; +const StepperCustomIconExample = withThemeProvider(StepperCustomIconExampleRaw); +export { StepperCustomIconExample }; + import { default as StepperShortExampleRaw } from './Stepper.short'; const StepperShortExample = withThemeProvider(StepperShortExampleRaw); export { StepperShortExample }; diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.tsx index 86c27395c51..520c22a6d03 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.tsx @@ -42,9 +42,9 @@ export type StepperProps = { */ localization?: StepperLocalization; /** - * Custom content passed for completed step. + * Custom content passed for completed steps. */ - completedStepRenderer?: (completedIndex: number) => React.ReactNode; + stepCircleRenderer?: (completedIndex: number) => React.ReactNode; /** * Click handler on completed step. */ @@ -86,7 +86,7 @@ export const Stepper = React.forwardRef((props, ref) => { steps, type = 'default', localization = defaultStepperLocalization, - completedStepRenderer, + stepCircleRenderer, onStepClick, stepProps, trackContentProps, @@ -124,7 +124,7 @@ export const Stepper = React.forwardRef((props, ref) => { type={type} onClick={onStepClick} description={s.description} - completedStepRenderer={completedStepRenderer} + stepCircleRenderer={stepCircleRenderer} /> ); })} diff --git a/packages/itwinui-react/src/core/Stepper/StepperStep.tsx b/packages/itwinui-react/src/core/Stepper/StepperStep.tsx index 0411dabbe4b..99628b77858 100644 --- a/packages/itwinui-react/src/core/Stepper/StepperStep.tsx +++ b/packages/itwinui-react/src/core/Stepper/StepperStep.tsx @@ -40,7 +40,7 @@ export type StepperStepProps = { /** * Custom content passed for completed step. */ - completedStepRenderer?: (index: number) => React.ReactNode; + stepCircleRenderer?: (index: number) => React.ReactNode; /** * Allows props to be passed for stepper step. */ @@ -74,7 +74,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => { trackContentProps, circleProps, nameProps, - completedStepRenderer, + stepCircleRenderer, ...rest } = props; @@ -137,9 +137,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => { {...circleProps} className={cx('iui-stepper-circle', circleProps?.className)} > - {completedStepRenderer && isPast - ? completedStepRenderer(index) - : index + 1} + {stepCircleRenderer && isPast ? stepCircleRenderer(index) : index + 1} From 7882b31150d1e818cd68a0fabc04a5eda770f9f9 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 11:19:33 -0600 Subject: [PATCH 04/18] added changeset --- .changeset/curly-bikes-protect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curly-bikes-protect.md diff --git a/.changeset/curly-bikes-protect.md b/.changeset/curly-bikes-protect.md new file mode 100644 index 00000000000..807acf4e146 --- /dev/null +++ b/.changeset/curly-bikes-protect.md @@ -0,0 +1,5 @@ +--- +'@itwin/itwinui-react': minor +--- + +`Stepper` now allows users to pass in custom icon or content in each step circle to indicate step completion. From 8835bdda90c53acb9a14f317d200f8a7684fb4b2 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 11:25:03 -0600 Subject: [PATCH 05/18] fixed test --- packages/itwinui-react/src/core/Stepper/Stepper.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx index 305cbefa03d..65d7130a804 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx @@ -85,7 +85,7 @@ it('should pass custom icon for completed steps', () => { name: 'Step Three', }, ]} - completedStepRenderer={() => ( + stepCircleRenderer={() => ( From d7825588d19230adeb5a9c91a50a64990fc197c6 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 11:26:13 -0600 Subject: [PATCH 06/18] fixed stories --- apps/react-workshop/src/Stepper.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/react-workshop/src/Stepper.stories.tsx b/apps/react-workshop/src/Stepper.stories.tsx index 66ec0e031ca..bf38de753a5 100644 --- a/apps/react-workshop/src/Stepper.stories.tsx +++ b/apps/react-workshop/src/Stepper.stories.tsx @@ -42,7 +42,7 @@ export const CustomIcon = () => { { name: 'Next Step' }, { name: 'Last Step' }, ]} - completedStepRenderer={() => } + stepCircleRenderer={() => } onStepClick={onStepClick} /> ); From ddd67ff9618a31415e8df0093a56cd618ebdc564 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 13:21:28 -0600 Subject: [PATCH 07/18] pass stepContent in each step item --- apps/react-workshop/src/Stepper.stories.tsx | 10 ++++------ apps/website/src/content/docs/stepper.mdx | 2 +- examples/Stepper.customIcon.jsx | 9 ++++----- packages/itwinui-css/src/stepper/stepper.scss | 2 +- .../src/core/Stepper/Stepper.test.tsx | 20 ++++++++++++++----- .../src/core/Stepper/Stepper.tsx | 11 +++++----- .../src/core/Stepper/StepperStep.tsx | 6 +++--- 7 files changed, 33 insertions(+), 27 deletions(-) diff --git a/apps/react-workshop/src/Stepper.stories.tsx b/apps/react-workshop/src/Stepper.stories.tsx index bf38de753a5..f63797e08a3 100644 --- a/apps/react-workshop/src/Stepper.stories.tsx +++ b/apps/react-workshop/src/Stepper.stories.tsx @@ -36,13 +36,11 @@ export const CustomIcon = () => { }, + { name: 'Second Step', stepContent: () => }, + { name: 'Third Step', stepContent: () => }, + { name: 'Last Step', stepContent: () => }, ]} - stepCircleRenderer={() => } onStepClick={onStepClick} /> ); diff --git a/apps/website/src/content/docs/stepper.mdx b/apps/website/src/content/docs/stepper.mdx index be27945855e..60e01d6249d 100644 --- a/apps/website/src/content/docs/stepper.mdx +++ b/apps/website/src/content/docs/stepper.mdx @@ -62,7 +62,7 @@ The ‘Step X of X’ label that appears in the default long stepper can be repl ### Custom Icon -By default, each step circle displays the step number. However, end users can customize the icon or content shown for completed steps in the `Stepper` component by using the `stepCircleRenderer` prop. This prop accepts a function that takes the step index and returns the custom content to represent step completion. +By default, each step circle displays the step number. However, end users can customize the icon or content shown for completed steps in the `Stepper` component by passing the `stepCircleRenderer` property in each step item. This property is a function that takes the step index and returns the custom content to represent step completion. diff --git a/examples/Stepper.customIcon.jsx b/examples/Stepper.customIcon.jsx index fd9a549a9c4..88fcd8584aa 100644 --- a/examples/Stepper.customIcon.jsx +++ b/examples/Stepper.customIcon.jsx @@ -7,10 +7,10 @@ import { Button, Stepper } from '@itwin/itwinui-react'; import { SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; const steps = [ - { name: 'First Step' }, - { name: 'Second Step' }, - { name: 'Third Step' }, - { name: 'Last Step' }, + { name: 'First Step', stepContent: () => }, + { name: 'Second Step', stepContent: () => }, + { name: 'Third Step', stepContent: () => }, + { name: 'Last Step', stepContent: () => }, ]; export default () => { @@ -25,7 +25,6 @@ export default () => { onStepClick={(index) => { setCurrentStep(index); }} - stepCircleRenderer={() => } /> diff --git a/packages/itwinui-css/src/stepper/stepper.scss b/packages/itwinui-css/src/stepper/stepper.scss index 64c5218b699..497eefecfde 100644 --- a/packages/itwinui-css/src/stepper/stepper.scss +++ b/packages/itwinui-css/src/stepper/stepper.scss @@ -83,7 +83,7 @@ background-color: var(--_iui-stepper-step-background-color); color: var(--_iui-stepper-step-number-color); - :is(svg, img) { + :is(svg) { fill: var(--_iui-stepper-step-icon-color); } diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx index 65d7130a804..76792aa00a1 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.test.tsx @@ -77,19 +77,29 @@ it('should pass custom icon for completed steps', () => { steps={[ { name: 'Step One', + stepContent: () => ( + + + + ), }, { name: 'Step Two', + stepContent: () => ( + + + + ), }, { name: 'Step Three', + stepContent: () => ( + + + + ), }, ]} - stepCircleRenderer={() => ( - - - - )} /> ); diff --git a/packages/itwinui-react/src/core/Stepper/Stepper.tsx b/packages/itwinui-react/src/core/Stepper/Stepper.tsx index 520c22a6d03..9251d2cb9fe 100644 --- a/packages/itwinui-react/src/core/Stepper/Stepper.tsx +++ b/packages/itwinui-react/src/core/Stepper/Stepper.tsx @@ -21,6 +21,10 @@ export type StepProperties = { * A tooltip giving detailed description to this step. */ description?: string; + /** + * Custom content passed for completed steps. + */ + stepContent?: (index: number) => React.ReactNode; } & React.ComponentProps<'li'>; export type StepperProps = { @@ -41,10 +45,6 @@ export type StepperProps = { * Option to provide localized strings. */ localization?: StepperLocalization; - /** - * Custom content passed for completed steps. - */ - stepCircleRenderer?: (completedIndex: number) => React.ReactNode; /** * Click handler on completed step. */ @@ -86,7 +86,6 @@ export const Stepper = React.forwardRef((props, ref) => { steps, type = 'default', localization = defaultStepperLocalization, - stepCircleRenderer, onStepClick, stepProps, trackContentProps, @@ -124,7 +123,7 @@ export const Stepper = React.forwardRef((props, ref) => { type={type} onClick={onStepClick} description={s.description} - stepCircleRenderer={stepCircleRenderer} + stepContent={s.stepContent} /> ); })} diff --git a/packages/itwinui-react/src/core/Stepper/StepperStep.tsx b/packages/itwinui-react/src/core/Stepper/StepperStep.tsx index 99628b77858..2cd2f9e2b4c 100644 --- a/packages/itwinui-react/src/core/Stepper/StepperStep.tsx +++ b/packages/itwinui-react/src/core/Stepper/StepperStep.tsx @@ -40,7 +40,7 @@ export type StepperStepProps = { /** * Custom content passed for completed step. */ - stepCircleRenderer?: (index: number) => React.ReactNode; + stepContent?: (index: number) => React.ReactNode; /** * Allows props to be passed for stepper step. */ @@ -74,7 +74,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => { trackContentProps, circleProps, nameProps, - stepCircleRenderer, + stepContent, ...rest } = props; @@ -137,7 +137,7 @@ export const StepperStep = React.forwardRef((props, forwardedRef) => { {...circleProps} className={cx('iui-stepper-circle', circleProps?.className)} > - {stepCircleRenderer && isPast ? stepCircleRenderer(index) : index + 1} + {stepContent && isPast ? stepContent(index) : index + 1} From 58eac45e01e40b4d7040beb0df6518f3e8bed1f3 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 13:21:53 -0600 Subject: [PATCH 08/18] docs --- apps/website/src/content/docs/stepper.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/content/docs/stepper.mdx b/apps/website/src/content/docs/stepper.mdx index 60e01d6249d..6e73039d9df 100644 --- a/apps/website/src/content/docs/stepper.mdx +++ b/apps/website/src/content/docs/stepper.mdx @@ -62,7 +62,7 @@ The ‘Step X of X’ label that appears in the default long stepper can be repl ### Custom Icon -By default, each step circle displays the step number. However, end users can customize the icon or content shown for completed steps in the `Stepper` component by passing the `stepCircleRenderer` property in each step item. This property is a function that takes the step index and returns the custom content to represent step completion. +By default, each step circle displays the step number. However, end users can customize the icon or content shown for completed steps in the `Stepper` component by passing the `stepCircleRenderer` property in each item of the `steps` array. This property is a function that takes the step index and returns the custom content to represent step completion. From fa6ded83a48e358cd85daafa6b5977e9922d2447 Mon Sep 17 00:00:00 2001 From: Uyen Doan Date: Mon, 18 Nov 2024 17:06:34 -0600 Subject: [PATCH 09/18] allowed custom content in any step --- apps/website/src/content/docs/stepper.mdx | 4 +- examples/Stepper.customIcon.jsx | 40 ++++++++++++++----- .../src/core/Stepper/Stepper.tsx | 4 +- .../src/core/Stepper/StepperStep.tsx | 4 +- 4 files changed, 37 insertions(+), 15 deletions(-) diff --git a/apps/website/src/content/docs/stepper.mdx b/apps/website/src/content/docs/stepper.mdx index 6e73039d9df..b87024f7ce4 100644 --- a/apps/website/src/content/docs/stepper.mdx +++ b/apps/website/src/content/docs/stepper.mdx @@ -62,7 +62,9 @@ The ‘Step X of X’ label that appears in the default long stepper can be repl ### Custom Icon -By default, each step circle displays the step number. However, end users can customize the icon or content shown for completed steps in the `Stepper` component by passing the `stepCircleRenderer` property in each item of the `steps` array. This property is a function that takes the step index and returns the custom content to represent step completion. +By default, each step circle shows the step number. However, users can customize the icon or content displayed for each step in the `Stepper` component by providing the `stepContent` property in each item of the `steps` array. + +This property is a function that takes the step index and returns the custom content to represent the status of each step. One of the most common usage for this customization is to indicate step completion. diff --git a/examples/Stepper.customIcon.jsx b/examples/Stepper.customIcon.jsx index 88fcd8584aa..372d5eee2ae 100644 --- a/examples/Stepper.customIcon.jsx +++ b/examples/Stepper.customIcon.jsx @@ -6,15 +6,26 @@ import * as React from 'react'; import { Button, Stepper } from '@itwin/itwinui-react'; import { SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; -const steps = [ - { name: 'First Step', stepContent: () => }, - { name: 'Second Step', stepContent: () => }, - { name: 'Third Step', stepContent: () => }, - { name: 'Last Step', stepContent: () => }, -]; - export default () => { - const [currentStep, setCurrentStep] = React.useState(2); + const [currentStep, setCurrentStep] = React.useState(0); + const [completedSteps, setCompletedSteps] = React.useState([]); + + const isStepCompleted = (index) => { + if (completedSteps.includes(index)) return true; + return false; + }; + + const steps = Array(4) + .fill() + .map((_, index) => ({ + name: `Step ${index + 1}`, + stepContent: () => { + if (isStepCompleted(index)) { + return ; + } + return
{index + 1}
; + }, + })); return (
@@ -32,7 +43,12 @@ export default () => {