@kaizen/components 1.67.22 → 1.68.0

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -1,112 +1,214 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { ArrowForwardIcon, AddIcon, TrashIcon } from "~components/Icon"
-import { LoadingSpinner } from "~components/Loading"
+import { within } from "@storybook/test"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { Button } from "../index"
+import { Button, ButtonSizes, ButtonVariants } from "../index"
 
 export default {
-  title: "Actions/Button/Button (v3)/Tests",
+  title: "Actions/Button/Button (v3)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
   },
 } satisfies Meta
 
+const variants = ["primary", "secondary", "tertiary"] satisfies ButtonVariants[]
+const sizes = ["small", "medium", "large"] satisfies ButtonSizes[]
+
+const RowTemplate = ({
+  isReversed = false,
+}: {
+  isReversed?: boolean
+}): JSX.Element => (
+  <>
+    {variants.map(variant =>
+      sizes.map(size => (
+        <StickerSheet.Row
+          key={size + variant}
+          isReversed={isReversed}
+          rowTitle={`${variant} (${size})`}
+        >
+          <Button variant={variant} size={size}>
+            Label
+          </Button>
+          <Button
+            icon={<Icon name="add" isPresentational />}
+            variant={variant}
+            size={size}
+          >
+            Label
+          </Button>
+          <Button
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            size={size}
+          >
+            Label
+          </Button>
+          <Button
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            isPending
+            pendingLabel="Submitting"
+            size={size}
+          >
+            Label
+          </Button>
+          <Button
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            isPending
+            pendingLabel="Submitting"
+            hasHiddenPendingLabel
+            size={size}
+          >
+            Label
+          </Button>
+          <Button
+            icon={
+              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
+            }
+            iconPosition="end"
+            variant={variant}
+            size={size}
+            isDisabled
+          >
+            Label
+          </Button>
+        </StickerSheet.Row>
+      ))
+    )}
+  </>
+)
+
+const IconButtonRowTemplate = ({
+  isReversed = false,
+}: {
+  isReversed?: boolean
+}): JSX.Element => (
+  <>
+    {sizes.map(size => (
+      <StickerSheet.Row
+        isReversed={isReversed}
+        rowTitle={size}
+        key={size + variants}
+      >
+        {variants.map(variant => (
+          <span className="flex gap-8" key={variant}>
+            <Button
+              icon={<Icon name="delete" isPresentational />}
+              hasHiddenLabel
+              size={size}
+              variant={variant}
+            >
+              Label
+            </Button>
+            <Button
+              icon={<Icon name="delete" isPresentational />}
+              size={size}
+              isPending
+              hasHiddenLabel
+              pendingLabel="Submitting"
+              variant={variant}
+            >
+              Label
+            </Button>
+          </span>
+        ))}
+      </StickerSheet.Row>
+    ))}
+  </>
+)
+
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
       <StickerSheet heading="Button" isReversed={isReversed}>
         <StickerSheet.Header
-          headings={["Base", "Disabled", "working"]}
+          headings={[
+            "Base",
+            "Icon start",
+            "Icon end",
+            "isPending",
+            "hasHiddenPendingLabel",
+            "isDisabled",
+          ]}
           headingsWidth="10rem"
           hasVerticalHeadings
           verticalHeadingsWidth="12rem"
         />
         <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Default">
