@kaizen/components 1.67.21 → 1.68.0

package/dist/types/EmptyState/EmptyState.d.ts

@@ -17,6 +17,7 @@ export type EmptyStateProps = {
      * @default informative
      */
     variant?: "success" | "warning" | "informative" | "expert-advice";
+    /** @deprecated - This prop no longer has any effect */
     layoutContext?: "sidebarAndContent" | "contentOnly";
     bodyText: string | React.ReactNode;
     straightCorners?: boolean;
@@ -27,6 +28,6 @@ export type EmptyStateProps = {
  * {@link https://cultureamp.design/?path=/docs/components-empty-state--docs Storybook}
  */
 export declare const EmptyState: {
-    ({ children, id, illustrationType, variant, layoutContext, headingProps, bodyText, straightCorners, isAnimated, loop, classNameOverride, ...props }: EmptyStateProps): JSX.Element;
+    ({ children, id, illustrationType, variant, layoutContext: _, headingProps, bodyText, straightCorners, isAnimated, loop, classNameOverride, ...props }: EmptyStateProps): JSX.Element;
     displayName: string;
 };

package/dist/types/__actions__/Button/v3/Button.d.ts

@@ -1,11 +1,24 @@
+import React from "react";
 import { ButtonProps as RACButtonProps } from "react-aria-components";
-export type ButtonVariants = "default";
-export type ButtonProps = RACButtonProps & {
+import { ButtonSizes, ButtonVariants, PendingButtonProps } from "./types";
+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 declare const Button: ({ variant, className, size, children, ...otherProps }: ButtonProps) => JSX.Element;
+export type ButtonProps = ButtonBaseProps & PendingButtonProps;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/__actions__/Button/v3/index.d.ts

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

package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import { ButtonProps } from "../../Button";
+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 declare const ButtonContent: ({ children, hasHiddenLabel, size, icon, iconPosition, className, ...restProps }: ButtonContentProps) => JSX.Element;
+export {};

package/dist/types/__actions__/Button/v3/subcomponents/ButtonContent/index.d.ts

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

package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.d.ts

@@ -0,0 +1,5 @@
+import { ButtonSizes, PendingProps } from "../../types";
+/** Renders the pending content of the button, handling pending label visibility and spinner positioning */
+export declare const PendingContent: ({ pendingLabel, hasHiddenPendingLabel, size, }: PendingProps & {
+    size?: ButtonSizes;
+}) => JSX.Element;

package/dist/types/__actions__/Button/v3/subcomponents/PendingContent/index.d.ts

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

package/dist/types/__actions__/Button/v3/subcomponents/index.d.ts

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

package/dist/types/__actions__/Button/v3/types.d.ts

@@ -0,0 +1,21 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.21",
+  "version": "1.68.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/EmptyState/EmptyState.module.css

@@ -0,0 +1,114 @@
+.container {
+  --empty-state-border-width: var(--border-width-1);
+  --empty-state-illustration-max-height: 366px;
+  --empty-state-illustration-max-width: 420px;
+  --empty-state-text-container-max-width: 426px;
+
+  container-type: inline-size;
+  width: 100%;
+  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);
+  color: var(--color-purple-800);
+}
+
+.straightCorners {
+  border-radius: 0;
+}
+
+/** @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);
+}
+
+.content {
+  justify-content: center;
+  display: grid;
+  grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
+      auto,
+      var(--empty-state-text-container-max-width)
+    );
+  grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
+  padding: var(--spacing-24);
+  grid-column-gap: var(--spacing-32);
+}
+
+.illustrationContainer {
+  display: flex;
+  align-items: center;
+}
+
+.illustration,
+.illustrationContainer video {
+  max-width: 100%;
+  max-height: var(--empty-state-illustration-max-height);
+  height: 100%;
+  width: auto;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-24);
+}
+
+@container (width <=1024px) {
+  .content {
+    padding: var(--spacing-16);
+  }
+}
+
+@container (width <=560px) {
+  .content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-column-gap: unset;
+    grid-row-gap: var(--spacing-24);
+    padding: var(--spacing-24);
+  }
+
+  .illustrationContainer {
+    --empty-state-illustration-max-height: 210px;
+
+    justify-content: center;
+  }
+
+  .heading {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}

package/src/EmptyState/EmptyState.tsx

@@ -10,7 +10,7 @@ import {
 } from "~components/Illustration"
 import { Text } from "~components/Text"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./EmptyState.module.scss"
+import styles from "./EmptyState.module.css"
 
 const ILLUSTRATIONS: Record<
   string,
@@ -50,6 +50,7 @@ export type EmptyStateProps = {
    * @default informative
    */
   variant?: "success" | "warning" | "informative" | "expert-advice"
+  /** @deprecated - This prop no longer has any effect */
   layoutContext?: "sidebarAndContent" | "contentOnly"
   bodyText: string | React.ReactNode
   straightCorners?: boolean
@@ -66,7 +67,7 @@ export const EmptyState = ({
   id,
   illustrationType,
   variant = "informative",
-  layoutContext = "sidebarAndContent",
+  layoutContext: _,
   headingProps,
   bodyText,
   straightCorners,
@@ -82,33 +83,30 @@ export const EmptyState = ({
       className={classnames(
         styles.container,
         illustrationType ? styles[illustrationType] : styles[variant],
-        styles[layoutContext],
         straightCorners && styles.straightCorners,
         classNameOverride
       )}
       id={id}
       {...props}
     >
-      <div className={styles.illustrationSide}>
-        {isAnimated ? (
-          <IllustrationComponent
-            isAnimated
-            loop={loop}
-            classNameOverride={styles.illustration}
-          />
-        ) : (
-          <IllustrationComponent classNameOverride={styles.illustration} />
-        )}
-      </div>
-      <div className={styles.textSide}>
-        <div className={styles.textSideInner}>
+      <div className={styles.content}>
+        <div className={styles.illustrationContainer}>
+          {isAnimated ? (
+            <IllustrationComponent
+              isAnimated
+              loop={loop}
+              classNameOverride={styles.illustration}
+            />
+          ) : (
+            <IllustrationComponent classNameOverride={styles.illustration} />
+          )}
+        </div>
+        <div className={styles.textContainer}>
           {headingProps && (
             <Heading classNameOverride={styles.heading} {...headingProps} />
           )}
-          <Text variant="body" classNameOverride={styles.description}>
-            {bodyText}
-          </Text>
-          {children}
+          <Text variant="body">{bodyText}</Text>
+          {children && <span>{children}</span>}
         </div>
       </div>
     </div>

package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
-} from "~storybook/components/StickerSheet"
+} from "~storybook/components/_future/StickerSheet"
 import { EmptyState, EmptyStateProps } from "../index"
 
 export default {
@@ -23,7 +23,9 @@ const EmptyStateWrapper = ({
   isAnimated,
   ...args
 }: EmptyStateProps): JSX.Element => (
-  <EmptyState isAnimated={IS_CHROMATIC ? false : isAnimated} {...args} />
+  <div>
+    <EmptyState isAnimated={IS_CHROMATIC ? false : isAnimated} {...args} />
+  </div>
 )
 
 const StickerSheetTemplate: StickerSheetStory = {
@@ -54,50 +56,64 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet isReversed={isReversed} heading="EmptyState">
-          <StickerSheet.Body>
-            {variants.map(variant => (
-              <StickerSheet.Row key={variant} rowTitle={variant}>
-                <EmptyStateWrapper {...defaultProps} variant={variant} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="straightCorners">
-              <EmptyStateWrapper {...defaultProps} straightCorners />
+        <StickerSheet isReversed={isReversed} title="EmptyState">
+          {variants.map(variant => (
+            <StickerSheet.Row key={variant} header={variant}>
+              <EmptyStateWrapper {...defaultProps} variant={variant} />
             </StickerSheet.Row>
-          </StickerSheet.Body>
+          ))}
+          <StickerSheet.Row header="straightCorners">
+            <EmptyStateWrapper {...defaultProps} straightCorners />
+          </StickerSheet.Row>
+        </StickerSheet>
+
+        <StickerSheet isReversed={isReversed} title="Responsive breakpoints">
+          <StickerSheet.Row header="Above 1024px">
+            <StickerSheet.Cell style={{ width: 1025 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Above 560px and below or equal to 1024px (max)">
+            <StickerSheet.Cell style={{ width: 1024 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Above 560px and below or equal to 1024px (min)">
+            <StickerSheet.Cell style={{ width: 561 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Below or equal to 560px">
+            <StickerSheet.Cell style={{ width: 560 }}>
+              <EmptyStateWrapper {...defaultProps} />
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Illustration type (deprecated)"
+          title="Illustration type (deprecated)"
         >
-          <StickerSheet.Body>
-            {illustrationTypes.map(illustrationType => (
-              <StickerSheet.Row
-                key={illustrationType}
-                rowTitle={illustrationType}
+          {illustrationTypes.map(illustrationType => (
+            <StickerSheet.Row key={illustrationType} header={illustrationType}>
+              <EmptyStateWrapper
+                {...defaultProps}
+                illustrationType={illustrationType}
               >
-                <EmptyStateWrapper
-                  {...defaultProps}
-                  illustrationType={illustrationType}
-                >
-                  <Button
-                    label="Label"
-                    icon={
-                      <Icon
-                        name="chevron_right"
-                        isPresentational
-                        shouldMirrorInRTL
-                      />
-                    }
-                    iconPosition="end"
-                  />
-                </EmptyStateWrapper>
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+                <Button
+                  label="Label"
+                  icon={
+                    <Icon
+                      name="chevron_right"
+                      isPresentational
+                      shouldMirrorInRTL
+                    />
+                  }
+                  iconPosition="end"
+                />
+              </EmptyStateWrapper>
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

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;
+}