From 722ea85e4703735f89a7d7e1b294a93fd9476d24 Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Tue, 13 Jun 2023 09:45:08 -0400 Subject: [PATCH 1/4] fix: respect RTL in FormControlLabel children --- packages/odyssey-react-mui/src/theme/components.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 52d05e8f47..1b22e32dbf 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -1188,9 +1188,15 @@ export const components = ( }, }), label: { + display: "inline-flex", + "&:not(:first-child)": { marginInlineStart: odysseyTokens.Spacing2, }, + + "& > *": { + marginInlineStart: odysseyTokens.Spacing1, + }, }, asterisk: () => ({ display: "none", From eb48da8c6608d389cb9228a366ae69a409eb29f2 Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Tue, 13 Jun 2023 09:49:17 -0400 Subject: [PATCH 2/4] fix: respect RTL in FormLabel optional text --- packages/odyssey-react-mui/src/theme/components.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 1b22e32dbf..a751a3d934 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -1227,7 +1227,9 @@ export const components = ( MuiFormLabel: { styleOverrides: { root: { + alignItems: "center", color: odysseyTokens.TypographyColorBody, + display: "inline-flex", lineHeight: odysseyTokens.TypographyLineHeightUi, fontSize: "1rem", fontWeight: 600, @@ -1235,6 +1237,10 @@ export const components = ( "&.Mui-focused, &.Mui-error, &.Mui-disabled": { color: odysseyTokens.TypographyColorBody, }, + "& > .MuiTypography-root": { + margin: "reset", + marginInlineStart: odysseyTokens.Spacing1, + }, }, }, }, From 98d469ae6d71102f0d9c7d192e878fe3db316d8e Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Wed, 21 Jun 2023 06:49:55 -0400 Subject: [PATCH 3/4] refactor: replace margins with gap --- packages/odyssey-react-mui/src/theme/components.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 0529049455..4f5305edac 100644 --- 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" && { @@ -1242,14 +1243,7 @@ export const components = ( }), label: { display: "inline-flex", - - "&:not(:first-child)": { - marginInlineStart: odysseyTokens.Spacing2, - }, - - "& > *": { - marginInlineStart: odysseyTokens.Spacing1, - }, + gap: odysseyTokens.Spacing1, }, asterisk: () => ({ display: "none", From 6e16896d4255f9461f921e46bea5002eb5c5749c Mon Sep 17 00:00:00 2001 From: jordankoschei-okta Date: Wed, 21 Jun 2023 06:50:35 -0400 Subject: [PATCH 4/4] refactor: remove vestigial display declaration --- packages/odyssey-react-mui/src/theme/components.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx index 4f5305edac..842d227beb 100644 --- a/packages/odyssey-react-mui/src/theme/components.tsx +++ b/packages/odyssey-react-mui/src/theme/components.tsx @@ -1242,7 +1242,6 @@ export const components = ( }, }), label: { - display: "inline-flex", gap: odysseyTokens.Spacing1, }, asterisk: () => ({