-            <Button>Label</Button>
-
-            <Button isDisabled>Label</Button>
-            <Button isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
-            </Button>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Icon start">
-            <Button>
-              <AddIcon role="presentation" />
-              Label
-            </Button>
-            <Button isDisabled>
-              <AddIcon role="presentation" />
-              Label
-            </Button>
-            <Button isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
-            </Button>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Icon end">
-            <Button>
-              Label
-              <ArrowForwardIcon role="presentation" />
-            </Button>
-            <Button isDisabled>
-              Label
-              <ArrowForwardIcon role="presentation" />
-            </Button>
-            <Button isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
-            </Button>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Icon only">
-            <Button aria-label="Label">
-              <TrashIcon role="presentation" />
-            </Button>
-            <Button aria-label="Label" isDisabled>
-              <TrashIcon role="presentation" />
-            </Button>
-            <Button aria-label="Label" isDisabled>
-              <LoadingSpinner size="sm" accessibilityLabel="submitting label" />
-            </Button>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Small">
-            <Button size="small">
-              Label
-              <ArrowForwardIcon role="presentation" />
-            </Button>
-            <Button size="small" isDisabled>
-              Label
-              <ArrowForwardIcon role="presentation" />
-            </Button>
-            <Button size="small" isDisabled>
-              <LoadingSpinner size="xs" accessibilityLabel="submitting label" />
-            </Button>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Icon only small">
-            <Button size="small">
-              <TrashIcon role="img" aria-label="Remove label" />
-            </Button>
-            <Button size="small" isDisabled>
-              <TrashIcon role="img" aria-label="Remove label" />
-            </Button>
-            <Button size="small" isDisabled>
-              <LoadingSpinner size="xs" accessibilityLabel="Removing label" />
-            </Button>
-          </StickerSheet.Row>
+          <RowTemplate isReversed={isReversed} />
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet heading="Icon only button" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["primary", "secondary", "tertiary"]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          <IconButtonRowTemplate isReversed={isReversed} />
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet heading="Pseudo states" isReversed={isReversed}>
+        <StickerSheet.Header
+          headings={["isHovered", "isFocusVisible", "isPressed"]}
+          headingsWidth="10rem"
+          hasVerticalHeadings
+          verticalHeadingsWidth="12rem"
+        />
+        <StickerSheet.Body>
+          {variants.map(variant => (
+            <StickerSheet.Row
+              key={variant}
+              isReversed={isReversed}
+              rowTitle={variant}
+            >
+              <Button data-testid="testid__button-hover" variant={variant}>
+                Label
+              </Button>
+              <Button data-testid="testid__button-focus" variant={variant}>
+                Label
+              </Button>
+              <Button data-testid="testid__button-pressed" variant={variant}>
+                Label
+              </Button>
+            </StickerSheet.Row>
+          ))}
         </StickerSheet.Body>
       </StickerSheet>
     </>
   ),
-  parameters: {
-    pseudo: {
-      hover: '[data-hovered="true"]',
-      active: '[data-pressed="true"]',
-      focus: '[data-focused="true"]',
-      focusVisible: '[data-focus-visible="true"]',
-    },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const focusButtons = canvas.getAllByTestId("testid__button-focus")
+    const hoverButtons = canvas.getAllByTestId("testid__button-hover")
+    const pressedButton = canvas.getAllByTestId("testid__button-pressed")
+
+    focusButtons.forEach(button => {
+      button.setAttribute("data-focus-visible", "true")
+    })
+    hoverButtons.forEach(button => {
+      button.setAttribute("data-hovered", "true")
+    })
+    pressedButton.forEach(button => {
+      button.setAttribute("data-pressed", "true")
+    })
   },
 }
 

package/src/__actions__/Button/v3/index.ts

@@ -1 +1,2 @@
 export * from "./Button"
+export * from "./types"

package/src/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.module.css

@@ -0,0 +1,19 @@
+.buttonContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-icon-gap, var(--spacing-6));
+}
+
+.large {
+  --button-icon-gap: var(--spacing-8);
+}
+
+.buttonLabel {
+  display: inline-flex;
+  align-items: center;
+}
+
+.buttonIcon {
+  display: inline-flex;
+  align-items: center;
+}

package/src/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.tsx

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes } from "react"
+import classNames from "classnames"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { ButtonProps } from "../../Button"
+import styles from "./ButtonContent.module.css"
+
+type ButtonContentProps = {
+  size?: ButtonProps["size"]
+  icon?: ButtonProps["icon"]
+  iconPosition?: ButtonProps["iconPosition"]
+  hasHiddenLabel?: ButtonProps["hasHiddenLabel"]
+} & HTMLAttributes<HTMLSpanElement>
+
+/** Renders the inner content of the button, handling icon and label visibility */
+export const ButtonContent = ({
+  children,
+  hasHiddenLabel,
+  size = "medium",
+  icon,
+  iconPosition = "start",
+  className,
+  ...restProps
+}: ButtonContentProps): JSX.Element => (
+  <span
+    className={classNames(className, styles.buttonContent, styles[size])}
+    {...restProps}
+  >
+    {icon && iconPosition === "start" && (
+      <span className={styles.buttonIcon}>{icon}</span>
+    )}
+    {hasHiddenLabel ? (
+      <VisuallyHidden>{children}</VisuallyHidden>
+    ) : (
+      <span className={styles.buttonLabel}>{children}</span>
+    )}
+    {icon && iconPosition === "end" && (
+      <span className={styles.buttonIcon}>{icon}</span>
+    )}
+  </span>
+)

package/src/__actions__/Button/v3/subcomponents/ButtonContent/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonContent"

package/src/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.module.css

