fix(odyssey-react-mui): don't require children prop for Icon buttons

okta · Mar 4, 2023 · a333527 · a333527
1 parent d15142d
commit a333527
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -347,16 +347,24 @@ export const components: ThemeOptions["components"] = {
         },
       }),
 
-      endIcon: ({ theme }) => ({
+      endIcon: ({ theme, ownerState }) => ({
         display: "inline-flex",
         margin: 0,
         marginInlineStart: theme.spacing(2),
+
+        ...(ownerState.children === undefined && {
+          marginInlineStart: 0,
+        }),
       }),
 
-      startIcon: ({ theme }) => ({
+      startIcon: ({ theme, ownerState }) => ({
         display: "inline-flex",
         margin: 0,
         marginInlineEnd: theme.spacing(2),
+
+        ...(ownerState.children === undefined && {
+          marginInlineEnd: 0,
+        }),
       }),
     },
   },

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.mdx
@@ -113,6 +113,7 @@ You should pair Disabled Buttons with a Tooltip if the user would benefit from a
 <Canvas>
   <Story id="mui-components-button--icon-only" />
 </Canvas>
+
 ## References
 
 - <a href="https://mui.com/material-ui/api/button/">Button API</a> - Material UI

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx
@@ -111,6 +111,6 @@ ButtonWithIcon.args = {
 
 export const IconOnly = Template.bind({});
 IconOnly.args = {
-  children: "",
+  children: undefined,
   startIcon: <AddIcon />,
 };