@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

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

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 {