RTL fixes for field labels (#1836)

* fix: respect RTL in FormControlLabel children * fix: respect RTL in FormLabel optional text * refactor: replace margins with gap * refactor: remove vestigial display declaration
okta · Jun 22, 2023 · 33eb556 · 33eb556
1 parent 8a00a14
commit 33eb556
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -1203,6 +1203,7 @@ export const components = (
     MuiFormControlLabel: {
       styleOverrides: {
         root: ({ theme, ownerState }) => ({
+          gap: odysseyTokens.Spacing2,
           marginInlineStart: 0,
           marginInlineEnd: 0, // used for row presentation of radio/checkbox
           ...(ownerState.labelPlacement === "start" && {
@@ -1241,9 +1242,7 @@ export const components = (
             },
         }),
         label: {
-          "&:not(:first-child)": {
-            marginInlineStart: odysseyTokens.Spacing2,
-          },
+          gap: odysseyTokens.Spacing1,
         },
         asterisk: () => ({
           display: "none",
@@ -1274,14 +1273,20 @@ export const components = (
     MuiFormLabel: {
       styleOverrides: {
         root: {
+          alignItems: "center",
           color: odysseyTokens.TypographyColorBody,
+          display: "inline-flex",
           lineHeight: odysseyTokens.TypographyLineHeightUi,
           fontSize: "1rem",
           fontWeight: 600,
           marginBottom: odysseyTokens.Spacing2,
           "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
             color: odysseyTokens.TypographyColorBody,
           },
+          "& > .MuiTypography-root": {
+            margin: "reset",
+            marginInlineStart: odysseyTokens.Spacing1,
+          },
         },
       },
     },