fix(odyssey-react-mui): make figcaption styles a fallback

okta · Jan 30, 2023 · a4a232a · a4a232a
1 parent 616cb2e
commit a4a232a
Showing 1 changed file with 25 additions and 5 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -625,15 +625,22 @@ export const components: ThemeOptions["components"] = {
           display: "grid",
           gridGap: theme.spacing(2),
           gridTemplateColumns: "minmax(min-content, max-content)",
-          justifyContent: "center",
-          justifyItems: "center",
+          justifyContent: "start",
+          justifyItems: "start",
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          marginInline: 0,
 
-          figcaption: {
-            color: theme.palette.text.secondary,
-            fontSize: theme.typography.body1.fontSize,
+          "&:last-child": {
+            marginBlockEnd: 0,
           },
         },
 
+        "figcaption:not([class])": {
+          color: theme.palette.text.secondary,
+          fontSize: theme.typography.body1.fontSize,
+        },
+
         hr: {
           marginBlock: theme.spacing(2),
           marginInline: 0,
@@ -1453,6 +1460,16 @@ export const components: ThemeOptions["components"] = {
         ...(ownerState.stickyHeader && {
           borderCollapse: "separate",
         }),
+
+        caption: {
+          clip: "rect(0 0 0 0)",
+          clipPath: "inset(50%)",
+          height: "1px",
+          overflow: "hidden",
+          position: "absolute",
+          whiteSpace: "nowrap",
+          width: "1px",
+        },
       }),
     },
   },
@@ -1549,6 +1566,9 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiTableContainer: {
+    defaultProps: {
+      component: "figure",
+    },
     styleOverrides: {
       root: ({ theme }) => ({
         width: "unset",