@kaizen/components 0.0.0-canary-fix-select-focus-add-small-delay-20241013230007 → 0.0.0-canary-tsx-codemod-20241029235345

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stories.tsx

@@ -28,9 +28,28 @@ export const ClassNameOverride: Story = {
   args: { classNameOverride: "text-green-400" },
 }
 
+export const Colors: Story = {
+  render: args => (
+    <>
+      <LoadingSpinner {...args} classNameOverride="text-green-400" />
+      <LoadingSpinner {...args} classNameOverride="text-purple-800" />
+      <LoadingSpinner {...args} classNameOverride="text-blue-500" />
+      <LoadingSpinner {...args} classNameOverride="text-red-500" />
+    </>
+  ),
+  decorators: [
+    Story => (
+      <div className="flex gap-24">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
 export const Size: Story = {
   render: args => (
     <>
+      <LoadingSpinner {...args} size="xs" />
       <LoadingSpinner {...args} size="sm" />
       <LoadingSpinner {...args} size="md" />
     </>

package/src/Loading/LoadingSpinner/subcomponents/SpinnerIcon.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import styles from "../LoadingSpinner.module.css"
+
+const SmallSpinnerIcon = (): JSX.Element => (
+  <svg
+    className={styles.spinner}
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="9"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeOpacity="0.3"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      fill="currentColor"
+      d="M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
+    />
+  </svg>
+)
+
+const MediumSpinnerIcon = (): JSX.Element => (
+  <svg
+    className={styles.spinner}
+    aria-hidden="true"
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="24"
+      cy="24"
+      r="22.5"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeOpacity="0.3"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      fill="currentColor"
+      d="M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
+    />
+  </svg>
+)
+
+const ExtraSmallSpinnerIcon = (): JSX.Element => (
+  <svg
+    className={styles.spinner}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      opacity="0.3"
+      cx="8"
+      cy="8"
+      r="6"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="M14 8C14 4.68629 11.3137 2 8 2"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+type SpinnerIconProps = {
+  size: "xs" | "sm" | "md"
+}
+
+export const SpinnerIcon = ({ size }: SpinnerIconProps): JSX.Element => {
+  if (size === "xs") return <ExtraSmallSpinnerIcon />
+  if (size === "sm") return <SmallSpinnerIcon />
+  return <MediumSpinnerIcon />
+}

package/src/Loading/LoadingSpinner/subcomponents/index.ts

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

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -47,6 +47,8 @@
   }
 
   .spotIcon {
+    --icon-size: 30;
+
     width: 30px;
     height: 30px;
 

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -1,12 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Heading } from "~components/Heading"
-import {
-  CautionWhiteIcon,
-  ExclamationWhiteIcon,
-  InformationWhiteIcon,
-  SuccessWhiteIcon,
-} from "~components/Icon"
 import {
   Assertive,
   Cautionary,
@@ -23,6 +17,7 @@ import {
   ModalBody,
 } from "~components/Modal/GenericModal"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./ConfirmationModal.module.scss"
 
 type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive"
@@ -77,46 +72,48 @@ type ConfirmationModalVariants = {
 export type ConfirmationModalProps = BaseConfirmationModalProps &
   (ConfirmationModalMoods | ConfirmationModalVariants)
 
-const getIcon = (
-  variantName: Mood | Variant,
-  isProminent: boolean
-): JSX.Element => {
+const getIconName = (variantName: Mood | Variant): string => {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? (
-        <Cautionary />
-      ) : (
-        <CautionWhiteIcon inheritSize role="presentation" />
-      )
+      return "warning"
     case "informative":
-      return isProminent ? (
-        <Informative />
-      ) : (
-        <InformationWhiteIcon inheritSize role="presentation" />
-      )
+      return "info"
     case "negative":
     case "warning":
-      return isProminent ? (
-        <Negative />
-      ) : (
-        <ExclamationWhiteIcon inheritSize role="presentation" />
-      )
+      return "error"
     case "positive":
     case "success":
-      return isProminent ? (
-        <Positive />
-      ) : (
-        <SuccessWhiteIcon inheritSize role="presentation" />
-      )
+      return "check_circle"
     case "assertive":
-      return isProminent ? (
-        <Assertive />
-      ) : (
-        <ExclamationWhiteIcon inheritSize role="presentation" />
-      )
+      return "error"
   }
 }
 
+const getIcon = (
+  variantName: Mood | Variant,
+  isProminent: boolean
+): JSX.Element => {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return <Cautionary />
+      case "informative":
+        return <Informative />
+      case "negative":
+      case "warning":
+        return <Negative />
+      case "positive":
+      case "success":
+        return <Positive />
+      case "assertive":
+        return <Assertive />
+    }
+  }
+
+  const iconName = getIconName(variantName)
+  return <Icon name={iconName} isPresentational isFilled />
+}
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}

package/src/Modal/ContextModal/ContextModal.module.scss

@@ -14,19 +14,19 @@
   }
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -14,22 +14,22 @@
 }
 
 .backdropLayer {
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-
   position: fixed;
   background-color: #000;
   opacity: 50%;
   z-index: $ca-z-index-modal-backdrop;
-}
 
-.scrollLayer {
   @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+}
 
+.scrollLayer {
   position: fixed;
   display: flex;
   align-items: center;
   z-index: $ca-z-index-modal;
   overflow-y: auto;
+
+  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
 }
 
 .modalLayer {
@@ -84,11 +84,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 }
 
@@ -104,11 +104,11 @@
   }
 
   [data-modal] {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss

@@ -3,10 +3,10 @@
 @import "../../../../../styles/utils/layers";
 
 .dismissButton {
-  @include ca-position($end: 0, $top: 0);
-
   position: absolute;
   z-index: $ca-z-index-popover;
+
+  @include ca-position($end: 0, $top: 0);
 }
 
 .layout {

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { ModalBody } from "../ModalBody"
 import styles from "./ModalHeader.module.scss"
 
@@ -20,7 +20,7 @@ export const ModalHeader = ({
     <div className={styles.dismissButton}>
       <IconButton
         label="Dismiss"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         reversed={reversed}
         onClick={onDismiss}
         disabled={onDismiss == undefined}

package/src/Modal/InputEditModal/InputEditModal.module.scss

@@ -10,19 +10,19 @@
   max-width: 600px;
 
   .animatingEnter & {
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-
     animation-duration: $ca-duration-fast;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-in;
+
+    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
   }
 
   .animatingLeave & {
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
-
     animation-duration: $ca-duration-rapid;
     animation-fill-mode: forwards;
     animation-timing-function: $ca-bounce-out;
+
+    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
   }
 }
 

package/src/MultiSelect/MultiSelect.spec.tsx

@@ -350,6 +350,7 @@ describe("Has validation status", () => {
     )
     expect(screen.getByText("No waffles are available")).toBeInTheDocument()
   })
+
   it("describes the Toggle", () => {
     render(
       <MultiSelectWrapper
@@ -364,13 +365,16 @@ describe("Has validation status", () => {
     expect(
       screen.getByRole("button", {
         name: "Breakfast menu",
-        description: "Only four waffles remain",
+        // React Testing Library bug: Icon should be showing aria-label "caution message" instead
+        description: "warning Only four waffles remain",
       })
     ).toBeInTheDocument()
   })
+
   it("announces the validation message before the Toggle's description", () => {
-    const description = "Choose you breakfast."
-    const validationMessage = "Only four waffles remain."
+    const description = "Choose your breakfast."
+    // React Testing Library bug: Icon should be showing aria-label "caution message" instead
+    const validationMessage = "warning Only four waffles remain."
 
     render(
       <MultiSelectWrapper

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss

@@ -68,11 +68,5 @@ $focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   color: $color-white;
 }

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon, MinusIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
@@ -25,14 +25,15 @@ export type CheckboxProps = {
   >
 
 const renderIcon = (status: CheckedStatus): JSX.Element | null => {
-  switch (status) {
-    case "indeterminate":
-      return <MinusIcon role="presentation" classNameOverride={styles.icon} />
-    case "checked":
-      return <CheckIcon role="presentation" classNameOverride={styles.icon} />
-    default:
-      return null
-  }
+  if (status === "unchecked") return null
+
+  return (
+    <Icon
+      name={status === "checked" ? "check" : "remove"}
+      isPresentational
+      className={styles.icon}
+    />
+  )
 }
 
 export const Checkbox = ({

package/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, waitFor, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { vi } from "vitest"
 import {
@@ -83,10 +83,10 @@ describe("<MultiSelectOptions />", () => {
     })
 
     it("returns updated selected values when selecting an option", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole } = render(
         <MultiSelectOptionsWrapper selectedValues={new Set(["pancakes"])} />
       )
-      expect(queryAllByRole("presentation", { hidden: true }).length).toBe(1)
+      expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(1)
 
       const waffleOption = getByRole("checkbox", { name: "Waffle" })
       expect(waffleOption).not.toBeChecked()
@@ -96,17 +96,19 @@ describe("<MultiSelectOptions />", () => {
       await waitFor(() => {
         expect(onChange).toBeCalledWith(new Set(["pancakes", "waffle"]))
         expect(waffleOption).toBeChecked()
-        expect(queryAllByRole("presentation", { hidden: true }).length).toBe(2)
+        expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(
+          2
+        )
       })
     })
 
     it("returns updated selected values when unselecting an option", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole } = render(
         <MultiSelectOptionsWrapper
           selectedValues={new Set(["pancakes", "waffle"])}
         />
       )
-      expect(queryAllByRole("presentation", { hidden: true }).length).toBe(2)
+      expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(2)
 
       const waffleOption = getByRole("checkbox", { name: "Waffle" })
       expect(waffleOption).toBeChecked()
@@ -116,7 +118,9 @@ describe("<MultiSelectOptions />", () => {
       await waitFor(() => {
         expect(onChange).toBeCalledWith(new Set(["pancakes"]))
         expect(waffleOption).not.toBeChecked()
-        expect(queryAllByRole("presentation", { hidden: true }).length).toBe(1)
+        expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(
+          1
+        )
       })
     })
   })

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -2,8 +2,7 @@ import React, { HTMLAttributes, forwardRef, useId } from "react"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { FieldMessageProps } from "~components/FieldMessage"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import { RemovableTag } from "~components/__future__"
+import { Icon, RemovableTag } from "~components/__future__"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import styles from "./MultiSelectToggle.module.scss"
@@ -70,11 +69,10 @@ export const MultiSelectToggle = forwardRef<
               onClick(e)
             }}
           >
-            {isOpen ? (
-              <ChevronUpIcon role="presentation" />
-            ) : (
-              <ChevronDownIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+              isPresentational
+            />
           </button>
 
           <div

package/src/Notification/subcomponents/CancelButton/CancelButton.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon/CloseIcon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../GenericNotification/GenericNotification.module.scss"
 
 type CancelButtonProps = {
@@ -14,7 +14,7 @@ export const CancelButton = ({ onClick }: CancelButtonProps): JSX.Element => (
     data-testid="close-button"
     aria-label="Close notification"
   >
-    <CloseIcon role="presentation" />
+    <Icon name="close" isPresentational />
   </button>
 )
 

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -165,12 +165,14 @@ $notification-slide-right: transform 300ms ease-out;
   %ca-notification---toast & {
     width: 22px;
     height: 22px;
+    font-size: 22px;
     margin-top: $spacing-6;
   }
 
   %ca-notification---global & {
     width: 24px;
     height: 24px;
+    font-size: 24px;
   }
 }
 
@@ -280,13 +282,16 @@ $notification-slide-right: transform 300ms ease-out;
 }
 
 %ca-notification__cancel {
+  cursor: pointer;
   appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
+  transition: none;
+  transform: none;
   margin: 0;
   padding: 0;
-  transition: none;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -317,10 +322,6 @@ $notification-slide-right: transform 300ms ease-out;
     }
   }
 
-  cursor: pointer;
-  color: $color-purple-800;
-  transform: none;
-
   &:active {
     transform: translateY(1px);
   }

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css

@@ -0,0 +1,3 @@
+.notificationIcon {
+  font-size: inherit;
+}

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx

@@ -1,13 +1,19 @@
 import React from "react"
-import { CautionIcon } from "~components/Icon/CautionIcon"
-import { ExclamationIcon } from "~components/Icon/ExclamationIcon"
-import { InformationIcon } from "~components/Icon/InformationIcon"
-import { SecurityTipIcon } from "~components/Icon/SecurityTipIcon"
-import { SuccessIcon } from "~components/Icon/SuccessIcon"
 import {
   NotificationType,
   NotificationVariant,
 } from "~components/Notification/types"
+import { Icon } from "~components/__future__"
+import styles from "./NotificationIcon.module.css"
+
+const NotificationIcon = ({ name }: { name: string }): JSX.Element => (
+  <Icon
+    name={name}
+    isFilled
+    isPresentational
+    className={styles.notificationIcon}
+  />
+)
 
 export type NotificationIconTypeProps = {
   type: NotificationType
@@ -18,17 +24,17 @@ export const NotificationIconType = ({
 }: NotificationIconTypeProps): JSX.Element => {
   switch (type) {
     case "positive":
-      return <SuccessIcon role="presentation" inheritSize />
+      return <NotificationIcon name="check_circle" />
     case "negative":
-      return <ExclamationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="error" />
     case "cautionary":
-      return <CautionIcon role="presentation" inheritSize />
+      return <NotificationIcon name="warning" />
     case "informative":
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
     case "security":
-      return <SecurityTipIcon role="presentation" inheritSize />
+      return <NotificationIcon name="privacy_tip" />
     default:
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
   }
 }
 
@@ -43,15 +49,15 @@ export const NotificationIconVariant = ({
 }: NotificationIconVariantProps): JSX.Element => {
   switch (variant) {
     case "success":
-      return <SuccessIcon role="presentation" inheritSize />
+      return <NotificationIcon name="check_circle" />
     case "warning":
-      return <ExclamationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="error" />
     case "cautionary":
-      return <CautionIcon role="presentation" inheritSize />
+      return <NotificationIcon name="warning" />
     case "informative":
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
     case "security":
-      return <SecurityTipIcon role="presentation" inheritSize />
+      return <NotificationIcon name="privacy_tip" />
   }
 }
 

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss

@@ -4,10 +4,6 @@
 @import "../../../__actions__/Button/v1/utils/variables";
 
 %directional-link {
-  [dir="rtl"] & {
-    transform: rotate(180deg);
-  }
-
   border: $border-solid-border-width solid $color-blue-300;
 
   @include enabled-pseudo-states-variant($color-blue-100, $color-blue-400);