@@ -0,0 +1,16 @@
+.pendingContent {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--button-pending-content-gap, var(--spacing-6));
+}
+
+.large {
+  --button-pending-content-gap: var(--spacing-8);
+}
+
+.centerSpinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import classNames from "classnames"
+import { LoadingSpinner } from "~components/Loading"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { ButtonSizes, PendingProps } from "../../types"
+import styles from "./PendingContent.module.css"
+
+/** Renders the pending content of the button, handling pending label visibility and spinner positioning */
+export const PendingContent = ({
+  pendingLabel,
+  hasHiddenPendingLabel = false,
+  size = "medium",
+}: PendingProps & { size?: ButtonSizes }): JSX.Element => (
+  <span className={classNames(styles.pendingContent, styles[size])}>
+    {hasHiddenPendingLabel ? (
+      <VisuallyHidden>{pendingLabel}</VisuallyHidden>
+    ) : (
+      <span>{pendingLabel}</span>
+    )}
+    <LoadingSpinner
+      size={size === "small" ? "xs" : "sm"}
+      accessibilityLabel=""
+      classNameOverride={
+        hasHiddenPendingLabel ? styles.centerSpinner : undefined
+      }
+    />
+  </span>
+)

package/src/__actions__/Button/v3/subcomponents/PendingContent/index.ts

@@ -0,0 +1 @@
+export * from "./PendingContent"

package/src/__actions__/Button/v3/subcomponents/index.ts

@@ -0,0 +1,2 @@
+export * from "./PendingContent"
+export * from "./ButtonContent"

package/src/__actions__/Button/v3/types.ts

@@ -0,0 +1,25 @@
+export type ButtonVariants = "primary" | "secondary" | "tertiary"
+
+export type ButtonSizes = "small" | "medium" | "large"
+
+export type PendingPropsUndefined = {
+  isPending?: undefined
+  /** Rendered as the child while `isPending` is `true`. This determines the accessible label for the Button while pending. */
+  pendingLabel?: never
+  /** Visually hides the `pendingLabel` and renders the loading spinner. This will maintain the width of the Button's `children` to avoid layout shifts.
+   * @default false
+   */
+  hasHiddenPendingLabel?: never
+}
+
+export type PendingProps = {
+  isPending: boolean
+  /** Rendered as the child while `pendingLabel` is `true`. This determines the accessible label for the Button while pending. */
+  pendingLabel: string
+  /** Visually Hides the `pendingLabel` and renders the loading spinner. This will maintain the width of the Button's `children` to avoid layout shifts.
+   * @default false
+   */
+  hasHiddenPendingLabel?: boolean
+}
+
+export type PendingButtonProps = PendingProps | PendingPropsUndefined

package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx

@@ -41,8 +41,12 @@ const DefaultMenuItems = (): ReactNode => (
 export const Actions: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -59,8 +63,12 @@ export const Actions: Story = {
 export const ItemsDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -74,8 +82,12 @@ export const ItemsDo: Story = {
 export const ItemsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -171,8 +183,12 @@ export const LabelDont: Story = {
 export const IconsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -193,8 +209,12 @@ export const IconsDont: Story = {
 export const MenuItemLabelsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -210,8 +230,12 @@ export const MenuItemLabelsDont: Story = {
 export const SentenceCaseDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -227,8 +251,12 @@ export const SentenceCaseDo: Story = {
 export const SentenceCaseDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -244,8 +272,12 @@ export const SentenceCaseDont: Story = {
 export const ElipsesDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>
@@ -261,8 +293,12 @@ export const ElipsesDo: Story = {
 export const ElipsesDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu {...args}>

package/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx

@@ -36,8 +36,12 @@ export const KitchenSink: Story = {
   ],
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -84,9 +88,14 @@ export const KitchenSink: Story = {
 export const Basic: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
+
       <Popover>
         <Menu>
           <MenuItem
@@ -165,8 +174,12 @@ const mockOnClick = fn()
 export const DisabledItems: Story = {
   render: () => (
     <MenuTrigger>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -205,8 +218,12 @@ export const DisabledItems: Story = {
 export const WithSections: Story = {
   render: () => (
     <MenuTrigger>
-      <Button>
-        <Icon name="more_horiz" alt="Additional actions" />
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        hasHiddenLabel
+      >
+        Additional actions
       </Button>
       <Popover>
         <Menu>
@@ -237,8 +254,11 @@ export const Controlled: Story = {
           Toggle open
         </button>
         <MenuTrigger isOpen={isOpen} onOpenChange={setOpen}>
-          <Button>
-            <Icon name="more_horiz" alt="Additional actions" />
+          <Button
+            icon={<Icon name="more_horiz" isPresentational />}
+            hasHiddenLabel
+          >
+            Additional actions
           </Button>
           <Popover>
             <Menu>