Rebrand: Form & Fieldset

packages/odyssey-design-tokens/src/border.json

@@ -15,7 +15,8 @@
       }
     },
     "radius": {
-      "main": { "value": "4px" },
+      "tight": { "value": "4px" },
+      "main": { "value": "6px" },
       "outer": { "value": "12px" },
       "round": { "value": "1.5em" }
     },

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

@@ -70,7 +70,7 @@ FieldsetProps) => {
       sx={{
         maxWidth: (theme) => theme.mixins.maxWidth,
         margin: (theme) => theme.spacing(0),
-        marginBlockEnd: (theme) => theme.spacing(4),
+        marginBlockEnd: (theme) => theme.spacing(6),
         padding: (theme) => theme.spacing(0),
         border: "0",
 
@@ -82,7 +82,11 @@ FieldsetProps) => {
       <Typography variant="legend" component="legend">
         {legend}
       </Typography>
-      {description && <Typography paragraph>{description}</Typography>}
+      {description && (
+        <Typography component="p" variant="subtitle2">
+          {description}
+        </Typography>
+      )}
       {alert}
       {children}
     </Box>

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

@@ -117,7 +117,11 @@ const Form = ({
           {title}
         </Typography>
       )}
-      {description && <Typography paragraph>{description}</Typography>}
+      {description && (
+        <Typography component="p" variant="subtitle2">
+          {description}
+        </Typography>
+      )}
       {alert}
       {children}
       {formActions && (

packages/odyssey-react-mui/src/theme/components.tsx

@@ -129,9 +129,9 @@ export const components = (
             borderRadius: 0,
           }),
           ...(ownerState.variant === "infobox" && {
-            borderRadius: odysseyTokens.BorderRadiusOuter,
+            borderRadius: odysseyTokens.BorderRadiusMain,
             "&:not(:last-child)": {
-              marginBottom: odysseyTokens.Spacing4,
+              marginBottom: odysseyTokens.Spacing6,
             },
           }),
           ...(ownerState.variant === "toast" && {
@@ -500,7 +500,7 @@ export const components = (
         root: ({ theme }) => ({
           width: `${odysseyTokens.TypographyLineHeightUi}em`,
           height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: theme.mixins.borderRadius,
+          borderRadius: odysseyTokens.BorderRadiusTight,
           borderWidth: theme.mixins.borderWidth,
           borderStyle: theme.mixins.borderStyle,
           borderColor: theme.palette.grey[500],
@@ -1182,7 +1182,7 @@ export const components = (
           maxWidth: odysseyTokens.TypographyLineLengthMax,
           ...(ownerState.margin === "normal" && {
             marginTop: 0,
-            marginBottom: theme.spacing(5),
+            marginBottom: theme.spacing(4),
             "&:last-child": {
               marginBottom: 0,
             },

packages/odyssey-react-mui/src/theme/typography.ts

@@ -79,7 +79,17 @@ export const typography = (
       fontSize: odysseyTokens.TypographyScale0,
       lineHeight: odysseyTokens.TypographyLineHeightBody,
     },
-    subtitle2: undefined,
+    subtitle2: {
+      color: odysseyTokens.HueNeutral700,
+      fontFamily: odysseyTokens.TypographyFamilyBody,
+      fontWeight: Number(odysseyTokens.TypographyWeightBody),
+      fontSize: odysseyTokens.TypographyScale1,
+      fontFeatureSettings: "'lnum', 'pnum'",
+      fontVariant: "normal",
+      lineHeight: odysseyTokens.TypographyLineHeightBody,
+      letterSpacing: "initial",
+      marginBlockEnd: odysseyTokens.Spacing5,
+    },
     body1: {
       color: odysseyTokens.TypographyColorBody,
       fontFamily: odysseyTokens.TypographyFamilyBody,
@@ -103,8 +113,8 @@ export const typography = (
     legend: {
       padding: 0,
       fontWeight: Number(odysseyTokens.TypographyWeightHeading),
-      fontSize: odysseyTokens.TypographyScale2,
-      lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+      fontSize: odysseyTokens.TypographySizeHeading5,
+      lineHeight: odysseyTokens.TypographyLineHeightHeading5,
       marginBottom: odysseyTokens.Spacing2,
     },
     ui: {

packages/odyssey-react-mui/src/theme/typography.types.ts

@@ -31,7 +31,7 @@ declare module "@mui/material/Typography" {
     legend: true;
     overline: true;
     subtitle1: true; // Design may refer to this as "caption"
-    subtitle2: false;
+    subtitle2: true;
     ui: true;
     default: true; // used by <Link>
     monochrome: true; // used by <Link>

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

@@ -13,11 +13,15 @@
 import { Meta, StoryObj } from "@storybook/react";
 import {
   Button,
+  Checkbox,
+  CheckboxGroup,
   Fieldset,
   Form,
   FormProps,
   Infobox,
+  Link,
   TextField,
+  Typography,
 } from "@okta/odyssey-react-mui";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
@@ -168,23 +172,51 @@ export const KitchenSink: StoryObj<FormProps> = {
         <Fieldset
           legend="Vessel information"
           name="vessel"
-          description="This information helps us verify vessel ownership and origination."
+          description="Taylor sat back in his chair reading the morning newspaper. The warm kitchen and the smell of coffee blended with the comfort of not having to go to work. This was his Rest Period, the first for a long time, and he was glad of it. He folded the second section back, sighing with contentment."
         >
-          <TextField label="Name of vessel" />
-          <TextField isMultiline label="Nature of visit" />
+          <TextField
+            label="Name of vessel"
+            errorMessage="This field is required."
+          />
+          <CheckboxGroup label="Systems check" isRequired>
+            <Checkbox
+              label="Life support"
+              name="life-support"
+              value="life-support"
+            />
+            <Checkbox
+              label="Warp core containment"
+              name="warp-core"
+              value="warp-core"
+            />
+            <Checkbox
+              label="Cetacean ops"
+              name="cetacean-ops"
+              value="cetacean-ops"
+            />
+          </CheckboxGroup>
         </Fieldset>
         <Fieldset
           legend="Passenger information"
           name="passengers"
           description="This information will be used to track your passengers' whereabouts."
           alert={
             <Infobox severity="error" role="alert" title="Standby for boarding">
-              Your captain is a known space pirate. Your location has been
-              reported to Station Control.
+              <Typography paragraph>
+                There is an issue with the fuel mixture ratios. Reconfigure the
+                fuel mixture and perform the safety checks again.
+              </Typography>
+
+              <Link href="#" variant="monochrome">
+                Visit fueling console
+              </Link>
             </Infobox>
           }
         >
-          <TextField label="Number of passengers" />
+          <TextField
+            label="Number of passengers"
+            hint="Specify your destination within the Sol system."
+          />
           <TextField label="Captain's name" />
         </Fieldset>
       </>