feat: add isDisabled in context from Fieldset to Field (#1911)

packages/odyssey-react-mui/src/Field.tsx

@@ -20,8 +20,9 @@ import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
 import { FieldLabel } from "./FieldLabel";
 import { Typography } from "./Typography";
-import { useUniqueId } from "./useUniqueId";
+import { useFieldset } from "./FieldsetContext";
 import { useTranslation } from "react-i18next";
+import { useUniqueId } from "./useUniqueId";
 
 export const fieldTypeValues = ["single", "group"] as const;
 
@@ -88,7 +89,7 @@ const Field = ({
   hasVisibleLabel,
   hint,
   id: idOverride,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   isRadioGroup = false,
   isOptional = false,
   label,
@@ -106,6 +107,13 @@ const Field = ({
     [errorId, hintId]
   );
 
+  const { isDisabled: isFieldsetDisabled } = useFieldset();
+
+  const isDisabled = useMemo(
+    () => isDisabledProp || isFieldsetDisabled,
+    [isDisabledProp, isFieldsetDisabled]
+  );
+
   return (
     <MuiFormControl
       component={fieldType === "group" ? "fieldset" : "div"}

packages/odyssey-react-mui/src/Fieldset.tsx

@@ -11,9 +11,10 @@
  */
 
 import { Box } from "@mui/material";
-import { memo, ReactElement } from "react";
+import { memo, ReactElement, useMemo } from "react";
 
 import { Callout } from "./Callout";
+import { FieldsetContext } from "./FieldsetContext";
 import { Legend, Subordinate } from "./Typography";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
@@ -35,6 +36,10 @@ export type FieldsetProps = {
    * Defines a unique identifier (ID) which must be unique in the whole document.
    */
   id?: string;
+  /**
+   * Disables the component and any wrapped input fields.
+   */
+  isDisabled?: boolean;
   /**
    * The title of the Fieldset
    */
@@ -50,16 +55,24 @@ const Fieldset = ({
   children,
   description,
   id: idOverride,
+  isDisabled = false,
   legend,
   name,
 }: FieldsetProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const id = useUniqueId(idOverride);
 
+  const fieldsetContextValue = useMemo(
+    () => ({
+      isDisabled,
+    }),
+    [isDisabled]
+  );
+
   return (
     <Box
       component="fieldset"
-      // disabled={isDisabled}
+      disabled={isDisabled}
       name={name}
       id={id}
       sx={{
@@ -75,9 +88,14 @@ const Fieldset = ({
       }}
     >
       <Legend>{legend}</Legend>
+
       {description && <Subordinate component="p">{description}</Subordinate>}
+
       {alert}
-      {children}
+
+      <FieldsetContext.Provider value={fieldsetContextValue}>
+        {children}
+      </FieldsetContext.Provider>
     </Box>
   );
 };

packages/odyssey-react-mui/src/FieldsetContext.tsx

@@ -0,0 +1,23 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createContext, useContext } from "react";
+
+export type FieldsetContextValue = {
+  isDisabled: boolean;
+};
+
+export const FieldsetContext = createContext<FieldsetContextValue>({
+  isDisabled: false,
+});
+
+export const useFieldset = () => useContext(FieldsetContext);

packages/odyssey-react-mui/src/MenuButton.tsx

@@ -57,19 +57,19 @@ export type MenuButtonProps = {
   id?: string;
 } & (
   | {
-      buttonLabel: string;
       ariaLabel?: string;
       ariaLabelledBy?: string;
+      buttonLabel: string;
     }
   | {
-      buttonLabel?: undefined | "";
       ariaLabel: string;
       ariaLabelledBy?: string;
+      buttonLabel?: undefined | "";
     }
   | {
-      buttonLabel?: undefined | "";
       ariaLabel?: string;
       ariaLabelledBy: string;
+      buttonLabel?: undefined | "";
     }
 );
 

packages/odyssey-storybook/src/components/odyssey-mui/Fieldset/Fieldset.stories.tsx

@@ -19,16 +19,26 @@ import {
 } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
-const storybookMeta: Meta = {
+const storybookMeta: Meta<FieldsetProps> = {
   title: "MUI Components/Forms/Fieldset",
   component: Fieldset,
   argTypes: {
-    legend: {
-      control: "text",
-      description: "The title of the Fieldset",
+    alert: {
+      control: null,
+      description:
+        "A Callout indicating a Fieldset-wide error or status update",
       table: {
         type: {
-          summary: "string",
+          summary: "ReactElement<typeof Callout>",
+        },
+      },
+    },
+    children: {
+      control: "obj",
+      description: "Field components within the Fieldset",
+      table: {
+        type: {
+          summary: "ReactElement | Array<ReactElement>",
         },
       },
     },
@@ -41,37 +51,36 @@ const storybookMeta: Meta = {
         },
       },
     },
-    children: {
-      control: "obj",
-      description: "Field components within the Fieldset",
+    id: {
+      control: "text",
+      description: "Defines a unique identifier (ID) for the Fieldset",
       table: {
         type: {
-          summary: "ReactElement | Array<ReactElement>",
+          summary: "string",
         },
       },
     },
-    alert: {
-      control: null,
-      description:
-        "A Callout indicating a Fieldset-wide error or status update",
+    isDisabled: {
+      control: "boolean",
+      description: "Disables the component and any wrapped input fields.",
       table: {
         type: {
-          summary: "ReactElement<typeof Callout>",
+          summary: "boolean",
         },
       },
     },
-    name: {
+    legend: {
       control: "text",
-      description: "The name associated with the group",
+      description: "The title of the Fieldset",
       table: {
         type: {
           summary: "string",
         },
       },
     },
-    id: {
+    name: {
       control: "text",
-      description: "Defines a unique identifier (ID) for the Fieldset",
+      description: "The name associated with the group",
       table: {
         type: {
           summary: "string",
@@ -80,51 +89,29 @@ const storybookMeta: Meta = {
     },
   },
   args: {
-    legend: "Docking registration",
     children: (
       <>
         <TextField label="Vessel name" />
         <TextField isMultiline label="Reason for visit" />
       </>
     ),
+    legend: "Docking registration",
   },
   decorators: [MuiThemeDecorator],
   tags: ["autodocs"],
 };
 
 export default storybookMeta;
 
-const Template: StoryObj<FieldsetProps> = {
-  render: function C(args) {
-    return (
-      <Fieldset
-        legend={args.legend}
-        name={args.name}
-        description={args.description}
-        alert={args.alert}
-        id={args.id}
-      >
-        {args.children}
-      </Fieldset>
-    );
-  },
-};
-
-// States
-
-export const Simple: StoryObj<FieldsetProps> = {
-  ...Template,
-};
+export const Simple: StoryObj<FieldsetProps> = {};
 
 export const Description: StoryObj<FieldsetProps> = {
-  ...Template,
   args: {
     description: "Register your ship before docking with the station.",
   },
 };
 
 export const Alert: StoryObj<FieldsetProps> = {
-  ...Template,
   args: {
     alert: (
       <Callout severity="error" role="alert" title="Something went wrong">