@kaizen/components 1.67.22 → 1.68.0

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/__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/__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/__actions__/Button/v3/Button.module.scss

@@ -1,104 +0,0 @@
-.button {
-  --button-min-height-width: var(--spacing-48);
-  --button-padding-x: calc(
-    #{var(--spacing-12)} - #{var(--border-solid-border-width)}
-  );
-  --button-padding-y: calc(
-    #{var(--spacing-8)} - #{var(--border-solid-border-width)}
-  );
-  --button-icon-size: var(--spacing-24);
-
-  // RESET
-  appearance: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  border: none;
-  // RESET
-  border: var(--border-solid-border-width) var(--border-solid-border-style);
-  border-radius: var(--border-solid-border-radius);
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: left;
-  gap: var(--spacing-8);
-  font-family: var(--typography-button-primary-font-family);
-  font-weight: var(--typography-button-primary-font-weight);
-  font-size: var(--typography-button-primary-font-size);
-  line-height: var(--typography-button-primary-line-height);
-  min-height: var(--button-min-height-width);
-  min-width: var(--button-min-height-width);
-  outline: none;
-  position: relative;
-  padding: var(--button-padding-y) var(--button-padding-x);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &[data-focus-visible]::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-color: var(--color-blue-500);
-    border-radius: var(--border-focus-ring-border-radius);
-    border-width: var(--border-focus-ring-border-width);
-    border-style: var(--border-focus-ring-border-style);
-    inset: calc(-1 * ((#{var(--border-focus-ring-border-width)} * 2) + 1px));
-  }
-
-  svg {
-    height: var(--button-icon-size);
-    width: var(--button-icon-size);
-  }
-}
-
-.default {
-  border-color: var(--color-gray-500);
-  color: var(--color-purple-800);
-
-  &[data-hovered],
-  &[data-focus-visible],
-  &[data-pressed] {
-    background-color: var(--color-gray-200);
-    border-color: var(--color-purple-800);
-  }
-
-  &[data-disabled] {
-    opacity: 0.3;
-  }
-
-  &.reversed {
-    background-color: transparent;
-    border-color: rgba(var(--color-white-rgb), 0.65);
-    color: var(--color-white);
-
-    &[data-hovered],
-    &[data-focus-visible] {
-      background-color: rgba(var(--color-white-rgb), 0.1);
-      border-color: var(--color-white);
-    }
-
-    &[data-focus-visible]::after {
-      border-color: var(--color-blue-300);
-    }
-
-    &[data-disabled]::after {
-      border-color: var(--color-gray-400);
-    }
-  }
-}
-
-.small {
-  // spacing-40 does not currently exist. Holding on adding this until the button rfc has been signed off
-  --button-min-height-width: 2.5rem;
-  --button-padding-x: calc(
-    #{var(--spacing-8)} - #{var(--border-solid-border-width)}
-  );
-  --button-padding-y: calc(
-    #{var(--spacing-8)} - #{var(--border-solid-border-width)}
-  );
-  --button-icon-size: var(--spacing-16);
-
-  gap: var(--spacing-8);
-}

package/src/__actions__/Button/v3/_docs/ApiSpecification.mdx

@@ -1,173 +0,0 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { ResourceLinks, SbContent, KAIOInstallation } from "~storybook/components"
-import * as docsStories from "./Button.docs.stories"
-import * as exampleStories from "./Button.stories"
-
-<Meta title="Actions/Button/Button (v3)/API Specification" />
-
-<SbContent>
-  # Button API Specification (v3)
-
-
-  Updated July 15, 2024
-</SbContent>
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Button/v3"
-  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&t=a6VcoKBJx6snn0ut-1"
-  ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Button.html"
-  designGuidelines="/?path=/docs/actions-button-v3-usage-guidelines--docs"
-/>
-
-<SbContent className="mb-24">
-  <div className="bg-yellow-100 border-default border-yellow-400 rounded px-24">
-    ### Disclaimer
-
-    The `v3` of `Button` is a partial rebuild to support [Menu v3](/docs/actions-menu-v3-api-specification--docs). As the changes to the API between `v1/v2` to `v3` is significant, our recommendation is to hold on adopting this outside of `Menu` `v3` as it will have a limited set of options.
-  </div>
-</SbContent>
-
-<SbContent>
-  <KAIOInstallation exportNames={["Tooltip", "TooltipTrigger" ]} family="actions" version="3" />
-
-
-  ## Overview
-
-</SbContent>
-
-<Canvas of={exampleStories.Playground} />
-
-<SbContent className="mb-64">
-  ### React Aria
-
-  This component is built using the react-aria-components library and extends the [Button](https://react-spectrum.adobe.com/react-aria/Button.html) component.
-
-  As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Button.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Button.html#anatomy) and [event handlers](https://react-spectrum.adobe.com/react-aria/Button.html#events), the guidance below is tailored to our implementation and should cover most known use cases of the Button.
-
-  For more scenarios that may not be present below, we recommend checkout out React Aria&apos;s documentation on the [Button's available hooks](https://react-spectrum.adobe.com/react-aria/Button.html#hooks) or [advanced customization](https://react-spectrum.adobe.com/react-aria/Button.html#advanced-customization) options.
-</SbContent>
-
-<SbContent>
-  ## API
-</SbContent>
-
-
-<Controls of={exampleStories.Playground} className="mb-64" />
-
-<SbContent className="mb-64">
-  ### onPress vs onClick
-
-  One key change to the `Button`&apos;s API is the shift from `onClick` to `onPress`. This will not require a change to the implementation of `onClick` logic, ie:
-  ```
-  <Button label="Submit" onClick={(e) => sumbit(e)}/>
-  // can safely be migrated to:
-  <Button onPress={(e) => submit(e)}>
-    Submit
-  </Button>
-  ```
-
-  React Aria&apos;s implementation of `onPress` provides better support for consistent touch events across device types, such mobile, desktop and tablet. You can read more about the development and reason behind this pattern [here](https://react-spectrum.adobe.com/blog/building-a-button-part-1.html#touch-interactions).
-</SbContent>
-
-<SbContent>
-
-  ### Interactive states and styling pseudo-classes
-
-  Psuedo classes, such as `hover`, `focus` or `focus-visible`, are now targeted and styled with HTML data attributes that reflect the internal state of the React Aria Button (ie: `isHovered`, `isFocusVisible`).
-
-  When styling in CSS, it is recommended to use [data attributes](https://react-spectrum.adobe.com/react-aria/Button.html#styling), such as `:[data-hovered]` or `:[data-focus-visible]`, instead of using pseudo selectors like `:hover` or `:focus-visible`.
-
-  ```css
-  .button {
-    background-color: $color-white;
-    &:hover {
-      background-color: $color-gray-200;
-    }
-  }
-  // becomes
-  .button {
-    background-color: $color-white;
-    &:[data-hovered] {
-      background-color: $color-gray-200;
-    }
-  }
-  ```
-
-  #### Dynamic styles with ButtonRenderProps
-
-  As `Button` extends React Aria&apos;s functionality, `className` can now accept either a `string` or function that receives the `Button`&apos;s state for styling, such as `isPressed` or `isHovered`. This useful for add dynamic styling tweaks with Tailwind or other CSS-in-JS libraries.
-</SbContent>
-
-<Canvas of={docsStories.ButtonClassModifierWithRenderProps} sourceState="shown" />
-
-<SbContent className="mb-64">
-  This can also be styled in directly with Tailwind targeting the data attributes, ie:
-
-  ```tsx
-    <Button className="[&[data-focused='true']]:bg-blue-300">Label</Button>
-  ```
-
-  React Aria also offers a [Tailwind plugin](https://react-spectrum.adobe.com/react-aria/styling.html#plugin) that exposes the styling states of React Aria Components into Tailwind. This can make classes and allows you to leverage intellisense when working with React Aria components, ie:
-
-  ```tsx
-    <Button className="pressed:bg-blue-300">Label</Button>
-  ```
-
-
-  For more on styling with React Aria and other ways to extend the `Button`&apos;s styles, we recommend checking out the [docs here](https://react-spectrum.adobe.com/react-aria/Button.html#styling).
-</SbContent>
-
-<SbContent>
-  ### Icons, labels and content as children
-
-  In `v3`, labels, icons and their positions are controlled by the consumer as `children`. The immediate children of `Button` are spaced using `flex-gap` to ensure `RTL` can be supported out of the box for most cases.
-</ SbContent>
-
-<Canvas of={exampleStories.ButtonWithIcon} />
-
-<SbContent>
-  While the expected default is that `children` will be a `ReactNode`, it also accepts a render function that takes `ButtonRenderProps`. Similar to the className, this exposes the internal state (`isPressed`, `isHovered`, etc) of the button and can be used for conditional rendering.
-
-  ```tsx
-  <Button>
-    {({isPressed}) => (
-      <>
-        {isPressed && <PressHighlight />}
-        Press me
-      </>
-    )}
-  </Button>
-```
-</ SbContent>
-
-
-<SbContent>
-  ### Icon only buttons
-
-  To achieve the `IconButton` pattern in `v3`, we recommend passing an icon in as a the sole child. The label should be added to the icon&apos;s `aria-label` prop in the SVG Icon.
-</ SbContent>
-
-<Canvas of={exampleStories.IconButton} className="mb-32" />
-
-<SbContent className="mb-64">
-  We recommend against setting the `aria-label` on the `Button` itself, and letting the accessible label be [determined by the children](https://cultureamp.atlassian.net/wiki/spaces/PA/pages/3833331831/Accessible+button+and+link+labels). You can achieve this by using visually hidden elements as children, which will create an accessible label based off the contents of the button.
-</SbContent>
-
-<SbContent className="mb-64">
-  ### Reversed Colors
-
-  The `Button` uses the `useReversedColors` hook and `ReversedColors` provider to control the dark and light theme.
-
-  <Canvas className="bg-purple-600 mb-24" of={exampleStories.OnReversed} />
-
-  To enable the reversed theme, you will need to the component or application in the ReversedColors provider.
-</ SbContent>
-
-<SbContent>
-  ### Buttons and links
-
-  `v3` of the `Button` component does not support the `href` prop. While a `Link` component will be coming to Kaizen, we recommend using the `v2` of button if a `anchor` or routing link is needed.
-
-  We do not advise passing in an `anchor` tag as a child of the `Button` as this can lead to accessibility issues.
-</ SbContent>
-

package/src/__actions__/Button/v3/_docs/Button.mdx

@@ -1,41 +0,0 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { ResourceLinks, SbContent, Installation } from "~storybook/components"
-import * as Button from "./Button.stories"
-
-<Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
-
-<SbContent>
-  # Button (v3)
-
-  Updated July 12, 2024
-</SbContent>
-
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Button/v3"
-  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&t=a6VcoKBJx6snn0ut-1"
-  ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"
-  apiSpecification="/?path=/docs/actions-button-v3-api-specification--docs"
-/>
-
-<SbContent className="mb-24">
-  <div className="bg-yellow-100 border-default border-yellow-400 rounded px-24">
-    ### Disclaimer
-
-    The `v3` of `Button` is a partial rebuild to support [Menu v3](/docs/actions-menu-v3-api-specification--docs). As the changes to the API between `v1/v2` to `v3` is significant, our recommendation is to hold on adopting this outside of `Menu` `v3` as it will have a limited set of options.
-  </div>
-</SbContent>
-
-<SbContent>
-  <Installation
-    installCommand="pnpm add @kaizen/components"
-    importStatement='import { Button } from "@kaizen/components/v3/actions"'
-  />
-
-  ## Overview
-
-  This is the rebuild of the Button component - the main changes present in `v3` will relate to an updated API. More guidance will be provided following the completion of the Button RFC.
-</SbContent>
-
-<Canvas of={Button.Playground} />
-<Controls of={Button.Playground} include={["children", "variant", "isDisabled"]} className="mb-64" />
-

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

@@ -1,98 +0,0 @@
-import React from "react"
-import { action } from "@storybook/addon-actions"
-import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, TrashIcon, ChevronUpIcon } from "~components/Icon"
-import { VisuallyHidden } from "~components/VisuallyHidden"
-import { Button } from "../index"
-
-const meta = {
-  title: "Actions/Button/Button (v3)",
-  component: Button,
-  args: {
-    children: "Label",
-    onPress: action("Button onPress event"),
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  render: ({ children, ...otherArgs }) => (
-    <Button {...otherArgs}>{children}</Button>
-  ),
-}
-
-export const ButtonWithIcon: Story = {
-  render: ({ children, ...otherArgs }) => (
-    <Button {...otherArgs}>{children}</Button>
-  ),
-  args: {
-    children: (
-      <>
-        Label
-        <AddIcon role="presentation" />
-      </>
-    ),
-  },
-}
-
-export const ButtonWithIconStart: Story = {
-  render: ({ children, ...otherArgs }) => (
-    <Button {...otherArgs}>{children}</Button>
-  ),
-  args: {
-    children: (
-      <>
-        <TrashIcon role="presentation" />
-        Label
-      </>
-    ),
-  },
-}
-
-export const IconButton: Story = {
-  render: ({ children, ...otherArgs }) => (
-    <Button {...otherArgs}>{children}</Button>
-  ),
-  args: {
-    children: (
-      <>
-        <TrashIcon role="img" aria-label="Remove" />
-        <VisuallyHidden> Highlights: May 8, 2024</VisuallyHidden>
-      </>
-    ),
-  },
-}
-
-export const OnReversed: Story = {
-  render: ({ children, ...otherArgs }) => (
-    <Button {...otherArgs}>{children}</Button>
-  ),
-  args: {
-    children: (
-      <>
-        Label
-        <ChevronUpIcon role="presentation" />
-      </>
-    ),
-  },
-  parameters: {
-    reverseColors: true,
-    docs: {
-      source: {
-        code: `
-          <ReversedColors isReversed={true}>
-            <Button {...otherArgs}>
-              <>
-                Label
-                <ChevronUpIcon role="presentation" />
-              </>
-            </Button>
-          </ReversedColors>
-      `,
-      },
-    },
-  },
-}