chore: merge branch 'main' into align-to-react18

CHANGELOG.md

@@ -1,5 +1,6 @@
-## [8.17.0](https://github.com/AxisCommunications/fluent-components/compare/38eb6078d96f18c71c51a22f52961daa9062e015..140904fbfd3c56bde08d14c6f33968552e227e77) (2024-03-05T10:45:19.659Z)
+## [8.18.0](https://github.com/AxisCommunications/fluent-components/compare/f5b6b274dacd01e30374f6e1a60798b9a411f511..703ba4dbf8a00c1b6791ee548753cd9a94b1bf47) (2024-03-14T14:05:47.206Z)
 
-### 🐛 Bug fixes
+### 🚧 Maintenance
 
-  - **topbar**: use correct my systems icon (#220) ([140904f](https://github.com/AxisCommunications/fluent-components/commit/140904fbfd3c56bde08d14c6f33968552e227e77))
+  - add classNames for stepper part (#224) ([703ba4d](https://github.com/AxisCommunications/fluent-components/commit/703ba4dbf8a00c1b6791ee548753cd9a94b1bf47))
+  - bump react in examples (#223) ([5dc135a](https://github.com/AxisCommunications/fluent-components/commit/5dc135a550c835b2f026bcd3871db469a5cbd004))

components/password-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiscommunications/fluent-password-input",
-  "version": "8.17.0",
+  "version": "8.18.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": "8.17.0",
+  "version": "8.18.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": "8.17.0",
+  "version": "8.18.0",
   "description": "Stepper for Fluent UI v9",
   "homepage": "https://github.com/AxisCommunications/fluent-components#readme",
   "repository": {

components/stepper/src/index.ts

@@ -1,4 +1,5 @@
 export { Stepper } from "./stepper";
 export { StepperDialog } from "./stepper-dialog";
+export { StepperDialogClassNames } from "./stepper-dialog.styles";
 export type { DialogStep, StepperDialogProps } from "./stepper-dialog.types";
 export type { Step, StepperProps } from "./stepper.types";

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

@@ -1,6 +1,25 @@
-import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import {
+  makeStyles,
+  mergeClasses,
+  shorthands,
+  tokens,
+} from "@fluentui/react-components";
 
-export const useStepperDialogStyles = makeStyles({
+const ROOT_CLASS_NAME = "axis-StepperDialog";
+
+export const StepperDialogClassNames = {
+  root: ROOT_CLASS_NAME,
+  container: `${ROOT_CLASS_NAME}-container`,
+  content: `${ROOT_CLASS_NAME}-content`,
+  buttonContainer: `${ROOT_CLASS_NAME}-buttons-container`,
+  buttons: `${ROOT_CLASS_NAME}-buttons`,
+  cancel: `${ROOT_CLASS_NAME}-cancel`,
+  previous: `${ROOT_CLASS_NAME}-previous`,
+  next: `${ROOT_CLASS_NAME}-next`,
+  finish: `${ROOT_CLASS_NAME}-finish`,
+};
+
+const useStyles = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -35,3 +54,56 @@ export const useStepperDialogStyles = makeStyles({
     ...shorthands.gap(tokens.spacingHorizontalL),
   },
 });
+
+type TUseStepperDialogStyles = {
+  className?: string;
+  vertical?: boolean;
+};
+
+export function useStepperDialogStyles({
+  vertical,
+  className,
+}: TUseStepperDialogStyles) {
+  const styles = useStyles();
+
+  const rootStyles = mergeClasses(
+    StepperDialogClassNames.root,
+    styles.root,
+    className
+  );
+  const containerStyles = mergeClasses(
+    StepperDialogClassNames.container,
+    styles.stepperContainer,
+    vertical && styles.stepperContainerVertical
+  );
+  const contentStyles = mergeClasses(
+    StepperDialogClassNames.content,
+    styles.stepContent
+  );
+  const buttonContainerStyles = mergeClasses(
+    StepperDialogClassNames.buttonContainer,
+    styles.buttonContainer
+  );
+  const buttonStyles = mergeClasses(
+    StepperDialogClassNames.buttons,
+    styles.buttons
+  );
+
+  const buttonCancel = mergeClasses(StepperDialogClassNames.cancel);
+  const buttonPrevious = mergeClasses(StepperDialogClassNames.previous);
+  const buttonNext = mergeClasses(StepperDialogClassNames.next);
+  const buttonFinish = mergeClasses(StepperDialogClassNames.finish);
+
+  return {
+    styles,
+    rootStyles,
+    containerStyles,
+    contentStyles,
+    buttonContainerStyles,
+    buttonStyles,
+    buttonCancel,
+    buttonPrevious,
+    buttonNext,
+    buttonFinish,
+  };
+}

components/stepper/src/stepper-dialog.tsx

@@ -1,8 +1,8 @@
+import { Button } from "@fluentui/react-components";
 import React, { useCallback } from "react";
-import { Button, mergeClasses } from "@fluentui/react-components";
+import { Stepper } from "./stepper";
 import { useStepperDialogStyles } from "./stepper-dialog.styles";
 import { StepperDialogProps } from "./stepper-dialog.types";
-import { Stepper } from "./stepper";
 
 export const StepperDialog = ({
   currentStep,
@@ -16,7 +16,20 @@ export const StepperDialog = ({
   nextLabel,
   previousLabel,
   finishLabel,
+  className,
 }: StepperDialogProps) => {
+  const {
+    rootStyles,
+    containerStyles,
+    contentStyles,
+    buttonContainerStyles,
+    buttonStyles,
+    buttonCancel,
+    buttonPrevious,
+    buttonNext,
+    buttonFinish,
+  } = useStepperDialogStyles({ vertical, className });
+
   const onNext = useCallback(
     () => onStepChange(currentStep + 1),
     [currentStep, onStepChange]
@@ -25,36 +38,36 @@ export const StepperDialog = ({
     () => onStepChange(currentStep - 1),
     [currentStep, onStepChange]
   );
-  const styles = useStepperDialogStyles();
-  const rootStyles = mergeClasses("axis-StepperDialog", styles.root);
-  const stepperContainerStyles = mergeClasses(
-    styles.stepperContainer,
-    vertical && styles.stepperContainerVertical
-  );
+
   return (
     <div className={rootStyles}>
-      <div className={stepperContainerStyles}>
+      <div className={containerStyles}>
         <div>
           <Stepper
             currentStep={currentStep}
             steps={steps}
             vertical={vertical}
           />
         </div>
-        <div className={styles.stepContent}>{steps[currentStep].content}</div>
+        <div className={contentStyles}>{steps[currentStep].content}</div>
       </div>
-      <div className={styles.buttonContainer}>
-        <div className={styles.buttons}>
+      <div className={buttonContainerStyles}>
+        <div className={buttonStyles}>
           {cancelLabel && onCancel && (
-            <Button onClick={onCancel}>{cancelLabel}</Button>
+            <Button className={buttonCancel} onClick={onCancel}>
+              {cancelLabel}
+            </Button>
           )}
         </div>
-        <div className={styles.buttons}>
-          {currentStep > 0 && (
-            <Button onClick={onPrevious}>{previousLabel}</Button>
+        <div className={buttonStyles}>
+          {currentStep > 0 && previousLabel && (
+            <Button className={buttonPrevious} onClick={onPrevious}>
+              {previousLabel}
+            </Button>
           )}
-          {currentStep !== steps.length - 1 && (
+          {currentStep !== steps.length - 1 && nextLabel && (
             <Button
+              className={buttonNext}
               disabled={disableProgression}
               onClick={onNext}
               appearance="primary"
@@ -64,6 +77,7 @@ export const StepperDialog = ({
           )}
           {currentStep === steps.length - 1 && (
             <Button
+              className={buttonFinish}
               onClick={onFinish}
               disabled={disableProgression}
               appearance="primary"

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

@@ -12,8 +12,9 @@ export type StepperDialogProps = {
   onFinish: () => void;
   onCancel?: () => void;
   cancelLabel?: string;
-  nextLabel: string;
-  previousLabel: string;
+  nextLabel?: string;
+  previousLabel?: string;
   finishLabel: string;
   disableProgression?: boolean;
+  className?: string;
 };

components/topbar/package.json

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

examples/package.json

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

examples/src/stories/stepper/examples/custom-style-example.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback, useState } from "react";
+import {
+  DialogStep,
+  StepperDialog,
+  StepperDialogClassNames,
+} from "@axiscommunications/fluent-stepper";
+import { makeStyles } from "@fluentui/react-components";
+
+const useOverrideStyles = makeStyles({
+  root: {
+    // use StepperDialogClassNames template string to see all selectors
+    [`> * .${StepperDialogClassNames.previous}`]: {
+      display: "none",
+    },
+  },
+});
+
+const steps: DialogStep[] = [
+  {
+    name: "First step",
+    content: <>{"This is the content of the first step. ".repeat(20)}</>,
+  },
+  {
+    name: "Second step",
+    content: <>{"This is the content of the second step. ".repeat(20)}</>,
+  },
+  {
+    name: "Third step",
+    content: <>{"This is the content of the third step. ".repeat(20)}</>,
+  },
+];
+
+export function CustomStepperDialogExample() {
+  const [step, setStep] = useState(0);
+  const onFinish = useCallback(() => alert("Finish!"), []);
+  const onCancel = useCallback(() => setStep(0), []);
+
+  const overrideStyles = useOverrideStyles();
+
+  return (
+    <StepperDialog
+      className={overrideStyles.root}
+      currentStep={step}
+      steps={steps}
+      disableProgression={false}
+      onStepChange={setStep}
+      onFinish={onFinish}
+      onCancel={onCancel}
+      cancelLabel="Cancel"
+      nextLabel="Next"
+      previousLabel="Previous"
+      finishLabel="Finish"
+    />
+  );
+}
+
+export const CustomStepperDialogExampleAsString = `
+import React, { useCallback, useState } from "react";
+import { DialogStep, StepperDialog, StepperDialogClassNames } from "@axiscommunications/fluent-stepper";
+import { makeStyles } from "@fluentui/react-components";
+
+const useOverrideStyles = makeStyles({
+  root: {
+    // use StepperDialogClassNames template string to see all selectors
+    [> * .${StepperDialogClassNames.previous}]: {
+      display: "none",
+    },
+  },
+})
+
+const steps: DialogStep[] = [
+  {
+    name: "First step",
+    content: <>{"This is the content of the first step. ".repeat(20)}</>,
+  },
+  {
+    name: "Second step",
+    content: <>{"This is the content of the second step. ".repeat(20)}</>,
+  },
+  {
+    name: "Third step",
+    content: <>{"This is the content of the third step. ".repeat(20)}</>,
+  },
+];
+
+export function CustomStepperDialogExample() {
+  const [step, setStep] = useState(0);
+  const onFinish = useCallback(() => alert("Finish!"), []);
+  const onCancel = useCallback(() => setStep(0), []);
+
+  const overrideStyles = useOverrideStyles()
+
+  return (
+    <StepperDialog
+      className={overrideStyles.root}
+      currentStep={step}
+      steps={steps}
+      disableProgression={false}
+      onStepChange={setStep}
+      onFinish={onFinish}
+      onCancel={onCancel}
+      cancelLabel="Cancel"
+      nextLabel="Next"
+      previousLabel="Previous"
+      finishLabel="Finish"
+    />
+  );
+}
+`;

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

@@ -14,6 +14,10 @@ import {
   VerticalStepperDialogExample,
   VerticalStepperDialogExampleAsString,
 } from "./examples/vertical-stepper-dialog-example";
+import {
+  CustomStepperDialogExample,
+  CustomStepperDialogExampleAsString,
+} from "./examples/custom-style-example";
 
 const examples: pageData[] = [
   {
@@ -28,6 +32,12 @@ const examples: pageData[] = [
     example: <VerticalStepperDialogExample />,
     codeString: VerticalStepperDialogExampleAsString,
   },
+  {
+    title: "Override styling",
+    anchor: "Override styling",
+    example: <CustomStepperDialogExample />,
+    codeString: CustomStepperDialogExampleAsString,
+  },
 ];
 
 export const StepperPage = () => {

hooks/package.json

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

icons/package.json

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