@kaizen/components 1.67.21 → 1.68.0

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

@@ -1,20 +1,14 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { userEvent, waitFor, within, expect, fn } from "@storybook/test"
-import { VisuallyHidden } from "react-aria"
-import {
-  AddIcon,
-  TrashIcon,
-  ThumbsUpOffIcon,
-  ThumbsUpOnIcon,
-} from "~components/Icon"
-import { Tooltip, TooltipTrigger } from "~components/__overlays__/v3"
+import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const onPressEvent = fn()
 
 const meta = {
-  title: "Actions/Button/Button (v3)/Tests",
+  title: "Actions/Button/Button (v3)/Button (v3) tests",
   component: Button,
   args: {
     children: "Label",
@@ -26,106 +20,104 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const ButtonDefault: Story = {
-  render: ({ children, ...otherArgs }) => (
-    <Button {...otherArgs}>
-      <>
-        {children}
-        <AddIcon role="presentation" />
-      </>
-    </Button>
-  ),
-}
-
-export const IsHovered: Story = {
-  ...ButtonDefault,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement.parentElement!)
-    const button = canvas.getByRole("button")
-
-    await step("Hover shows", async () => {
-      await userEvent.hover(button)
-      await expect(button).toHaveAttribute("data-hovered", "true")
-    })
-  },
-}
-export const IsHoveredReversed: Story = {
-  ...IsHovered,
-  parameters: {
-    reverseColors: true,
+// stress testing the accessible name being derived from the nested children
+export const IconButtonWithHiddenLabel: Story = {
+  args: {
+    hasHiddenLabel: true,
+    icon: <Icon name="add" isPresentational />,
+    children: (
+      <span>
+        Hidden label <span>is</span> <span>accessible</span>
+      </span>
+    ),
   },
-}
-
-export const IsFocused: Story = {
-  ...ButtonDefault,
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement.parentElement!)
     const button = canvas.getByRole("button")
 
-    await step("Focus shows", async () => {
-      await userEvent.tab()
-
-      await waitFor(() => expect(document.activeElement).toBe(button))
-      await expect(button).toHaveAttribute("data-focused", "true")
-    })
+    expect(button).toHaveAccessibleName("Hidden label is accessible")
   },
 }
 
-export const IsFocusedReversed: Story = {
-  ...IsFocused,
-  parameters: {
-    reverseColors: true,
+export const PendingButton: Story = {
+  render: ({ isPending = false, pendingLabel = "Loading", ...otherProps }) => {
+    const [isPendingStatus, setIsPendingStatus] =
+      React.useState<boolean>(isPending)
+
+    return (
+      <Button
+        {...otherProps}
+        isPending={isPendingStatus}
+        pendingLabel={pendingLabel}
+        onPress={() => {
+          setIsPendingStatus(true)
+          setTimeout(() => {
+            setIsPendingStatus(false)
+          }, 900)
+        }}
+      />
+    )
   },
-}
-
-export const IsPressed: Story = {
-  ...ButtonDefault,
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement.parentElement!)
-    const button = canvas.getByRole("button")
+    const button = canvas.getByRole("button", { name: "Label" })
+    // Simulates a delay that may occur when a button must wait for a response
+    const timeToWait = 1000
+
+    await step("Button has accessible label", async () =>
+      expect(button).toHaveAccessibleName("Label")
+    )
 
-    await step("onPress is called", async () => {
+    await step("Accessible label updates on press", async () => {
+      await button.focus()
       await userEvent.click(button)
+      await waitFor(() => expect(button).toHaveAccessibleName("Loading"))
+    })
 
-      await expect(onPressEvent).toHaveBeenCalledTimes(1)
+    await step("Accessible label reverts once isPending is false", async () => {
+      await waitFor(() =>
+        setTimeout(() => {
+          expect(button).toHaveAccessibleName("Label")
+        }, timeToWait)
+      )
     })
   },
 }
 
-export const IconButtonWithAccessibleLabel: Story = {
-  render: ({ children: _, ...otherArgs }) => (
-    <Button {...otherArgs}>
-      <>
-        <TrashIcon role="img" aria-label="Remove" />
-        <VisuallyHidden> Highlight: 18, June, 2024</VisuallyHidden>
-      </>
-    </Button>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement.parentElement!)
-    const button = canvas.getByRole("button")
-
-    await step("has accessible labels", async () => {
-      await userEvent.tab()
+export const PendingButtonWithHiddenPendingLabel: Story = {
+  ...PendingButton,
+  args: {
+    hasHiddenPendingLabel: true,
+    isPending: false,
+    pendingLabel: "Loading",
+  },
+}
 
-      await expect(button).toHaveAccessibleName(
-        "Remove Highlight: 18, June, 2024"
-      )
-    })
+export const PendingIconButton: Story = {
+  ...PendingButton,
+  args: {
+    hasHiddenLabel: true,
+    isPending: false,
+    pendingLabel: "Loading",
+    icon: <Icon name="add" isPresentational />,
   },
 }
 
-export const ButtonWithRACRenderPropsAsChildren: Story = {
+export const RACRenderPropsWithChildren: Story = {
   render: ({ children: _, ...otherArgs }) => (
     <Button {...otherArgs}>
-      {({ isFocused }) => (
+      {({ isFocusVisible }) => (
         <>
           Label
-          {isFocused ? (
-            <ThumbsUpOnIcon role="img" aria-label=" is focused" />
-          ) : (
-            <ThumbsUpOffIcon role="img" aria-label=" is unfocused" />
-          )}
+          <VisuallyHidden>
+            {isFocusVisible ? " is focused" : " is unfocused"}
+          </VisuallyHidden>
+          <Icon
+            name={isFocusVisible ? "thumb_up" : "thumb_down"}
+            isPresentational
+            isFilled={true}
+            className="ms-8 [--icon-size:16]"
+          />
         </>
       )}
     </Button>
@@ -149,45 +141,13 @@ export const ButtonWithRACRenderPropsAsChildren: Story = {
   },
 }
 
-// While this is a less likely use case, but as it is possible to use render props to apply a class name to the button so we should test that it works with our Button implementation
-export const ButtonWithRACRenderPropsAsClassname: Story = {
-  render: ({ children: _, ...otherArgs }) => (
-    <Button
-      className={({ isFocused }) =>
-        isFocused ? "!bg-blue-500 !text-white !border-transparent" : ""
-      }
-      {...otherArgs}
-    >
-      Label
-    </Button>
-  ),
+export const RACRenderPropsWithClassName: Story = {
+  args: {
+    className: ({ isFocusVisible }) => (isFocusVisible ? "!bg-gray-300" : ""),
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement.parentElement!)
     const button = canvas.getByRole("button")
     await button.focus()
   },
 }
-
-// A compatibility check since when we develop tooltip the v1 button was an issue
-export const ButtonWithTooltip: Story = {
-  render: ({ children: _, ...otherArgs }) => (
-    <TooltipTrigger>
-      <Button {...otherArgs}>Label</Button>
-      <Tooltip>Tooltip content</Tooltip>
-    </TooltipTrigger>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement.parentElement!)
-    const button = canvas.getByRole("button")
-
-    await step("Focus shows", async () => {
-      await userEvent.tab()
-
-      await waitFor(() => expect(document.activeElement).toBe(button))
-    })
-
-    await step("Tooltip content show", async () => {
-      await waitFor(() => expect(canvas.getByRole("tooltip")).toBeVisible())
-    })
-  },
-}

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"