@kaizen/components 1.67.22 → 1.68.0

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

@@ -0,0 +1,235 @@
+.button {
+  /* RESET */
+  appearance: none;
+  background: transparent;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --button-min-x-y: var(--spacing-40);
+  --button-border-width: var(--border-solid-border-width);
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-x: calc(var(--spacing-16) - var(--button-border-width));
+
+  background-color: var(--button-bg-color, var(--color-blue-500));
+  border: var(--button-border-width) solid;
+  border-radius: var(--border-solid-border-radius);
+  border-color: var(--button-border-color, var(--color-blue-500));
+  box-sizing: border-box;
+  color: var(--button-text-color, var(--color-white));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: start;
+  font-family: var(
+    --button-font-family,
+    var(--typography-paragraph-body-font-family)
+  );
+  font-weight: var(--button-font-weight, 500);
+  font-size: var(--button-font-size, 1rem);
+  line-height: var(--button-line-height, 1.5rem);
+  min-height: var(--button-min-x-y);
+  min-width: var(--button-min-x-y);
+  position: relative;
+  padding: var(--button-padding-y) var(--button-padding-x);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-blue-600);
+    --button-border-color: var(--color-blue-600);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-blue-700);
+    --button-border-color: var(--color-blue-700);
+  }
+
+  &[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);
+  }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.small {
+  --button-font-size: 0.75rem;
+  --button-line-height: 1rem;
+  --button-min-x-y: var(--spacing-32);
+  --icon-size: 16;
+}
+
+.medium {
+  --button-padding-x: calc(var(--spacing-20) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-40);
+  --icon-size: 24;
+}
+
+.large {
+  --button-padding-x: calc(var(--spacing-24) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+  --button-min-x-y: var(--spacing-48);
+  --icon-size: 24;
+}
+
+.smallIconButton,
+.mediumIconButton {
+  --button-padding-x: calc(var(--spacing-8) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-8) - var(--button-border-width));
+}
+
+.largeIconButton {
+  --button-padding-x: calc(var(--spacing-12) - var(--button-border-width));
+  --button-padding-y: calc(var(--spacing-12) - var(--button-border-width));
+}
+
+.secondary {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-gray-500);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-600);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-black);
+  }
+}
+
+.tertiary {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
+  }
+}
+
+.primaryReversed,
+.secondaryReversed,
+.tertiaryReversed {
+  &[data-focus-visible]::after {
+    border-color: var(--color-blue-300);
+  }
+}
+
+.primaryReversed {
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pending] {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-white);
+  }
+}
+
+.secondaryReversed {
+  --button-bg-color: transparent;
+  --button-border-color: var(--color-white);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
+
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: var(--color-white);
+  }
+}
+
+.tertiaryReversed {
+  --button-bg-color: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+  }
+
+  &[data-pressed] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
+  }
+
+  &[data-pending] {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.1);
+    --button-border-color: transparent;
+  }
+}
+
+.isDisabled {
+  --button-bg-color: var(--color-gray-400);
+  --button-border-color: var(--color-gray-400);
+  --button-text-color: var(--color-white);
+
+  &[data-hovered] {
+    --button-bg-color: var(--color-gray-400);
+    --button-border-color: var(--color-gray-400);
+  }
+}
+
+.hideContentWidth {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+}
+
+.retainContentWidth {
+  visibility: hidden;
+}

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

@@ -1,44 +1,107 @@
-import React from "react"
+import React, { forwardRef } from "react"
 import {
   Button as RACButton,
   ButtonProps as RACButtonProps,
 } from "react-aria-components"
 import { useReversedColors } from "~components/__utilities__/v3"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./Button.module.scss"
+import { ButtonContent, PendingContent } from "./subcomponents"
+import { ButtonSizes, ButtonVariants, PendingButtonProps } from "./types"
+import styles from "./Button.module.css"
 
