feat(stepper): add custom footer

CHANGELOG.md

@@ -1,7 +1,5 @@
-## [11.6.0](https://github.com/AxisCommunications/fluent-components/compare/62b5370cbf6c21a2e03e23084abc0fff6b41b221..e10bae51f14ca4924e21e046b971c1e7247b2cca) (2025-10-16T08:37:28.626Z)
+## [11.7.0](https://github.com/AxisCommunications/fluent-components/compare/090a3d4cb5b5e9b2767c3c08ed137fecde67928f..fe749d9588d753a592f7e33d565afabb520a72ac) (2025-10-23T09:01:52.412Z)
 
-### 🚧 Maintenance
+### ✨ Features
 
-  - Added shield icons (#505) ([e10bae5](https://github.com/AxisCommunications/fluent-components/commit/e10bae51f14ca4924e21e046b971c1e7247b2cca))
-  - revert pr limit (#501) ([be6885d](https://github.com/AxisCommunications/fluent-components/commit/be6885d24fac417ceb43b086331c1e1f6371f534))
-  - disable dependabot pr creation (#500) ([d8680dd](https://github.com/AxisCommunications/fluent-components/commit/d8680ddd7b21c6e301566a5cbe8e282acc54c485))
+  - **stepper**: add custom footer ([fe749d9](https://github.com/AxisCommunications/fluent-components/commit/fe749d9588d753a592f7e33d565afabb520a72ac))

components/empty-view/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-empty-view",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Empty view for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

components/password-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-password-input",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Password input for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

components/slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-slider",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Axis branded Slider",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

components/stepper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-stepper",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Stepper for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

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

@@ -297,4 +297,49 @@ describe("StepperDialog", () => {
 
     expect(onFinish).toHaveBeenCalled();
   });
+
+  it("should not render the steps", () => {
+    const onFinish = vi.fn();
+
+    const { container } = render(
+      <StepperDialog
+        currentStep={2}
+        steps={steps}
+        hideSteps
+        disableProgression={false}
+        onStepChange={vi.fn()}
+        onFinish={onFinish}
+        onCancel={vi.fn()}
+        cancelLabel={"Cancel"}
+        nextLabel={"Next"}
+        previousLabel={"Previous"}
+        finishLabel={"Finish"}
+      />
+    );
+
+    expect(container.querySelectorAll(".axis-Stepper").length).toBe(0);
+  });
+
+  it("should render footer content", () => {
+    const onFinish = vi.fn();
+
+    const { getByTestId } = render(
+      <StepperDialog
+        currentStep={2}
+        steps={steps}
+        hideSteps
+        footerContent={<div data-testid="footerContent">footer content</div>}
+        disableProgression={false}
+        onStepChange={vi.fn()}
+        onFinish={onFinish}
+        onCancel={vi.fn()}
+        cancelLabel={"Cancel"}
+        nextLabel={"Next"}
+        previousLabel={"Previous"}
+        finishLabel={"Finish"}
+      />
+    );
+
+    expect(getByTestId("footerContent")).toBeVisible();
+  });
 });

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

@@ -11,6 +11,7 @@ export const StepperDialogClassNames = {
   root: ROOT_CLASS_NAME,
   container: `${ROOT_CLASS_NAME}-container`,
   content: `${ROOT_CLASS_NAME}-content`,
+  footerContent: `${ROOT_CLASS_NAME}-footer-content`,
   buttonContainer: `${ROOT_CLASS_NAME}-buttons-container`,
   buttons: `${ROOT_CLASS_NAME}-buttons`,
   cancel: `${ROOT_CLASS_NAME}-cancel`,
@@ -53,6 +54,9 @@ const useStyles = makeStyles({
     display: "flex",
     ...shorthands.gap(tokens.spacingHorizontalL),
   },
+  footerContent: {
+    alignSelf: "center",
+  },
 });
 
 type TUseStepperDialogStyles = {
@@ -88,6 +92,10 @@ export function useStepperDialogStyles({
     StepperDialogClassNames.buttons,
     styles.buttons
   );
+  const footerContentStyles = mergeClasses(
+    StepperDialogClassNames.footerContent,
+    styles.footerContent
+  );
 
   const buttonCancel = mergeClasses(StepperDialogClassNames.cancel);
   const buttonPrevious = mergeClasses(StepperDialogClassNames.previous);
@@ -99,6 +107,7 @@ export function useStepperDialogStyles({
     rootStyles,
     containerStyles,
     contentStyles,
+    footerContentStyles,
     buttonContainerStyles,
     buttonStyles,
     buttonCancel,

components/stepper/src/stepper-dialog.tsx

@@ -7,6 +7,8 @@ import { StepperDialogProps } from "./stepper-dialog.types";
 export const StepperDialog = ({
   currentStep,
   steps,
+  hideSteps,
+  footerContent,
   vertical,
   disableProgression,
   onStepChange,
@@ -22,6 +24,7 @@ export const StepperDialog = ({
     rootStyles,
     containerStyles,
     contentStyles,
+    footerContentStyles,
     buttonContainerStyles,
     buttonStyles,
     buttonCancel,
@@ -42,13 +45,15 @@ export const StepperDialog = ({
   return (
     <div className={rootStyles}>
       <div className={containerStyles}>
-        <div>
-          <Stepper
-            currentStep={currentStep}
-            steps={steps}
-            vertical={vertical}
-          />
-        </div>
+        {!hideSteps && (
+          <div>
+            <Stepper
+              currentStep={currentStep}
+              steps={steps}
+              vertical={vertical}
+            />
+          </div>
+        )}
         <div className={contentStyles}>{steps[currentStep].content}</div>
       </div>
       <div className={buttonContainerStyles}>
@@ -59,6 +64,9 @@ export const StepperDialog = ({
             </Button>
           )}
         </div>
+        {footerContent && (
+          <div className={footerContentStyles}>{footerContent}</div>
+        )}
         <div className={buttonStyles}>
           {currentStep > 0 && previousLabel && (
             <Button className={buttonPrevious} onClick={onPrevious}>

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

@@ -7,6 +7,8 @@ export type DialogStep = TStep & {
 export type StepperDialogProps = {
   currentStep: number;
   steps: DialogStep[];
+  hideSteps?: boolean;
+  footerContent?: JSX.Element;
   vertical?: boolean;
   onStepChange: (newStep: number) => void;
   onFinish: () => void;

components/stepper/src/stepper.tsx

@@ -25,7 +25,11 @@ export const Stepper = ({ currentStep, steps, vertical }: StepperProps) => {
     <div className={rootStyles}>
       {steps.map((step, stepIndex) => (
         <React.Fragment key={stepIndex}>
-          <Step currentStep={currentStep} name={step.name} step={stepIndex} />
+          <Step
+            currentStep={currentStep}
+            name={step.name ?? ""}
+            step={stepIndex}
+          />
           {stepIndex !== steps.length - 1 && (
             <div className={dividerStyles}>
               <Divider vertical={vertical} />

components/stepper/src/stepper.types.ts

@@ -1,5 +1,5 @@
 export type TStep = {
-  name: string;
+  name?: string;
 };
 
 export type StepperProps = {

components/topbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-topbar",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Axis branded TopBar",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "examples",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "private": true,
   "description": "Examples for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",

examples/src/stories/stepper/examples/minimal-with-counter-stepper-example.tsx

@@ -0,0 +1,82 @@
+import { DialogStep, StepperDialog } from "@axiscommunications/fluent-stepper";
+import { Body1 } from "@fluentui/react-components";
+import { useCallback, useState } from "react";
+import React from "react";
+
+const steps: DialogStep[] = [
+  {
+    content: <>{"This is the content of the first step. ".repeat(20)}</>,
+  },
+  {
+    content: <>{"This is the content of the second step. ".repeat(20)}</>,
+  },
+  {
+    content: <>{"This is the content of the third step. ".repeat(20)}</>,
+  },
+];
+
+export function MinimalWithCustomFooterStepperDialogExample() {
+  const [step, setStep] = useState(0);
+  const onFinish = useCallback(() => alert("Finish!"), []);
+  const onCancel = useCallback(() => setStep(0), []);
+
+  return (
+    <StepperDialog
+      currentStep={step}
+      steps={steps}
+      hideSteps
+      footerContent={<Body1>{`${step + 1} of ${steps.length}`}</Body1>}
+      disableProgression={false}
+      onStepChange={setStep}
+      onFinish={onFinish}
+      onCancel={onCancel}
+      cancelLabel="Cancel"
+      nextLabel="Next"
+      previousLabel="Previous"
+      finishLabel="Finish"
+    />
+  );
+}
+
+export const MinimalWithCustomFooterStepperDialogExampleAsString = `
+import React, { useCallback, useState } from "react";
+
+import {
+  DialogStep,
+  StepperDialog
+} from "@axiscommunications/fluent-stepper";
+
+const steps: DialogStep[] = [
+  {
+    content: <>{"This is the content of the first step. ".repeat(20)}</>,
+  },
+  {
+    content: <>{"This is the content of the second step. ".repeat(20)}</>,
+  },
+  {
+    content: <>{"This is the content of the third step. ".repeat(20)}</>,
+  },
+];
+export function StepperDialogExample() {
+  const [step, setStep] = useState(0);
+  const onFinish = useCallback(() => alert("Finish!"), []);
+  const onCancel = useCallback(() => setStep(0), []);
+
+  return (
+    <StepperDialog
+      currentStep={step}
+      steps={steps}
+      hideSteps={true}
+      footerContent={"<Body1>$\{step + 1} of $\{steps.length}</Body1>"}
+      disableProgression={false}
+      onStepChange={setStep}
+      onFinish={onFinish}
+      onCancel={onCancel}
+      cancelLabel="Cancel"
+      nextLabel="Next"
+      previousLabel="Previous"
+      finishLabel="Finish"
+    />
+  )
+}
+`;

examples/src/stories/stepper/stepper-page.tsx

@@ -10,6 +10,10 @@ import {
   CustomStepperDialogExample,
   CustomStepperDialogExampleAsString,
 } from "./examples/custom-style-example";
+import {
+  MinimalWithCustomFooterStepperDialogExample,
+  MinimalWithCustomFooterStepperDialogExampleAsString,
+} from "./examples/minimal-with-counter-stepper-example";
 import {
   StepperDialogExample,
   StepperDialogExampleAsString,
@@ -38,6 +42,12 @@ const examples: pageData[] = [
     example: <CustomStepperDialogExample />,
     codeString: CustomStepperDialogExampleAsString,
   },
+  {
+    title: "Minimal with custom footer",
+    anchor: "Minimal with custom footer",
+    example: <MinimalWithCustomFooterStepperDialogExample />,
+    codeString: MinimalWithCustomFooterStepperDialogExampleAsString,
+  },
 ];
 
 export const StepperPage = () => {

hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-hooks",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Hooks",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-icons",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Icons",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-illustrations",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Illustrations",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-components",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "private": true,
   "description": "Axis branded theme, components and examples for Fluent UI v9",
   "repository": {

styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-styles",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Styles for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-theme",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Theme for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tools",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "private": true,
   "author": "Axis Communications AB",
   "type": "module",