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

package/src/Filter/FilterMultiSelect/context/MenuTriggerProvider/MenuTriggerProvider.tsx

@@ -14,6 +14,7 @@ export type MenuTriggerProviderProps = {
   defaultOpen?: boolean
   onOpenChange?: (isOpen: boolean) => void
   children: React.ReactNode
+  triggerRef?: React.RefObject<HTMLButtonElement>
 }
 
 export type MenuTriggerProviderContextType = {
@@ -32,12 +33,14 @@ export function MenuTriggerProvider({
   defaultOpen,
   onOpenChange,
   children,
+  triggerRef,
 }: MenuTriggerProviderProps): JSX.Element {
   // Create state based on the incoming props to manage the open/close
   const state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange })
 
   // Get A11y attributes and events for the menu trigger and menu elements
-  const ref = useRef<HTMLButtonElement>(null)
+  const fallbackRef = useRef<HTMLButtonElement>(null)
+  const ref = triggerRef || fallbackRef
   const { menuTriggerProps, menuProps } = useMenuTrigger<ItemType>(
     {},
     state,

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx

@@ -4,8 +4,8 @@ import { useOption } from "@react-aria/listbox"
 import { mergeProps } from "@react-aria/utils"
 import classnames from "classnames"
 import { Badge } from "~components/Badge"
-import { CheckIcon } from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import { useSelectionContext } from "../../context"
 import { MultiSelectItem } from "../../types"
 import styles from "./MultiSelectOption.module.scss"
@@ -50,7 +50,7 @@ export const MultiSelectOption = ({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
       {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}
       {item.rendered}

package/src/Filter/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss

@@ -11,17 +11,20 @@ $focus-ring-offset: 1px;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: $typography-button-secondary-font-family;
-  font-weight: $typography-button-secondary-font-weight;
-  font-size: $typography-button-secondary-font-size;
-  line-height: $typography-button-secondary-line-height;
-  letter-spacing: $typography-button-secondary-letter-spacing;
   position: relative;
-  color: $color-blue-500;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
   border: $border-solid-border-width $border-solid-border-style;
   border-color: $border-borderless-border-color;
   border-radius: $border-solid-border-radius;
   padding: $spacing-4 $spacing-8;
+  font-weight: $typography-button-secondary-font-weight;
+  font-family: $typography-button-secondary-font-family;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  color: $color-blue-500;
 
   &:focus {
     outline: none;
@@ -48,10 +51,6 @@ $focus-ring-offset: 1px;
     inset: calc(-1 * #{$focus-ring-offset});
   }
 
-  display: inline-flex;
-  gap: $spacing-xs;
-  align-items: center;
-
   // TODO: copied from Calendar button since the design is not settled
   &.isDisabled {
     pointer-events: none;

package/src/Filter/FilterSelect/FilterSelect.spec.tsx

@@ -198,16 +198,15 @@ describe("<FilterSelect>", () => {
     it("changes the value within the button when an option is selected", async () => {
       render(
         <FilterSelectWrapper
-          isOpen
           renderTrigger={(triggerButtonProps): JSX.Element => (
-            <FilterButton data-testid="test__trigger" {...triggerButtonProps} />
+            <FilterButton {...triggerButtonProps} />
           )}
         />
       )
-      // Use testid because when the filter is open, the button is inaccessible
-      expect(screen.getByTestId("test__trigger").textContent).toBe("Coffee")
 
-      await user.tab()
+      const button = screen.getByRole("button", { name: "Coffee" })
+
+      await user.click(button)
       await waitFor(() => {
         expect(screen.queryByRole("listbox")).toBeVisible()
       })

package/src/GuidanceBlock/GuidanceBlock.module.scss

@@ -178,6 +178,10 @@ $scene-illustration-size: 300px;
   @include button-reset;
 
   cursor: pointer;
+  position: absolute;
+  top: $spacing-sm;
+  right: $spacing-sm;
+  color: $color-purple-800;
 
   .icon {
     opacity: 70%;
@@ -207,11 +211,6 @@ $scene-illustration-size: 300px;
       }
     }
   }
-
-  position: absolute;
-  top: $spacing-sm;
-  right: $spacing-sm;
-  color: $color-purple-800;
 }
 
 .default {

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import Media from "react-media"
 import { Heading, HeadingProps } from "~components/Heading"
-import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
 import { Button, ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
@@ -223,7 +223,11 @@ export const GuidanceBlock = ({
                     <Button
                       icon={
                         withActionButtonArrow ? (
-                          <ArrowForwardIcon role="presentation" />
+                          <Icon
+                            name="arrow_forward"
+                            isPresentational
+                            shouldMirrorInRTL
+                          />
                         ) : undefined
                       }
                       iconPosition="end"

package/src/Icon/_docs/{Icon.stories.tsx → Icon.docs.stories.tsx}

@@ -7,7 +7,7 @@ import { AddIcon } from "../index"
 import styles from "./icon.module.scss"
 
 const meta = {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   component: AddIcon,
   args: {
     role: "presentation",

package/src/Icon/_docs/Icon.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
 import { ResourceLinks } from "~storybook/components"
-import * as IconStories from "./Icon.stories"
+import * as IconStories from "./Icon.docs.stories"
 
 <Meta of={IconStories} />
 
@@ -8,7 +8,6 @@ import * as IconStories from "./Icon.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
-
 />
 
 ## Installation

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

@@ -7,7 +7,7 @@ import {
 } from "~storybook/components/StickerSheet"
 
 export default {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Icon/bin/update-icons.sh

@@ -2,6 +2,6 @@
 
 pnpm svgo -f ./assets/svgs/icons -o ./src/Icon/bin/built-svgs/
 
-npx tsx ./src/Icon/bin/wrapSVGs.ts --source-dir ./src/Icon/bin/built-svgs --output-dir ./src/Icon --delete-source-dir
+pnpm tsx ./src/Icon/bin/wrapSVGs.ts --source-dir ./src/Icon/bin/built-svgs --output-dir ./src/Icon --delete-source-dir
 
 pnpm prettier -w ./src/Icon

package/src/Illustration/utils/usePausePlay.tsx

@@ -1,5 +1,5 @@
 import React, { useState, RefObject } from "react"
-import { LaunchIcon, PauseIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 
 export type usePausePlayHook = {
   toggle: () => void
@@ -24,10 +24,12 @@ export const usePausePlay = (
         videoRef.current.pause()
       }
     },
-    icon: isPaused ? (
-      <LaunchIcon role="presentation" />
-    ) : (
-      <PauseIcon role="presentation" />
+    icon: (
+      <Icon
+        name={isPaused ? "play_circle" : "pause"}
+        isPresentational
+        isFilled
+      />
     ),
     label: isPaused ? "Play animation" : "Pause animation",
   }

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { MeatballsIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -35,16 +35,18 @@ const InputExampleGroup = (props: InputProps): JSX.Element => (
           value={type}
           type={type}
           startIconAdornment={
-            <WritingIcon
-              role="presentation"
+            <Icon
+              name="edit"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }
             />
           }
           endIconAdornment={
-            <MeatballsIcon
-              role="presentation"
+            <Icon
+              name="close"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }

package/src/Input/Input/_docs/Input.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { UserAddIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Input } from "../index"
 
 const meta = {
@@ -87,14 +87,16 @@ export const Icons: Story = {
         <Input
           type="text"
           value="Start Icon"
-          startIconAdornment={<UserAddIcon role="presentation" />}
+          startIconAdornment={
+            <Icon name="person_add" isPresentational isFilled />
+          }
         />
       </li>
       <li>
         <Input
           type="text"
           value="End Icon"
-          endIconAdornment={<WritingIcon role="presentation" />}
+          endIconAdornment={<Icon name="edit" isPresentational isFilled />}
         />
       </li>
     </ul>

package/src/Input/InputRange/InputRange.module.scss

@@ -74,9 +74,9 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-runnable-track {
-    @include track;
-
     margin: $spacing-sm 0;
+
+    @include track;
   }
 
   &::-moz-range-track {
@@ -84,10 +84,10 @@ input[type="range"].ratingScaleRange {
   }
 
   &::-webkit-slider-thumb {
-    @include thumb;
-
     -webkit-appearance: none;
     margin-top: calc((#{$thumb-height-with-border}/ 2) * -1);
+
+    @include thumb;
   }
 
   &::-moz-range-thumb {

package/src/Input/InputSearch/InputSearch.module.scss

@@ -29,10 +29,6 @@ $classname--input: '.input[type="search"]';
 #{$classname--input} {
   @include form-input-reset;
 
-  @include form-input-placeholder {
-    opacity: 100%;
-  }
-
   display: flex;
   align-items: center;
   height: $input-height;
@@ -44,6 +40,10 @@ $classname--input: '.input[type="search"]';
   font-size: 1rem;
   line-height: 1.5;
 
+  @include form-input-placeholder {
+    opacity: 100%;
+  }
+
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
@@ -113,14 +113,14 @@ $classname--input: '.input[type="search"]';
 // Default
 .default {
   #{$classname--input} {
+    border-color: $color-gray-500;
+    background-color: $color-white;
+    color: $color-purple-800;
+
     @include form-input-placeholder {
       color: $color-purple-800;
       opacity: $input-placeholder-opacity--default;
     }
-
-    border-color: $color-gray-500;
-    background-color: $color-white;
-    color: $color-purple-800;
   }
 
   .focusRing {
@@ -135,12 +135,12 @@ $classname--input: '.input[type="search"]';
   &:hover,
   &:focus-within {
     #{$classname--input} {
+      border-color: $color-gray-600;
+      background-color: $color-gray-200;
+
       @include form-input-placeholder {
         opacity: 100%;
       }
-
-      border-color: $color-gray-600;
-      background-color: $color-gray-200;
     }
 
     .startIconAdornment {
@@ -152,14 +152,14 @@ $classname--input: '.input[type="search"]';
 // Secondary
 .secondary {
   #{$classname--input} {
+    border-color: transparent;
+    background-color: $color-gray-200;
+    color: $color-purple-800;
+
     @include form-input-placeholder {
       color: $color-purple-800;
       opacity: $input-placeholder-opacity--default;
     }
-
-    border-color: transparent;
-    background-color: $color-gray-200;
-    color: $color-purple-800;
   }
 
   .focusRing {
@@ -174,12 +174,12 @@ $classname--input: '.input[type="search"]';
   &:hover,
   &:focus-within {
     #{$classname--input} {
+      border-color: transparent;
+      background-color: $color-gray-300;
+
       @include form-input-placeholder {
         opacity: 100%;
       }
-
-      border-color: transparent;
-      background-color: $color-gray-300;
     }
 
     .startIconAdornment {
@@ -191,13 +191,13 @@ $classname--input: '.input[type="search"]';
 // Reversed
 .reversed {
   #{$classname--input} {
+    background: rgba($color-white-rgb, 0.1);
+    color: $color-white;
+
     @include form-input-placeholder {
       color: $color-white;
       opacity: $input-placeholder-opacity--reversed;
     }
-
-    background: rgba($color-white-rgb, 0.1);
-    color: $color-white;
   }
 
   .focusRing {

package/src/Input/InputSearch/InputSearch.tsx

@@ -2,8 +2,8 @@ import React, { InputHTMLAttributes, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
-import { SearchIcon } from "~components/Icon/SearchIcon"
 import { LoadingSpinner } from "~components/Loading"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./InputSearch.module.scss"
 
@@ -63,7 +63,7 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
             classNameOverride={styles.loadingSpinner}
           />
         ) : (
-          <SearchIcon role="presentation" />
+          <Icon name="search" isPresentational />
         )}
       </div>
 

package/src/Label/Label.module.scss

@@ -5,6 +5,10 @@
 
 $label-start-margin: $spacing-xs;
 
+.label {
+  --icon-vertical-align: text-bottom;
+}
+
 .label,
 :global(.ideal-sans) .label {
   // override Murmur global styles :(

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -170,6 +170,13 @@ $blue-fifth: $color-blue-500;
 .likertItem {
   margin-right: 2px;
   margin-left: 2px;
+  font-size: 1px;
+  line-height: 1;
+  padding: 0;
+  overflow-x: visible;
+  display: inline-block;
+  width: 18.5%; // 5 columns
+  position: relative;
 
   &[dir="rtl"],
   [dir="rtl"] & {
@@ -184,14 +191,6 @@ $blue-fifth: $color-blue-500;
 
   @include fill($block-height);
 
-  font-size: 1px;
-  line-height: 1;
-  padding: 0;
-  overflow-x: visible;
-  display: inline-block;
-  width: 18.5%; // 5 columns
-  position: relative;
-
   &:first-child {
     margin-right: 2px;
     margin-left: 0;

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -1,8 +1,8 @@
 import React, { createRef, useState } from "react"
 import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
-import { CheckIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { ScaleValue, Scale, ScaleItem, ColorSchema } from "./types"
 import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
 import styles from "./LikertScaleLegacy.module.scss"
@@ -29,7 +29,7 @@ export type LikertScaleProps = {
 }
 
 const SelectedItemIcon = (): JSX.Element => (
-  <CheckIcon role="presentation" classNameOverride={styles.check} />
+  <Icon name="check" isPresentational className={styles.check} />
 )
 
 /**

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

@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Avatar } from "~components/Avatar"
-import { ConfigureIcon } from "~components/Icon"
 import { BrandMomentPositiveOutro, Informative } from "~components/Illustration"
+import { Icon } from "~components/__future__/Icon"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { LoadingGraphic } from "../index"
 
@@ -49,7 +49,7 @@ export const Size: Story = {
       <StickerSheet.Body>
         <StickerSheet.Row rowTitle="Icon (small)">
           <LoadingGraphic size="small" />
-          <ConfigureIcon aria-label="Aliens approaching!" role="img" />
+          <Icon name="build" alt="Aliens approaching!" isFilled />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Avatar (medium)">
           <LoadingGraphic size="medium" />

package/src/Loading/LoadingSpinner/LoadingSpinner.module.css

@@ -0,0 +1,32 @@
+.loadingSpinner {
+  --loading-spinner-size: 48px;
+
+  display: flex;
+  width: var(--loading-spinner-size);
+  height: var(--loading-spinner-size);
+}
+
+.xs {
+  --loading-spinner-size: 16px;
+}
+
+.sm {
+  --loading-spinner-size: 24px;
+}
+
+.md {
+  --loading-spinner-size: 48px;
+}
+
+.spinner {
+  animation: spinner var(--animation-duration-deliberate)
+    var(--animation-easing-function-ease-in-out) infinite;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/Loading/LoadingSpinner/LoadingSpinner.tsx

@@ -2,14 +2,15 @@ import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./LoadingSpinner.module.scss"
+import { SpinnerIcon } from "./subcomponents"
+import styles from "./LoadingSpinner.module.css"
 
 export type LoadingSpinnerProps = {
   accessibilityLabel: string
   /**
-   * Generally use "md" unless spinner is inside a form field
+   * Generally use "md" unless spinner is inside a form field.  @default "md"
    */
-  size?: "sm" | "md"
+  size?: "xs" | "sm" | "md"
 } & OverrideClassName<Omit<HTMLAttributes<HTMLDivElement>, "children">>
 
 /**
@@ -23,61 +24,16 @@ export const LoadingSpinner = ({
   ...props
 }: LoadingSpinnerProps): JSX.Element => (
   <div
-    data-automation-id="loading-spinner"
-    className={classnames(styles.loadingSpinner, classNameOverride)}
+    className={classnames(
+      styles.loadingSpinner,
+      styles[size],
+      classNameOverride
+    )}
     role="status"
     {...props}
   >
     <VisuallyHidden>{accessibilityLabel}</VisuallyHidden>
-    {size === "md" ? (
-      <svg
-        className={styles.spinner}
-        aria-hidden="true"
-        viewBox="0 0 48 48"
-        width={48} // Ideally we'd use spacing tokens converted to unitless values
-        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>
-    ) : (
-      <svg
-        className={styles.spinner}
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        width={24} // Ideally we'd use spacing tokens converted to unitless values
-        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>
-    )}
+    <SpinnerIcon size={size} />
   </div>
 )
 

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx

@@ -31,12 +31,17 @@ When inside a button, it is intended to have the same color as the label text.
 
 ### ClassNameOverride
 
-Override styles such as the colour of the spinner using `classNameOverride`.
+Override styles, such as the colour of the spinner using `classNameOverride`.
 
 <Canvas of={LoadingSpinnerStories.ClassNameOverride} />
 
+Below is an example of how to apply the current color tokens used in designs.
+
+<Canvas of={LoadingSpinnerStories.Colors} />
+
 ### Size
 
-Generally use `"md"` (default value) unless spinner is inside a form field.
+Generally use `"md"` (default value) unless spinner is inside a form field, in which case use `sm`. The `xs` size is for buttons or content dense layouts.
 
 <Canvas of={LoadingSpinnerStories.Size} />
+

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

@@ -18,10 +18,11 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={['Size "sm"', 'Size "md"', "Custom colour"]}
+        headings={['Size "xs"', 'Size "sm"', 'Size "md"', "Custom color"]}
       />
       <StickerSheet.Body>
         <StickerSheet.Row>
+          <LoadingSpinner accessibilityLabel="Loading" size="xs" />
           <LoadingSpinner accessibilityLabel="Loading" size="sm" />
           <LoadingSpinner accessibilityLabel="Loading" size="md" />
           <LoadingSpinner