@simplybusiness/mobius 4.8.7 → 4.9.0

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -9,15 +9,6 @@ const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",
   component: Checkbox,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     label: {
       control: { type: "text" },
     },
@@ -29,6 +20,7 @@ const meta: Meta<typeof Checkbox> = {
       "defaultSelected",
       "value",
       "groupDisabled",
+      "validationState",
     ),
   },
   decorators: [
@@ -71,7 +63,7 @@ export const Valid: StoryType = {
     value: "agree",
     isDisabled: false,
     errorMessage: "",
-    validationState: "valid",
+    isInvalid: false,
     defaultSelected: false,
     isRequired: false,
   },
@@ -83,7 +75,7 @@ export const Invalid: StoryType = {
     label: "I agree",
     value: "agree",
     isDisabled: false,
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "This is an error message",
     defaultSelected: false,
     isRequired: false,

package/src/components/Checkbox/Checkbox.test.tsx

@@ -167,7 +167,7 @@ describe("Checkbox", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <Checkbox label={optionText} validationState="valid" value="value" />,
+        <Checkbox label={optionText} isInvalid={false} value="value" />,
       );
 
       const option = getByLabelText(optionText);
@@ -181,7 +181,7 @@ describe("Checkbox", () => {
       const { getByLabelText } = render(
         <Checkbox
           label={optionText}
-          validationState="invalid"
+          isInvalid
           errorMessage="There is a problem"
           value="value"
         />,
@@ -260,7 +260,7 @@ describe("Checkbox", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <Checkbox label={optionText} value="value" validationState="invalid" />,
+        <Checkbox label={optionText} value="value" isInvalid />,
       );
 
       const option = getByLabelText(optionText);

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ import { ErrorMessage } from "../ErrorMessage";
 import { ForwardedRefComponent } from "../../types/components";
 import { CheckboxElementType, CheckboxProps, CheckboxRef } from "./types";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useValidationClasses } from "../../hooks";
 
 export const Checkbox: ForwardedRefComponent<
   CheckboxProps,
@@ -25,6 +26,7 @@ export const Checkbox: ForwardedRefComponent<
     isDisabled,
     isRequired,
     validationState,
+    isInvalid,
     onChange,
     className,
     errorMessage,
@@ -38,15 +40,18 @@ export const Checkbox: ForwardedRefComponent<
   const fallbackRef = useRef<HTMLInputElement>(null);
   const refObj = ref || fallbackRef;
   const inputId = useId();
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
+  });
   const checkboxClasses = classNames(
     {
       "--is-disabled": isDisabled,
       "--is-selected": selected,
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
       "--is-required": typeof isRequired === "boolean" && isRequired,
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
     },
+    validationClasses,
     className,
   );
   // Append an additional wrapper class name to differenitate from input
@@ -94,7 +99,7 @@ export const Checkbox: ForwardedRefComponent<
         <input
           aria-describedby={describedBy}
           aria-errormessage={shouldErrorMessageShow}
-          aria-invalid={validationState === "invalid"}
+          aria-invalid={isInvalid}
           readOnly={isReadOnly}
           disabled={isDisabled}
           ref={refObj}

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -9,16 +9,13 @@ const meta: Meta<typeof CheckboxGroup> = {
   title: "Forms/CheckboxGroup",
   component: CheckboxGroup,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
-    ...excludeControls("isRequired", "isReadOnly", "defaultValue", "value"),
+    ...excludeControls(
+      "isRequired",
+      "isReadOnly",
+      "defaultValue",
+      "value",
+      "validationState",
+    ),
   },
   decorators: [
     Story => (
@@ -96,7 +93,7 @@ export const Valid: StoryType = {
     label: "Value",
     errorMessage: "",
     isDisabled: false,
-    validationState: "valid",
+    isInvalid: false,
     orientation: "vertical",
     isRequired: false,
   },
@@ -114,7 +111,7 @@ export const Invalid: StoryType = {
     label: "Value",
     errorMessage: "This field is required",
     isDisabled: false,
-    validationState: "invalid",
+    isInvalid: true,
     orientation: "vertical",
     isRequired: false,
   },

package/src/components/Checkbox/CheckboxGroup.test.tsx

@@ -379,7 +379,7 @@ describe("CheckboxGroup", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <CheckboxGroup validationState="valid">
+        <CheckboxGroup isInvalid={false}>
           <Checkbox label={optionText} value="value" />
         </CheckboxGroup>,
       );
@@ -393,10 +393,7 @@ describe("CheckboxGroup", () => {
       const optionText = "Agree";
 
       const { getByLabelText } = render(
-        <CheckboxGroup
-          validationState="invalid"
-          errorMessage="There is a problem"
-        >
+        <CheckboxGroup isInvalid errorMessage="There is a problem">
           <Checkbox label={optionText} value="value" />,
         </CheckboxGroup>,
       );

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -22,6 +22,7 @@ import {
 import { Label } from "../Label";
 import { ErrorMessage } from "../ErrorMessage";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
+import { useValidationClasses } from "../../hooks";
 
 export const CheckboxGroup: ForwardedRefComponent<
   CheckboxGroupProps,
@@ -32,6 +33,7 @@ export const CheckboxGroup: ForwardedRefComponent<
     isDisabled = false,
     isRequired,
     validationState,
+    isInvalid,
     orientation = "vertical",
     onChange,
     className,
@@ -54,11 +56,16 @@ export const CheckboxGroup: ForwardedRefComponent<
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
     },
   );
-  const labelClasses = classNames({
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-    "--is-disabled": isDisabled,
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
   });
+  const labelClasses = classNames(
+    {
+      "--is-disabled": isDisabled,
+    },
+    validationClasses,
+  );
   const errorMessageId = useId();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
   const describedBy = spaceDelimitedList([
@@ -112,7 +119,7 @@ export const CheckboxGroup: ForwardedRefComponent<
               isDisabled,
               isRequired,
               isReadOnly,
-              validationState,
+              isInvalid,
               defaultSelected: selected.includes(child.props.value),
               onChange: handleChange,
               "aria-describedby": describedBy,

package/src/components/Checkbox/types.ts

@@ -1,11 +1,13 @@
 import { ChangeEvent, ReactNode, Ref, RefAttributes } from "react";
 import { DOMProps } from "../../types/dom";
+import { Validation } from "../../types";
 
 export type CheckboxElementType = HTMLInputElement;
 export type CheckboxRef = Ref<CheckboxElementType>;
 
 export interface CheckboxProps
   extends DOMProps,
+    Validation,
     RefAttributes<CheckboxElementType> {
   className?: string;
   // The content to display as the label.
@@ -18,8 +20,6 @@ export interface CheckboxProps
   onChange?: (event: ChangeEvent<CheckboxElementType>) => void;
   // The default value (uncontrolled).
   defaultSelected?: boolean;
-  // Whether the input should display its "valid" or "invalid" visual styling.
-  validationState?: "valid" | "invalid";
   // Whether the input can be selected but not changed by the user.
   isReadOnly?: boolean;
   // Whether user input is required on the input before form submission.
@@ -47,6 +47,7 @@ export interface CheckboxProps
 export type CheckboxGroupElementType = HTMLDivElement;
 interface CheckboxGroupPropsInternal
   extends DOMProps,
+    Validation,
     RefAttributes<CheckboxGroupElementType> {
   children: ReactNode;
   className?: string;
@@ -63,8 +64,6 @@ interface CheckboxGroupPropsInternal
   // "aria-errormessage"?: string;
   // Identifies the element (or elements) that describes the object.
   "aria-describedby"?: string;
-  // Whether the input should display its "valid" or "invalid" visual styling.
-  validationState?: "valid" | "invalid";
   // Whether user input is required on the input before form submission.
   isRequired?: boolean;
   // Whether the input is disabled.

package/src/components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import { ModalProps } from "./types";
 import { mergeRefs } from "../../utils";
 import { ModalContext } from "./ModalContext";
 import { useDialog } from "../../hooks";
+import { useDeprecationWarning } from "../../hooks/useDeprecationWarning";
 
 export type ModalElementType = HTMLDialogElement;
 export type ModalRef = Ref<ModalElementType>;
@@ -30,22 +31,14 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
     shouldFocusAfterRender,
     parentSelector,
   } = props;
-  const hasWarnedAboutMissingLabels = useRef<boolean>(false);
-  // Handle deprecated props
-  if (!hasWarnedAboutMissingLabels.current) {
-    if (
-      size ||
-      appElement ||
-      preventCloseOnEsc ||
-      shouldFocusAfterRender ||
-      parentSelector
-    ) {
-      console.warn(
-        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,
-      );
-      hasWarnedAboutMissingLabels.current = true;
-    }
-  }
+
+  useDeprecationWarning({
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector,
+  });
 
   const shouldTransition = supportsDialog();
   const dialogRef = useRef<HTMLDialogElement | null>(null);

package/src/components/NumberField/NumberField.stories.tsx

@@ -9,15 +9,6 @@ const meta: Meta<typeof NumberField> = {
   title: "Forms/NumberField",
   component: NumberField,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     minValue: {
       control: {
         control: { type: "range" },
@@ -34,7 +25,7 @@ const meta: Meta<typeof NumberField> = {
         step: 1,
       },
     },
-    ...excludeControls("value"),
+    ...excludeControls("value", "validationState"),
   },
   args: {
     minValue: 0,
@@ -80,7 +71,7 @@ export const Valid: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
-    validationState: "valid",
+    isInvalid: false,
     defaultValue: 0,
     errorMessage: "",
     step: 1,
@@ -92,7 +83,7 @@ export const Invalid: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "Error message",
     defaultValue: 0,
     step: 1,

package/src/components/NumberField/NumberField.tsx

@@ -12,22 +12,23 @@ import {
   useState,
 } from "react";
 import { DOMProps } from "../../types/dom";
-import { UseLabelProps, useLabel } from "../../hooks";
+import { UseLabelProps, useLabel, useValidationClasses } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
+import { Validation } from "../../types";
 
 export type NumberFieldElementType = HTMLInputElement;
 
 export interface NumberFieldProps
   extends DOMProps,
+    Validation,
     UseLabelProps,
     RefAttributes<NumberFieldElementType> {
   id?: string;
   /** Custom class name for setting specific CSS */
   className?: string;
-  validationState?: "valid" | "invalid" | undefined;
   /** The smallest value allowed for the input. */
   minValue?: number;
   /** The largest value allowed for the input. */
@@ -69,6 +70,7 @@ export const NumberField: ForwardedRefComponent<
     className,
     errorMessage,
     validationState,
+    isInvalid,
     isReadOnly,
     minValue,
     maxValue,
@@ -94,19 +96,29 @@ export const NumberField: ForwardedRefComponent<
     "--is-optional": optional,
   });
 
-  const inputClasses = classNames("mobius/NumberFieldInput", className, {
-    "--is-required": required,
-    "--is-optional": optional,
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-    "--is-disabled": isDisabled,
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
   });
 
-  const labelClasses = classNames("mobius/NumberFieldLabel", {
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-    "--is-disabled": isDisabled,
-  });
+  const inputClasses = classNames(
+    "mobius/NumberFieldInput",
+    className,
+    {
+      "--is-required": required,
+      "--is-optional": optional,
+      "--is-disabled": isDisabled,
+    },
+    validationClasses,
+  );
+
+  const labelClasses = classNames(
+    "mobius/NumberFieldLabel",
+    {
+      "--is-disabled": isDisabled,
+    },
+    validationClasses,
+  );
 
   const errorMessageId = useId();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
@@ -165,7 +177,7 @@ export const NumberField: ForwardedRefComponent<
           required={required}
           aria-describedby={describedBy}
           aria-errormessage={shouldErrorMessageShow}
-          aria-invalid={validationState === "invalid"}
+          aria-invalid={isInvalid}
           readOnly={isReadOnly}
           disabled={isDisabled}
           autoComplete="off"

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -9,20 +9,11 @@ const meta: Meta<typeof PasswordField> = {
   title: "Forms/PasswordField",
   component: PasswordField,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     type: {
       control: { type: "radio" },
       options: ["text", "password"],
     },
-    ...excludeControls("description"),
+    ...excludeControls("description", "validationState"),
   },
   args: {
     isReadOnly: false,

package/src/components/Radio/Radio.stories.tsx

@@ -12,15 +12,6 @@ const meta: Meta<typeof RadioGroup> = {
   title: "Forms/Radio",
   component: RadioGroup,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     orientation: {
       control: { type: "radio" },
       options: ["horizontal", "vertical"],
@@ -35,6 +26,7 @@ const meta: Meta<typeof RadioGroup> = {
       "setSelected",
       "defaultValue",
       "value",
+      "validationState",
     ),
   },
   decorators: [
@@ -107,7 +99,7 @@ export const Valid: StoryType = {
     isDisabled: false,
     isRequired: false,
     errorMessage: "",
-    validationState: "valid",
+    isInvalid: false,
     orientation: "vertical",
   },
 };
@@ -124,7 +116,7 @@ export const Invalid: StoryType = {
     isDisabled: false,
     isRequired: false,
     errorMessage: "Please select a color",
-    validationState: "invalid",
+    isInvalid: true,
     orientation: "vertical",
   },
 };

package/src/components/Radio/Radio.test.tsx

@@ -375,7 +375,7 @@ describe("Radio", () => {
 
     it("sets classes for valid state", () => {
       const { container } = render(
-        <RadioGroup label="Color" validationState="valid">
+        <RadioGroup label="Color" isInvalid={false}>
           <Radio value="red">Red</Radio>
           <Radio value="blue">Blue</Radio>
         </RadioGroup>,
@@ -386,7 +386,7 @@ describe("Radio", () => {
 
     it("sets classes for invalid state", () => {
       const { container } = render(
-        <RadioGroup label="Color" validationState="invalid">
+        <RadioGroup label="Color" isInvalid>
           <Radio value="red">Red</Radio>
           <Radio value="blue">Blue</Radio>
         </RadioGroup>,
@@ -448,7 +448,7 @@ describe("Radio", () => {
   describe("given an invalid state", () => {
     it("renders aria-invalid attribute on container", () => {
       const { container } = render(
-        <RadioGroup label="Color" validationState="invalid">
+        <RadioGroup label="Color" isInvalid>
           <Radio value="red">Red</Radio>
           <Radio value="blue">Blue</Radio>
         </RadioGroup>,

package/src/components/Radio/RadioGroup.tsx

@@ -19,11 +19,14 @@ import { HTMLElementEvent } from "../../types/events";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
+import { Validation } from "../../types";
+import { useValidationClasses } from "../../hooks";
 
 export type RadioGroupElementType = HTMLDivElement;
 
 export interface RadioGroupProps
   extends DOMProps,
+    Validation,
     RefAttributes<RadioGroupElementType> {
   children: ReactNode;
   className?: string;
@@ -39,8 +42,6 @@ export interface RadioGroupProps
   "aria-errormessage"?: string;
   // Identifies the element (or elements) that describes the object.
   "aria-describedby"?: string;
-  // Whether the input should display its "valid" or "invalid" visual styling.
-  validationState?: "valid" | "invalid";
   // Whether user input is required on the input before form submission.
   isRequired?: boolean;
   // Whether the input is disabled.
@@ -82,6 +83,7 @@ const RadioGroup: ForwardedRefComponent<
     isDisabled = false,
     isRequired,
     validationState,
+    isInvalid,
     orientation = "vertical",
     className,
     errorMessage,
@@ -94,10 +96,12 @@ const RadioGroup: ForwardedRefComponent<
   } = props;
   const defaultSelected = getDefaultVal(children, defaultValue);
   const [selected, setSelected] = useState<string>(defaultSelected);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
+  });
   const radioClasses = {
     "--is-disabled": isDisabled,
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
     "--is-required": typeof isRequired === "boolean" && isRequired,
     "--is-optional": typeof isRequired === "boolean" && !isRequired,
     [`--is-${orientation}`]: true,
@@ -107,11 +111,12 @@ const RadioGroup: ForwardedRefComponent<
     "mobius",
     "mobius/RadioGroup",
     radioClasses,
+    validationClasses,
   );
   const radioWrapperClasses = classNames("mobius/RadioWrapper", {
     [`--is-${orientation}`]: true,
   });
-  const labelClasses = classNames(radioClasses);
+  const labelClasses = classNames(radioClasses, validationClasses);
   const errorMessageId = useId();
   const defaultNameAttrId = useId();
   const nameAttribute = name || defaultNameAttrId;
@@ -128,7 +133,7 @@ const RadioGroup: ForwardedRefComponent<
       aria-describedby={props["aria-describedby"]}
       aria-disabled={isDisabled}
       aria-errormessage={shouldErrorMessageShow}
-      aria-invalid={validationState === "invalid"}
+      aria-invalid={isInvalid}
       aria-label={props["aria-label"]}
       aria-labelledby={props["aria-labelledby"] || labelId}
       aria-orientation={orientation}

package/src/components/Select/Select.mdx

@@ -106,7 +106,7 @@ import { Select, Option } from "@simplybusiness/mobius";
   name="color"
   label="Colors"
   defaultValue="green"
-  validationState="valid"
+  isInvalid={false}
 >
   <Option key="none" value="" isDisabled>
     Please select a color
@@ -135,7 +135,7 @@ import { Select, Option } from "@simplybusiness/mobius";
   name="color"
   label="Colors"
   defaultValue="green"
-  validationState="invalid"
+  isInvalid
   errorMessage="Unacceptable color"
 >
   <Option key="none" value="" isDisabled>

package/src/components/Select/Select.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Option } from "../Option";
 import { Select, SelectProps } from "./Select";
+import { excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof Select>;
 
@@ -9,19 +10,11 @@ const meta: Meta<typeof Select> = {
   title: "Forms/Select",
   component: Select,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     value: {
       control: { type: "select" },
       options: ["", "red", "blue", "green"],
     },
+    ...excludeControls("validationState"),
   },
   decorators: [
     Story => (
@@ -135,7 +128,7 @@ export const Valid: StoryType = {
     name: "color",
     label: "Colors",
     defaultValue: "green",
-    validationState: "valid",
+    isInvalid: false,
     errorMessage: "",
     isDisabled: false,
     isRequired: false,
@@ -163,7 +156,7 @@ export const Invalid: StoryType = {
     name: "color",
     label: "Colors",
     defaultValue: "green",
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "Unacceptable color",
     isDisabled: false,
     isRequired: false,

package/src/components/Select/Select.test.tsx

@@ -204,7 +204,7 @@ describe("Select", () => {
 
     it("includes valid state class name", () => {
       render(
-        <Select label="Color" data-testid="test" validationState="valid">
+        <Select label="Color" data-testid="test" isInvalid={false}>
           <Option>Red</Option>
           <Option>Blue</Option>
         </Select>,