diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fcc161e..0eb3bdbf 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/components/empty-view/package.json b/components/empty-view/package.json index d8215977..3d68bb87 100644 --- a/components/empty-view/package.json +++ b/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": { diff --git a/components/password-input/package.json b/components/password-input/package.json index ed35cf41..76ac881a 100644 --- a/components/password-input/package.json +++ b/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": { diff --git a/components/slider/package.json b/components/slider/package.json index f4e88001..ffab665a 100644 --- a/components/slider/package.json +++ b/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": { diff --git a/components/stepper/package.json b/components/stepper/package.json index 5ff29574..6e5ec6dc 100644 --- a/components/stepper/package.json +++ b/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": { diff --git a/components/stepper/src/stepper-dialog.spec.tsx b/components/stepper/src/stepper-dialog.spec.tsx index 0fadadb7..6937a769 100644 --- a/components/stepper/src/stepper-dialog.spec.tsx +++ b/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( + + ); + + expect(container.querySelectorAll(".axis-Stepper").length).toBe(0); + }); + + it("should render footer content", () => { + const onFinish = vi.fn(); + + const { getByTestId } = render( + footer content} + disableProgression={false} + onStepChange={vi.fn()} + onFinish={onFinish} + onCancel={vi.fn()} + cancelLabel={"Cancel"} + nextLabel={"Next"} + previousLabel={"Previous"} + finishLabel={"Finish"} + /> + ); + + expect(getByTestId("footerContent")).toBeVisible(); + }); }); diff --git a/components/stepper/src/stepper-dialog.styles.ts b/components/stepper/src/stepper-dialog.styles.ts index ed0159bf..c2427898 100644 --- a/components/stepper/src/stepper-dialog.styles.ts +++ b/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, diff --git a/components/stepper/src/stepper-dialog.tsx b/components/stepper/src/stepper-dialog.tsx index 1f8640b1..9ecc397f 100644 --- a/components/stepper/src/stepper-dialog.tsx +++ b/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 (
-
- -
+ {!hideSteps && ( +
+ +
+ )}
{steps[currentStep].content}
@@ -59,6 +64,9 @@ export const StepperDialog = ({ )}
+ {footerContent && ( +
{footerContent}
+ )}
{currentStep > 0 && previousLabel && (