Skip to content

Commit 802fe91

Browse files
robinkperssonrobinkpersson
authored
feat(stepper): add custom footer (#509)
1 parent 090a3d4 commit 802fe91

File tree

22 files changed

+185
-27
lines changed

22 files changed

+185
-27
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
## [11.6.0](https://github.com/AxisCommunications/fluent-components/compare/62b5370cbf6c21a2e03e23084abc0fff6b41b221..e10bae51f14ca4924e21e046b971c1e7247b2cca) (2025-10-16T08:37:28.626Z)
1+
## [11.7.0](https://github.com/AxisCommunications/fluent-components/compare/090a3d4cb5b5e9b2767c3c08ed137fecde67928f..fe749d9588d753a592f7e33d565afabb520a72ac) (2025-10-23T09:01:52.412Z)
22

3-
### 🚧 Maintenance
3+
### ✨ Features
44

5-
- Added shield icons (#505) ([e10bae5](https://github.com/AxisCommunications/fluent-components/commit/e10bae51f14ca4924e21e046b971c1e7247b2cca))
6-
- revert pr limit (#501) ([be6885d](https://github.com/AxisCommunications/fluent-components/commit/be6885d24fac417ceb43b086331c1e1f6371f534))
7-
- disable dependabot pr creation (#500) ([d8680dd](https://github.com/AxisCommunications/fluent-components/commit/d8680ddd7b21c6e301566a5cbe8e282acc54c485))
5+
- **stepper**: add custom footer ([fe749d9](https://github.com/AxisCommunications/fluent-components/commit/fe749d9588d753a592f7e33d565afabb520a72ac))

‎components/empty-view/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@axiscommunications/fluent-empty-view",
3-
"version": "11.6.0",
3+
"version": "11.7.0",
44
"description": "Empty view for Fluent UI v9",
55
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
66
"repository": {

‎components/password-input/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@axiscommunications/fluent-password-input",
3-
"version": "11.6.0",
3+
"version": "11.7.0",
44
"description": "Password input for Fluent UI v9",
55
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
66
"repository": {

‎components/slider/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@axiscommunications/fluent-slider",
3-
"version": "11.6.0",
3+
"version": "11.7.0",
44
"description": "Axis branded Slider",
55
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
66
"repository": {

‎components/stepper/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@axiscommunications/fluent-stepper",
3-
"version": "11.6.0",
3+
"version": "11.7.0",
44
"description": "Stepper for Fluent UI v9",
55
"homepage": "https://github.com/AxisCommunications/fluent-components#readme",
66
"repository": {

‎components/stepper/src/stepper-dialog.spec.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,4 +297,49 @@ describe("StepperDialog", () => {
297297

298298
expect(onFinish).toHaveBeenCalled();
299299
});
300+
301+
it("should not render the steps", () => {
302+
const onFinish = vi.fn();
303+
304+
const { container } = render(
305+
<StepperDialog
306+
currentStep={2}
307+
steps={steps}
308+
hideSteps
309+
disableProgression={false}
310+
onStepChange={vi.fn()}
311+
onFinish={onFinish}
312+
onCancel={vi.fn()}
313+
cancelLabel={"Cancel"}
314+
nextLabel={"Next"}
315+
previousLabel={"Previous"}
316+
finishLabel={"Finish"}
317+
/>
318+
);
319+
320+
expect(container.querySelectorAll(".axis-Stepper").length).toBe(0);
321+
});
322+
323+
it("should render footer content", () => {
324+
const onFinish = vi.fn();
325+
326+
const { getByTestId } = render(
327+
<StepperDialog
328+
currentStep={2}
329+
steps={steps}
330+
hideSteps
331+
footerContent={<div data-testid="footerContent">footer content</div>}
332+
disableProgression={false}
333+
onStepChange={vi.fn()}
334+
onFinish={onFinish}
335+
onCancel={vi.fn()}
336+
cancelLabel={"Cancel"}
337+
nextLabel={"Next"}
338+
previousLabel={"Previous"}
339+
finishLabel={"Finish"}
340+
/>
341+
);
342+
343+
expect(getByTestId("footerContent")).toBeVisible();
344+
});
300345
});

‎components/stepper/src/stepper-dialog.styles.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const StepperDialogClassNames = {
1111
root: ROOT_CLASS_NAME,
1212
container: `${ROOT_CLASS_NAME}-container`,
1313
content: `${ROOT_CLASS_NAME}-content`,
14+
footerContent: `${ROOT_CLASS_NAME}-footer-content`,
1415
buttonContainer: `${ROOT_CLASS_NAME}-buttons-container`,
1516
buttons: `${ROOT_CLASS_NAME}-buttons`,
1617
cancel: `${ROOT_CLASS_NAME}-cancel`,
@@ -53,6 +54,9 @@ const useStyles = makeStyles({
5354
display: "flex",
5455
...shorthands.gap(tokens.spacingHorizontalL),
5556
},
57+
footerContent: {
58+
alignSelf: "center",
59+
},
5660
});
5761

5862
type TUseStepperDialogStyles = {
@@ -88,6 +92,10 @@ export function useStepperDialogStyles({
8892
StepperDialogClassNames.buttons,
8993
styles.buttons
9094
);
95+
const footerContentStyles = mergeClasses(
96+
StepperDialogClassNames.footerContent,
97+
styles.footerContent
98+
);
9199

92100
const buttonCancel = mergeClasses(StepperDialogClassNames.cancel);
93101
const buttonPrevious = mergeClasses(StepperDialogClassNames.previous);
@@ -99,6 +107,7 @@ export function useStepperDialogStyles({
99107
rootStyles,
100108
containerStyles,
101109
contentStyles,
110+
footerContentStyles,
102111
buttonContainerStyles,
103112
buttonStyles,
104113
buttonCancel,

‎components/stepper/src/stepper-dialog.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { StepperDialogProps } from "./stepper-dialog.types";
77
export const StepperDialog = ({
88
currentStep,
99
steps,
10+
hideSteps,
11+
footerContent,
1012
vertical,
1113
disableProgression,
1214
onStepChange,
@@ -22,6 +24,7 @@ export const StepperDialog = ({
2224
rootStyles,
2325
containerStyles,
2426
contentStyles,
27+
footerContentStyles,
2528
buttonContainerStyles,
2629
buttonStyles,
2730
buttonCancel,
@@ -42,13 +45,15 @@ export const StepperDialog = ({
4245
return (
4346
<div className={rootStyles}>
4447
<div className={containerStyles}>
45-
<div>
46-
<Stepper
47-
currentStep={currentStep}
48-
steps={steps}
49-
vertical={vertical}
50-
/>
51-
</div>
48+
{!hideSteps && (
49+
<div>
50+
<Stepper
51+
currentStep={currentStep}
52+
steps={steps}
53+
vertical={vertical}
54+
/>
55+
</div>
56+
)}
5257
<div className={contentStyles}>{steps[currentStep].content}</div>
5358
</div>
5459
<div className={buttonContainerStyles}>
@@ -59,6 +64,9 @@ export const StepperDialog = ({
5964
</Button>
6065
)}
6166
</div>
67+
{footerContent && (
68+
<div className={footerContentStyles}>{footerContent}</div>
69+
)}
6270
<div className={buttonStyles}>
6371
{currentStep > 0 && previousLabel && (
6472
<Button className={buttonPrevious} onClick={onPrevious}>

‎components/stepper/src/stepper-dialog.types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export type DialogStep = TStep & {
77
export type StepperDialogProps = {
88
currentStep: number;
99
steps: DialogStep[];
10+
hideSteps?: boolean;
11+
footerContent?: JSX.Element;
1012
vertical?: boolean;
1113
onStepChange: (newStep: number) => void;
1214
onFinish: () => void;

‎components/stepper/src/stepper.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ export const Stepper = ({ currentStep, steps, vertical }: StepperProps) => {
2525
<div className={rootStyles}>
2626
{steps.map((step, stepIndex) => (
2727
<React.Fragment key={stepIndex}>
28-
<Step currentStep={currentStep} name={step.name} step={stepIndex} />
28+
<Step
29+
currentStep={currentStep}
30+
name={step.name ?? ""}
31+
step={stepIndex}
32+
/>
2933
{stepIndex !== steps.length - 1 && (
3034
<div className={dividerStyles}>
3135
<Divider vertical={vertical} />

0 commit comments

Comments
 (0)