@kaizen/components 1.67.21 → 1.68.0

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>

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

@@ -25,8 +25,12 @@ type Story = StoryObj<typeof meta>
 export const Playground: 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>
@@ -68,8 +72,12 @@ export const Controlled: Story = {
 export const RichContent: 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>

package/src/__future__/Icon/_docs/Icon.docs.stories.tsx

@@ -124,20 +124,20 @@ export const Size: Story = {
 
 export const MeaningfulIcon: Story = {
   render: args => (
-    <Button>
-      <Icon {...args} />
-    </Button>
+    <Tag color="blue" icon={<Icon {...args} />}>
+      Meaningful icons can be helpful
+    </Tag>
   ),
-  args: { isPresentational: false, alt: "Favourite" },
+  args: { isPresentational: false, alt: "Info:", name: "info", isFilled: true },
 }
 
 export const PresentationalIcon: Story = {
   render: args => (
-    <Button>
-      <Icon {...args} /> Favourite
+    <Button icon={<Icon {...args} />} hasHiddenLabel>
+      Label
     </Button>
   ),
-  args: { isPresentational: true },
+  args: { isPresentational: true, name: "add" },
 }
 
 const IconSetButton = ({

package/src/__overlays__/Tooltip/v3/Tooltip.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef, useContext, useLayoutEffect, useState } from "react"
-import { VisuallyHidden } from "react-aria"
 import {
   Tooltip as RACTooltip,
   TooltipContext,
@@ -7,6 +6,7 @@ import {
   TooltipTriggerStateContext,
   useContextProps,
 } from "react-aria-components"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { useReversedColors } from "~components/__utilities__/v3"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
 import { OverlayArrow } from "./OverlayArrow"

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx

@@ -33,6 +33,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+// TODO: update this to use the new button component v3
+
 export const OnButton: Story = {
   render: ({ defaultOpen, isOpen, ...args }) => (
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>

package/dist/cjs/EmptyState/EmptyState.module.scss.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-var styles = {
-  "container": "EmptyState-module_container__-B5OU",
-  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
-  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
-  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
-  "positive": "EmptyState-module_positive__o3dXR",
-  "negative": "EmptyState-module_negative__e5ci6",
-  "action": "EmptyState-module_action__OdsgJ",
-  "neutral": "EmptyState-module_neutral__L6fBb",
-  "success": "EmptyState-module_success__y7jKP",
-  "warning": "EmptyState-module_warning__-PrRp",
-  "informative": "EmptyState-module_informative__x0GSr",
-  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
-  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
-  "textSide": "EmptyState-module_textSide__tv54w",
-  "illustration": "EmptyState-module_illustration__HyD2k",
-  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
-  "heading": "EmptyState-module_heading__y-yvC",
-  "description": "EmptyState-module_description__fsJOc"
-};
-module.exports = styles;

package/dist/cjs/__actions__/Button/v3/Button.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "button": "Button-module_button__QOSYH",
-  "default": "Button-module_default__gSx3e",
-  "reversed": "Button-module_reversed__DT-Id",
-  "small": "Button-module_small__S-t5B"
-};
-module.exports = styles;

package/dist/esm/EmptyState/EmptyState.module.scss.mjs

@@ -1,21 +0,0 @@
-var styles = {
-  "container": "EmptyState-module_container__-B5OU",
-  "straightCorners": "EmptyState-module_straightCorners__Aeou0",
-  "sidebarAndContent": "EmptyState-module_sidebarAndContent__Eysay",
-  "contentOnly": "EmptyState-module_contentOnly__RWVVX",
-  "positive": "EmptyState-module_positive__o3dXR",
-  "negative": "EmptyState-module_negative__e5ci6",
-  "action": "EmptyState-module_action__OdsgJ",
-  "neutral": "EmptyState-module_neutral__L6fBb",
-  "success": "EmptyState-module_success__y7jKP",
-  "warning": "EmptyState-module_warning__-PrRp",
-  "informative": "EmptyState-module_informative__x0GSr",
-  "expert-advice": "EmptyState-module_expert-advice__VVB8i",
-  "illustrationSide": "EmptyState-module_illustrationSide__ZSjF3",
-  "textSide": "EmptyState-module_textSide__tv54w",
-  "illustration": "EmptyState-module_illustration__HyD2k",
-  "textSideInner": "EmptyState-module_textSideInner__Yynhi",
-  "heading": "EmptyState-module_heading__y-yvC",
-  "description": "EmptyState-module_description__fsJOc"
-};
-export { styles as default };

package/dist/esm/__actions__/Button/v3/Button.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "button": "Button-module_button__QOSYH",
-  "default": "Button-module_default__gSx3e",
-  "reversed": "Button-module_reversed__DT-Id",
-  "small": "Button-module_small__S-t5B"
-};
-export { styles as default };

package/src/EmptyState/EmptyState.module.scss

@@ -1,186 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "./mixins";
-
-.container {
-  --empty-state-border-width: var(--border-width-1);
-
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  justify-content: space-around;
-  padding: calc(2% - var(--empty-state-border-width))
-    calc(var(--spacing-24) - var(--empty-state-border-width));
-  color: $color-purple-800;
-  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
-  border-radius: var(--border-solid-border-radius);
-  background-color: var(--empty-state-background-color);
-  flex-wrap: wrap;
-
-  @include small {
-    flex-direction: column;
-    align-items: center;
-    padding: calc(var(--spacing-24) - var(--empty-state-border-width));
-  }
-
-  &.straightCorners {
-    border-radius: 0;
-  }
-
-  // These class names must match the possible values of the component's layoutContext prop
-  &.sidebarAndContent {
-    @include large-sidebar-and-content {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-
-  &.contentOnly {
-    @include large-content-only {
-      padding-top: $spacing-md;
-      padding-bottom: $spacing-md;
-    }
-  }
-}
-
-/** @deprecated */
-.positive {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.negative,
-.action {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.neutral {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
-
-/** end @deprecated */
-.success {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.warning {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.informative {
-  --empty-state-border-color: var(--color-blue-400);
-  --empty-state-background-color: var(--color-blue-100);
-}
-
-.expert-advice {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
-
-.illustrationSide,
-.textSide {
-  display: flex;
-  box-sizing: border-box;
-}
-
-.illustrationSide {
-  justify-content: center;
-  align-items: center;
-  flex: 0 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  margin-bottom: $spacing-md;
-
-  @include small {
-    width: 100%;
-    max-width: 224px;
-  }
-
-  @include medium {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0;
-    width: auto;
-    max-width: 40%;
-    padding-inline-end: $spacing-md;
-  }
-
-  .sidebarAndContent & {
-    @include large-sidebar-and-content {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-
-  .contentOnly & {
-    @include large-content-only {
-      flex-shrink: 1;
-      flex-basis: auto;
-    }
-  }
-}
-
-.illustration,
-.illustrationSide video {
-  max-width: 100%;
-  max-height: 366px;
-  width: auto;
-  height: auto;
-
-  // Fixes for IE11 Flexbox issues
-  min-height: 196px;
-
-  @include small {
-    max-height: 196px;
-    width: 100%;
-  }
-}
-
-.textSide {
-  flex: 1 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  align-items: center;
-  -webkit-font-smoothing: antialiased;
-
-  @include medium {
-    flex: 0 1 50%;
-  }
-}
-
-.textSideInner {
-  width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  margin: 0 $spacing-sm;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-
-  @include small {
-    margin-bottom: 0;
-  }
-
-  @include medium {
-    max-width: 426px;
-  }
-}
-
-.heading {
-  margin-bottom: $spacing-md;
-  max-width: 100%;
-
-  @media (max-width: (375px)) {
-    @include typography-heading-3-sm;
-  }
-}
-
-.description {
-  margin-bottom: $spacing-md;
-  max-width: 100%;
-}

package/src/EmptyState/EmptyState.spec.tsx

@@ -1,48 +0,0 @@
-import React from "react"
-import { cleanup, render } from "@testing-library/react"
-import { EmptyState, EmptyStateProps } from "./EmptyState"
-
-vi.mock("~components/Illustration", () => ({
-  EmptyStatesPositive: (): JSX.Element => (
-    <div>EmptyStatesPositive_Component</div>
-  ),
-  EmptyStatesNeutral: (): JSX.Element => (
-    <div>EmptyStatesNeutral_Component</div>
-  ),
-  EmptyStatesNegative: (): JSX.Element => (
-    <div>EmptyStatesNegative_Component</div>
-  ),
-  EmptyStatesInformative: (): JSX.Element => (
-    <div>EmptyStatesInformative_Component</div>
-  ),
-  EmptyStatesAction: (): JSX.Element => <div>EmptyStatesAction_Component</div>,
-}))
-
-describe("<EmptyState />", () => {
-  afterEach(cleanup)
-
-  const defaultProps: EmptyStateProps = {
-    id: "someId",
-    headingProps: {
-      children: "Some heading",
-      variant: "heading-1",
-    },
-    bodyText: "Lorem ipsum dolor...",
-  }
-
-  it("renders an `id` attribute", () => {
-    const { container } = render(<EmptyState {...defaultProps} />)
-
-    expect(container.querySelector("#someId")).toBeTruthy()
-  })
-
-  it("renders given children", () => {
-    const { getByText } = render(
-      <EmptyState {...defaultProps}>
-        <h1>Child Heading</h1>
-      </EmptyState>
-    )
-
-    expect(getByText("Child Heading")).toBeTruthy()
-  })
-})

package/src/EmptyState/_mixins.scss

@@ -1,44 +0,0 @@
-@import "~@kaizen/design-tokens/sass/layout";
-
-$small: 300px;
-$medium: $layout-breakpoints-medium;
-$large: $layout-breakpoints-large;
-
-// comes from ca-layout-padding x2 which is no longer used
-$side-padding: 48px;
-$sidebarWidth: 240px;
-$sidebarWithPadding: $sidebarWidth + $side-padding;
-
-$typography-heading-3-font-size-small: 1.25rem;
-$typography-heading-3-font-weight-small: 700;
-$typography-heading-3-line-height-small: 1.5rem;
-
-@mixin large-sidebar-and-content {
-  @media (min-width: ($large + $sidebarWithPadding + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin large-content-only {
-  @media (min-width: ($large + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin medium {
-  @media (min-width: ($medium + $side-padding)) {
-    @content;
-  }
-}
-
-@mixin small {
-  @media (max-width: ($medium + $side-padding - 1px)) {
-    @content;
-  }
-}
-
-@mixin typography-heading-3-sm {
-  font-size: $typography-heading-3-font-size-small;
-  line-height: $typography-heading-3-line-height-small;
-  font-weight: $typography-heading-3-font-weight-small;
-}