fix: fixed MenuButton children type and added storybook

okta · Aug 14, 2023 · 8ee066f · 8ee066f
1 parent 82147df
commit 8ee066f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/.yarn/cache/@nx-nx-darwin-arm64-npm-16.6.0-f3f3a13093-8.zip b/.yarn/cache/@nx-nx-darwin-arm64-npm-16.6.0-f3f3a13093-8.zip
diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/MenuButton.tsx
@@ -43,9 +43,8 @@ export type MenuButtonProps = {
    * The <MenuItem> components within the Menu.
    */
   children: Array<
-    ReactElement<
-      typeof MenuItem | typeof Divider | typeof ListSubheader | NullElement
-    >
+    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
+    | NullElement
   >;
   /**
    * The end Icon on the trigggering Button

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
@@ -91,7 +91,7 @@ const storybookMeta: Meta<MenuButtonProps> = {
       description: "The <MenuItem> components within the Menu",
       table: {
         type: {
-          summary: "[MenuItem | Divider | ListSubheader]",
+          summary: "[MenuItem | Divider | ListSubheader | NullElement]",
         },
       },
     },
@@ -176,6 +176,34 @@ export const Simple: StoryObj<MenuButtonProps> = {
   },
 };
 
+/**
+ * Note that the falsy children in the following MenuButton won't appear in the source
+ * code in the actual story in your browser, but this illustrates that there are no
+ * compile-time issues with the falsy items passed as children.
+ */
+export const FalsyChildren: StoryObj<MenuButtonProps> = {
+  args: {
+    buttonLabel: "More actions",
+    children: [
+      <MenuItem key="1">Truthy Menu Item</MenuItem>,
+      false,
+      null,
+      undefined,
+    ],
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step,
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
+    clickMenuButton({ canvasElement, step })(args, "Menu Button Simple");
+  },
+};
+
 export const ActionIcons: StoryObj<MenuButtonProps> = {
   args: {
     children: [