Merge branch 'main' into KZN-2833/codemod-blank-lines

cultureamp · Nov 11, 2024 · 6692b2d · 6692b2d
2 parents b63b558 + a1c0a3f
commit 6692b2d
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 25 deletions.
diff --git a/.stylelintrc-css.mjs b/.stylelintrc-css.mjs
@@ -11,5 +11,11 @@ export default {
         ignoreFontFamilies: ["Material Symbols Outlined"],
       },
     ],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global"],
+      },
+    ],
   },
 }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change Log
 
+## 1.67.11
+
+### Patch Changes
+
+- [#5263](https://github.com/cultureamp/kaizen-design-system/pull/5263) [`f4a00f663c09baae9d5f5ed02d0f04e2ecf4e5d0`](https://github.com/cultureamp/kaizen-design-system/commit/f4a00f663c09baae9d5f5ed02d0f04e2ecf4e5d0) - Menu v3 fixes and documentation for typeahead functionality
+
+  - Insert `textValue` into RAC's MenuItem when typeof children === string
+  - Add documentation for how to get typeahead working when passing ReactNode
+  - Adjust MenuItem to only add flex when children is string and there's an icon
+
 ## 1.67.10
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.10",
+  "version": "1.67.11",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",

diff --git a/.../src/__actions__/Menu/v3/Menu.module.scss → ...s/src/__actions__/Menu/v3/Menu.module.css b/.../src/__actions__/Menu/v3/Menu.module.scss → ...s/src/__actions__/Menu/v3/Menu.module.css
diff --git a/packages/components/src/__actions__/Menu/v3/Menu.tsx b/packages/components/src/__actions__/Menu/v3/Menu.tsx
@@ -4,7 +4,7 @@ import {
   MenuProps as RACMenuProps,
 } from "react-aria-components"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./Menu.module.scss"
+import styles from "./Menu.module.css"
 
 export type MenuProps = Omit<
   RACMenuProps<HTMLDivElement>,

diff --git a/.../__actions__/Menu/v3/MenuItem.module.scss → ...c/__actions__/Menu/v3/MenuItem.module.css b/.../__actions__/Menu/v3/MenuItem.module.scss → ...c/__actions__/Menu/v3/MenuItem.module.css
@@ -1,4 +1,5 @@
 .item {
+  display: block;
   font-family: var(--typography-paragraph-body-font-family);
   font-size: var(--typography-paragraph-body-font-size);
   letter-spacing: var(--typography-paragraph-body-letter-spacing);
@@ -9,14 +10,17 @@
   border: var(--border-focus-ring-border-width)
     var(--border-focus-ring-border-style) transparent;
   border-radius: 4px;
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
   margin-inline: var(--spacing-6);
   text-decoration: none;
   cursor: pointer;
 }
 
+.flexWrapper {
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+}
+
 .iconWrapper {
   flex-shrink: 0;
   display: flex;

diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.tsx b/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
@@ -4,7 +4,7 @@ import {
   MenuItemProps as RACMenuItemProps,
 } from "react-aria-components"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./MenuItem.module.scss"
+import styles from "./MenuItem.module.css"
 
 export type MenuItemProps = RACMenuItemProps & {
   /**
@@ -17,16 +17,27 @@ export type MenuItemProps = RACMenuItemProps & {
  * A MenuItem represents an individual action in a Menu.
  */
 export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ className, icon, children, ...props }, ref): JSX.Element => (
-    <RACMenuItem
-      ref={ref}
-      className={mergeClassNames(styles.item, className)}
-      {...props}
-    >
-      <>
-        {icon && <span className={styles.iconWrapper}>{icon}</span>}
-        {children}
-      </>
-    </RACMenuItem>
-  )
+  ({ className, icon, children, textValue, ...props }, ref): JSX.Element => {
+    const determinedTextValue =
+      textValue || (typeof children === "string" ? children : undefined)
+    return (
+      <RACMenuItem
+        ref={ref}
+        className={mergeClassNames(styles.item, className)}
+        textValue={determinedTextValue}
+        {...props}
+      >
+        <>
+          {typeof children === "string" && icon ? (
+            <div className={styles.flexWrapper}>
+              <span className={styles.iconWrapper}>{icon}</span>
+              {children}
+            </div>
+          ) : (
+            <>{children}</>
+          )}
+        </>
+      </RACMenuItem>
+    )
+  }
 )
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
@@ -71,12 +71,21 @@ import * as exampleStories from "./Menu.stories"
 
 ## Actions and Next.js routing
 
-Use the `href` prop when an action navigates to a new page. Wrapping your app in `FrontendServices` from `@cultureamp/next-services` will automatically turn these into Next.js links.
+Use the `href` prop when an action navigates to a new page.
+[Work in progress] Eventually, wrapping your app in `FrontendServices` from `@cultureamp/next-services` will automatically turn these into Next.js links.
 
 Otherwise, use the `onAction` prop to trigger an action within the page.
 
 <Canvas className="mb-24" of={docsStories.Actions}  />
 
+## Typeahead
+
+Typeahead (the ability to quickly skip to an item by typing a few characters after opening) will automatically work when `MenuItem` `children` is a `string`.
+
+If you're passing `ReactNode` into `MenuItem` `children`, you'll need to specify the `textValue` prop manually on `MenuItem` in order for typeahead to work.
+
+<Canvas className="mb-24" of={exampleStories.RichContent}  />
+
 ## Sections
 
 Sections can be added with the `Section` and `Header` component from `react-aria-components`.

diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
@@ -110,7 +110,6 @@ export const SelectionDont: Story = {
 export const LabelChevronDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         Edit item
         <Icon name="keyboard_arrow_down" isPresentational />
@@ -211,7 +210,6 @@ export const MenuItemLabelsDont: Story = {
 export const SentenceCaseDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -229,7 +227,6 @@ export const SentenceCaseDo: Story = {
 export const SentenceCaseDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -247,7 +244,6 @@ export const SentenceCaseDont: Story = {
 export const ElipsesDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -265,7 +261,6 @@ export const ElipsesDo: Story = {
 export const ElipsesDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>

diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Popover } from "react-aria-components"
+import { Text } from "~components/Text"
 import { Button } from "~components/__actions__/v3"
 import { Icon } from "~components/__future__/Icon"
 import { Menu, MenuTrigger, MenuItem } from "../index"
@@ -24,7 +25,6 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
       <Button className="[--icon-size:24]">
         <Icon name="more_horiz" alt="Additional actions" />
       </Button>
@@ -64,3 +64,35 @@ export const Controlled: Story = {
   ...testStories.Controlled,
   play: undefined,
 }
+
+export const RichContent: Story = {
+  render: ({ defaultOpen: _, ...args }) => (
+    <MenuTrigger {...args}>
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
+      </Button>
+      <Popover>
+        <Menu>
+          <MenuItem textValue="Save">
+            <div>Save</div>
+            <Text tag="div" variant="extra-small">
+              Saves all data
+            </Text>
+          </MenuItem>
+          <MenuItem textValue="Edit">
+            <div>Edit</div>
+            <Text tag="div" variant="extra-small">
+              Adjust the name and description
+            </Text>
+          </MenuItem>
+          <MenuItem textValue="Delete">
+            Delete
+            <Text tag="div" variant="extra-small">
+              Completely remove, cannot be undone
+            </Text>
+          </MenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+}