-export type ButtonVariants = "default"
-
-export type ButtonProps = RACButtonProps & {
+type ButtonBaseProps = Omit<RACButtonProps, "children"> & {
+  /** Used as the label for the button. */
+  children: RACButtonProps["children"]
+  /** Visually hides the Button's child content used as the label and the `pendingLabel`. Use for icon-only `Button`. @default "false" */
+  hasHiddenLabel?: boolean
   /** The visual style of the button.
    *  @default "default" */
   variant?: ButtonVariants
   /** The visual size of the button. `medium` was formerly `regular`
    *  @default "medium" */
-  size?: "small" | "medium"
+  size?: ButtonSizes
+  /** Renders an icon at the `iconPosition` provided. To the size scales with the button, we recommend using the `Icon` component from `"@kaizen/components/future"` */
+  icon?: JSX.Element
+  /** Controls the position of the Icon passed in as props. @default "start" */
+  iconPosition?: "start" | "end"
+  /** Controls if the button inherits width from its parent. @default "false" */
+  isFullWidth?: boolean
 }
 
-export const Button = ({
-  variant = "default",
-  className,
-  size = "medium",
-  children,
-  ...otherProps
-}: ButtonProps): JSX.Element => {
-  const isReversed = useReversedColors()
+export type ButtonProps = ButtonBaseProps & PendingButtonProps
 
-  return (
-    <RACButton
-      className={mergeClassNames(
-        styles.button,
-        styles[variant],
-        styles[size],
-        isReversed && styles.reversed,
-        className
-      )}
-      {...otherProps}
-    >
-      {children}
-    </RACButton>
-  )
-}
+export const Button = forwardRef(
+  (
+    {
+      variant = "primary",
+      size = "medium",
+      className,
+      children,
+      isDisabled,
+      isFullWidth = false,
+      icon,
+      iconPosition,
+      hasHiddenLabel = false,
+      isPending,
+      hasHiddenPendingLabel: propsHasHiddenPendingLabel = false,
+      pendingLabel,
+      ...restProps
+    }: ButtonProps,
+    ref: React.ForwardedRef<HTMLButtonElement>
+  ) => {
+    const isReversed = useReversedColors()
+    const pendingProps: PendingButtonProps = isPending
+      ? {
+          isPending,
+          hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
+          pendingLabel,
+        }
+      : {}
+    const buttonContentClass = isPending
+      ? !hasHiddenLabel && propsHasHiddenPendingLabel
+        ? styles.retainContentWidth
+        : styles.hideContentWidth
+      : undefined
+
+    return (
+      <RACButton
+        ref={ref}
+        className={mergeClassNames(
+          styles.button,
+          styles[size],
+          hasHiddenLabel && styles[`${size}IconButton`],
+          isDisabled && styles.isDisabled,
+          isReversed ? styles[`${variant}Reversed`] : styles[variant],
+          isFullWidth && styles.fullWidth,
+          className
+        )}
+        isDisabled={isDisabled}
+        isPending={isPending}
+        {...restProps}
+      >
+        {racStateProps => {
+          const childIsFunction = typeof children === "function"
+
+          return (
+            <>
+              <ButtonContent
+                size={size}
+                icon={icon}
+                iconPosition={iconPosition}
+                hasHiddenLabel={hasHiddenLabel}
+                className={buttonContentClass}
+              >
+                {childIsFunction ? children(racStateProps) : children}
+              </ButtonContent>
+              <span aria-live="polite">
+                {pendingProps.isPending && (
+                  <PendingContent {...pendingProps} size={size} />
+                )}
+              </span>
+            </>
+          )
+        }}
+      </RACButton>
+    )
+  }
+)

package/src/__actions__/Button/v3/_docs/Button--api-specification.mdx

@@ -0,0 +1,150 @@
+import { Canvas, Meta, Controls, ArgTypes, DocsStory } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as exampleStories from "./Button.docs.stories"
+import * as specStories from "./Button.spec.stories"
+
+<Meta title="Actions/Button/Button (v3)/API Specification" />
+
+# Button API Specification (v3)
+
+Updated Nov 19, 2024
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Button/v3"
+  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/branch/sPhYSlgPScLOAOYfAbkaI5/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-17364&node-type=canvas&m=dev"
+  designGuidelines="/?path=/docs/actions-button-button-v3-usage-guidelines--docs"
+/>
+
+<KAIOInstallation exportNames={["Button" ]} family="actions" version="3" />
+
+## Overview
+
+`Button` allows users to perform an action. If the component needs to navigate somewhere and can be opened in a new tab, use a [link instead](#buttons-and-links).
+
+The following example and table showcases the essential props that enable the core functionality of `Button`. For the remaining suite of API options refer to [this section](#additional-api-options).
+
+<Canvas of={exampleStories.Playground} />
+
+<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
+
+## Buttons and links
+
+The `Button` component does not support the `href` property or have any inbuilt routing support. This component is intended as a semantic button and should only be used to perform actions on a page. We advise against passing in an `anchor` tag as a child of the `Button` as this can lead to accessibility issues.
+
+A `LinkButton` component will be provided in the future to handle routing and navigation use cases. In the meantime, we recommend staying on [Button V1](/docs/actions-button-button-v1--docs) if an `href` is needed.
+
+## API
+
+This is built on top of [React Aria's Button component](https://react-spectrum.adobe.com/react-aria/Button.html#props) and seeks to provide a flexible API with convenient abstractions that handles variants, sizes, pending states and icons.
+
+### Variants
+
+`Button` supports the following variants: `primary`, `secondary` and `tertiary`. If the `variant` prop is not specified, the default will be `primary`.
+
+<Canvas of={exampleStories.ButtonVariants} />
+
+Reversed variants are handled via the `ReversedColors` Provider - read more on this in the [reversed colors section](#reversed-colors).
+
+<DocsStory of={exampleStories.ButtonVariantsReversed} expanded={false} />
+
+To enable the reversed theme, you will need to wrap the component or application in the `ReversedColors` provider, ie:
+
+```tsx
+import { Button } from "@kaizen/components/v3/actions"
+import { ReversedColors } from "@kaizen/components/v3/utilities"
+// application code
+
+return (
+  <ReversedColors isReversed={true}>
+    <Button {...buttonProps} />
+  </ReversedColors>
+)
+```
+
+### Sizes
+
+Button supports the following sizes: `small`, `medium` and `large`. If the `size` prop is not specified, the default will be `medium`.
+
+<Canvas of={exampleStories.ButtonSizes} />
+
+### `onPress` vs `onClick`
+
+One key change to the `Button`&apos;s API is the shift from `onClick` to React Aria's implementation of `onPress`. This approach has been adopted as it 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).
+
+Functionally this does not change the way we pass actions into `Button`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
+
+```tsx
+<Button label="Submit" onClick={e => sumbit(e)}/>
+```
+
+Can safely be replaced with the following:
+
+```tsx
+<Button onPress={e => submit(e)}>
+  Submit
+</Button>
+```
+
+### Button content and children
+
+Labels and any button content can be passed into the `Button` as `children`. Content wrapped by the `Button` will be spaced evenly relative to the `size` prop.
+
+```tsx
+<Button variant="secondary" onPress={e => submit(e)}>
+  Label
+</Button>
+```
+
+While in most cases, `children` will be a `ReactNode`, `Button` also accepts a render function with React Aria's `ButtonRenderProps`. This allows for more advanced styling and rendering options by hooking into React Aria's internal button state. You can read more about this [here](https://react-spectrum.adobe.com/react-aria/Button.html#styling).
+
+### Icons and positioning
+
+The `icon` property abstracts the need to handle positioning and sizing logic for icons within the `Button`. When paired with the [Icon component](/docs/illustrations-icon-icon-future-api-specification--docs), this will scale the icon to the `Button`'s `size` prop.
+
+<Canvas of={exampleStories.ButtonWithIconStart} />
+
+Set the position of the icon using the `iconPosition` prop. This will ensure content is flipped in `RTL` layouts. Note that icons will need the [shouldMirrorInRTL](/docs/illustrations-icon-icon-future-api-specification--docs#mirror-in-rtl) prop set to `true` when mirroring is required.
+
+<Canvas of={exampleStories.ButtonWithIconEnd} />
+
+
+### Icon-only `Button` and `hasHiddenLabel`
+
+To achieve an icon-only `Button` (previously: `IconButton`) use the `icon` prop and set `hasHiddenLabel` to `true`. This will visually hide the button's `children` and `pendingLabel`, while still announcing the content to screen readers.
+
+<Canvas of={exampleStories.IconButton} className="mb-32"  />
+
+This pattern ensures that the `Button`'s accessible name is determined by its children, which helps to announce relevant content to the screen readers, as with the [pending state](#pending-state). You can learn more about this [accessible pattern here](https://cultureamp.atlassian.net/wiki/spaces/PA/pages/3833331831/Accessible+button+and+link+labels).
+
+### Pending state
+
+`isPending` and `pendingLabel` are used to indicate that an interaction is in progress. This will disable the `Button`'s press events while rendering a loading spinner and `pendingLabel`.
+
+<Canvas of={specStories.PendingButton} />
+
+This can be paired with the `hasHiddenPendingLabel` prop to visually hide the `pendingLabel` and maintain the content width. This is ideal for avoid layout shifts when space is a commodity.
+
+The `pendingLabel` should be short and declarative as this will be announced to a screen reader regardless of its visibility.
+
+<Canvas of={specStories.PendingButtonWithHiddenPendingLabel} />
+
+As mentioned in the [previous section](#icon-only-button-and-hashiddenlabel), an icon-only `Button` uses `hasHiddenLabel` to visually hide both the `pendingLabel` and child content, so `hasHiddenPendingLabel` is not needed.
+
+<Canvas of={specStories.PendingIconButton} />
+
+
+### Full width Buttons
+
+If a button is statically the full width of a container you can use the `isFullWidth` property.
+
+<Canvas of={exampleStories.ButtonFullWidth} />
+
+For resizing on smaller screens, consider using the `className` prop to leverage CSS media or container queries, ie: `<Button className="w-full md:w-[initial]">Label</Button>`.
+
+## Additional API options
+
+The following table is a collection of additional React Aria and native HTML props that are exposed from the React Aria API. These are not required for the implementation of `Button` but can be used to extend its functionality. Refer back to the [overview section](#overview) for the core props that enable most use cases.
+
+You can learn more about React Aria's Button API and advance configuration options [here](https://react-spectrum.adobe.com/react-aria/Button.html#props).
+
+<ArgTypes of={exampleStories.Playground} exclude={["children", "hasHiddenLabel", "className",  "size", "variant", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending", "pendingLabel", "hasHiddenPendingLabel" ]} />

package/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Controls } from "@storybook/blocks"
+import { ResourceLinks, Installation } from "~storybook/components"
+import * as Button from "./Button.docs.stories"
+
+<Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
+
+# Button (v3)
+
+Updated July 12, 2024
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Button/v3"
+  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/branch/sPhYSlgPScLOAOYfAbkaI5/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-17364&node-type=canvas&m=dev"
+  apiSpecification="/?path=/docs/actions-button-button-v3-api-specification--docs"
+/>
+
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Button } from "@kaizen/components/v3/actions"'
+/>
+
+## Overview
+
+Buttons allow users to perform an action. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+
+<Canvas of={Button.Playground} />
+
+<Controls of={Button.Playground} include={["children", "variant", "size", "isDisabled", "icon", "iconPosition"]} className="mb-64" />
+
+