@kaizen/components 1.79.8 → 1.79.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.8",
+  "version": "1.79.9",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Modal/GenericModal/GenericModal.tsx

@@ -125,7 +125,7 @@ export const GenericModal = ({
     }
   }
 
-  const cleanUpAfterClose = (): void => {
+  const cleanUpAfterClose = useCallback(() => {
     if (!isClientReady) return
 
     document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
@@ -133,12 +133,10 @@ export const GenericModal = ({
     if (onEscapeKeyup) {
       document.removeEventListener('keyup', escapeKeyHandler)
     }
-  }
+  }, [escapeKeyHandler, onEscapeKeyup, isClientReady])
 
   /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-  // @todo: Fix if possible - avoiding breaking in eslint upgrade
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => () => cleanUpAfterClose(), [])
+  useEffect(() => () => cleanUpAfterClose(), [cleanUpAfterClose])
 
   const onAfterLeaveHandler = (): void => {
     cleanUpAfterClose()

package/src/__next__/Button/_docs/Button--api-specification.mdx

@@ -156,6 +156,12 @@ If a button is statically the full width of a container you can use the `isFullW
 
 For resizing on smaller screens, consider using the `className` prop to leverage CSS media or container queries, ie: `<Button className="w-full md:w-[initial]">Label</Button>`.
 
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />
+
 ## Additional API options
 
 The following table is a collection of additional React Aria and native HTML props that are exposed from the React Aria API. These are not required for the implementation of `Button` but can be used to extend its functionality. Refer back to the [overview section](#overview) for the core props that enable most use cases.

package/src/__next__/Button/_docs/Button.docs.stories.tsx

@@ -391,3 +391,32 @@ export const DontExampleTertiaryButtonWithIcons: Story = {
     variant: 'tertiary',
   },
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: () => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}

package/src/__next__/Menu/_docs/Menu--api-specification.mdx

@@ -83,3 +83,9 @@ Menu items can be disabled with the `isDisabled` prop.
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
 <Canvas className="mb-24" of={exampleStories.Controlled} />
+
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />

package/src/__next__/Menu/_docs/Menu.stories.tsx

@@ -128,3 +128,32 @@ export const Sections: Story = {
     </MenuTrigger>
   ),
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: ({ defaultOpen: _, ...args }) => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger {...args}>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}