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

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -115,14 +115,13 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
   z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
+  transform: translateY(-0.0833em);
 
   .hasSubtitle & {
     @include title-block-under-1366 {
       transform: translateY(-0.3833em);
     }
   }
-
-  transform: translateY(-0.0833em);
 }
 
 .titleAndSubtitleInner {
@@ -243,13 +242,12 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
   max-width: 230px;
+  margin-inline: var(--spacing-12) 0;
 
   .adminVariant & {
     color: $color-purple-800;
   }
 
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   @include title-block-under-1366 {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -285,9 +283,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
 .sectionTitleOverride.sectionTitleOverride {
   white-space: nowrap;
-
-  @include ca-margin($end: $ca-grid);
-
+  margin-inline: 0 var(--spacing-24);
   font-family: $typography-heading-2-font-family;
   font-weight: $typography-heading-2-font-weight;
   font-size: $typography-heading-2-font-size;
@@ -316,10 +312,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .sectionTitleDescription {
-  .sectionTitle + & {
-    margin-top: calc(#{$ca-grid} / 4);
-  }
-
   color: $color-white;
   max-width: 780px;
   font-family: $typography-paragraph-small-font-family;
@@ -328,6 +320,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
 
+  .sectionTitle + & {
+    margin-top: var(--spacing-6);
+  }
+
   &.dark {
     color: rgba($color-purple-800-rgb, 0.7);
   }
@@ -360,30 +356,28 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .tag {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   display: flex;
   align-items: center;
+  margin-inline: var(--spacing-12) 0;
 
   @include title-block-medium-and-small {
     display: none;
   }
 
   + .pageSwitcherSelectNextToTitle {
-    @include ca-margin($start: 0);
+    margin-inline-start: 0;
   }
 }
 
 .pageSwitcherSelectNextToTitle {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   flex-shrink: 0;
-  width: 10 * $ca-grid;
+  width: var(--spacing-240);
+  margin-inline: var(--spacing-12) 0;
 }
 
 .pageSwitcherSelectUnderneathTitle {
   flex-shrink: 0;
-  max-width: 10 * $ca-grid;
+  max-width: var(--spacing-240);
 }
 
 .navigationTabsContainer {
@@ -525,6 +519,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
+  text-decoration: none;
 
   @include ca-position(
     $start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid})
@@ -557,11 +552,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   @media only screen and (max-width: $breadcrumb-breakpoint-width) {
     position: relative;
+    transform: translateY(0);
+    margin-inline: 0 var(--spacing-12);
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
     @include ca-position($start: 0);
-
-    transform: translateY(0);
   }
 
   @include title-block-medium-and-small {

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -258,7 +258,7 @@ describe("<TitleBlockZen />", () => {
         </TitleBlockZen>
       )
       const btn = getByTestId("title-block-primary-action-button")
-      expect(btn.textContent).toEqual(primaryActionAsMenu.label)
+      expect(btn).toHaveAccessibleName(primaryActionAsMenu.label)
       await user.click(btn)
 
       await waitFor(() => {

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -2,10 +2,10 @@ import React from "react"
 import classnames from "classnames"
 import { Avatar } from "~components/Avatar"
 import { Heading } from "~components/Heading"
-import { ArrowLeftIcon, ArrowRightIcon, HamburgerIcon } from "~components/Icon"
 import { Select } from "~components/Select"
 import { Tag } from "~components/Tag"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { useMediaQueries } from "~components/utils/useMediaQueries"
 import { MainActions } from "./subcomponents/MainActions"
 import { MobileActions } from "./subcomponents/MobileActions"
@@ -157,15 +157,12 @@ const Breadcrumb = ({
   textDirection,
 }: TitleBlockBreadcrumbProps): JSX.Element => {
   const { path, handleClick, text, render } = breadcrumb
-  const icon =
-    textDirection === "rtl" ? (
-      <ArrowRightIcon role="presentation" />
-    ) : (
-      <ArrowLeftIcon role="presentation" />
-    )
+
   const InnerContents = (): JSX.Element => (
     <>
-      <div className={styles.circle}>{icon}</div>
+      <div className={styles.circle}>
+        <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+      </div>
       <span
         className={styles.breadcrumbTextLink}
         data-automation-id={textAutomationId}
@@ -318,7 +315,7 @@ export const TitleBlockZen = ({
                       <div className={styles.hamburger}>
                         <IconButton
                           onClick={handleHamburgerClick}
-                          icon={<HamburgerIcon role="presentation" />}
+                          icon={<Icon name="menu" isPresentational />}
                           label="Open menu"
                           reversed={isReversed(variant)}
                         />

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, StarOnIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { assetUrl } from "~components/utils/hostedAssets"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { NavigationTab, TitleBlockZen } from "../index"
@@ -16,7 +16,7 @@ const SECONDARY_ACTIONS = [
       {
         onClick: (): void => alert("test"),
         label: "Secondary menu action 2",
-        icon: <StarOnIcon role="presentation" />,
+        icon: <Icon name="star" isPresentational isFilled />,
       },
     ],
   },
@@ -41,7 +41,7 @@ const meta = {
     },
     primaryAction: {
       label: "Primary link",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
       disabled: true,
       href: "#",
     },
@@ -53,11 +53,11 @@ const meta = {
     secondaryOverflowMenuItems: [
       {
         label: "Overflow action 1",
-        icon: <StarOnIcon role="presentation" />,
+        icon: <Icon name="star" isPresentational isFilled />,
       },
       {
         label: "Overflow link 1",
-        icon: <StarOnIcon role="presentation" />,
+        icon: <Icon name="star" isPresentational isFilled />,
       },
     ],
     handleHamburgerClick: (): void => alert("Hamburger clicked"),

package/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import {
   DefaultActionProps,
@@ -71,7 +71,9 @@ export const MainActions = ({
                       label={primaryAction.label}
                       primary
                       reversed={reversed}
-                      icon={<ChevronDownIcon role="presentation" />}
+                      icon={
+                        <Icon name="keyboard_arrow_down" isPresentational />
+                      }
                       iconPosition="end"
                       data-automation-id="title-block-primary-action-button"
                       data-testid="title-block-primary-action-button"
@@ -162,7 +164,7 @@ export const MainActions = ({
                 id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
                 label="Open secondary menu"
                 reversed={reversed}
-                icon={<MeatballsIcon role="presentation" />}
+                icon={<Icon name="more_horiz" isPresentational />}
               />
             }
           >

package/src/TitleBlockZen/subcomponents/MobileActions.module.scss

@@ -77,8 +77,6 @@ $slide-up-duration: 0.4s;
 }
 
 .mobileActionsPrimaryLabel {
-  @include ca-padding($start: $ca-grid * 0.75);
-
   text-align: left;
   text-decoration: none;
   color: $color-white;
@@ -87,6 +85,8 @@ $slide-up-duration: 0.4s;
   font-size: $typography-button-primary-font-size;
   line-height: $typography-button-primary-line-height;
   letter-spacing: $typography-button-primary-letter-spacing;
+
+  @include ca-padding($start: $ca-grid * 0.75);
 }
 
 .mobileActionsPrimaryButton,

package/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react"
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import {
   MenuItem,
   MenuList,
   MenuHeading,
   ButtonProps,
 } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
 import {
   DefaultActionProps,
@@ -352,11 +352,10 @@ const DrawerHandle = ({
           >
             {primaryAction.label}
             <span className={styles.mobileActionsChevronSquare}>
-              {isOpen ? (
-                <ChevronDownIcon role="presentation" />
-              ) : (
-                <ChevronUpIcon role="presentation" />
-              )}
+              <Icon
+                name={isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+                isPresentational
+              />
             </span>
           </button>
         </div>
@@ -407,11 +406,10 @@ const DrawerHandle = ({
             id={TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID}
             aria-label="Other actions"
           >
-            {isOpen ? (
-              <ChevronDownIcon role="presentation" />
-            ) : (
-              <ChevronUpIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+              isPresentational
+            />
           </button>
         )}
       </div>
@@ -440,11 +438,10 @@ const DrawerHandle = ({
         >
           {renderDrawerHandleLabel("Other actions")}
           <span className={styles.mobileActionsChevronSquare}>
-            {isOpen ? (
-              <ChevronDownIcon role="presentation" />
-            ) : (
-              <ChevronUpIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+              isPresentational
+            />
           </span>
         </button>
       </div>

package/src/TitleBlockZen/subcomponents/SecondaryActions.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../TitleBlockZen.module.scss"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types"
@@ -25,7 +25,7 @@ const renderSecondaryOverflowMenu = (
         <IconButton
           label="Open secondary menu"
           reversed={reversed}
-          icon={<MeatballsIcon role="presentation" />}
+          icon={<Icon name="more_horiz" isPresentational />}
           id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
         />
       }
@@ -63,7 +63,7 @@ export const SecondaryActions = ({
                     secondary
                     label={action.label}
                     reversed={reversed}
-                    icon={<ChevronDownIcon role="presentation" />}
+                    icon={<Icon name="keyboard_arrow_down" isPresentational />}
                     iconPosition="end"
                   />
                 }

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -51,9 +51,6 @@ $focus-ring-offset: 1px;
   background-color: $color-white;
   border: $border-borderless-border-width $border-borderless-border-style
     $border-borderless-border-color;
-  box-sizing: content-box;
-  width: calc(#{$spacing-md} * 0.9);
-  height: calc(#{$spacing-md} * 0.9);
   border-radius: $spacing-md;
   transition:
     left $animation-timing,

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ToggleSwitch.module.scss"
 
@@ -41,7 +41,7 @@ export const ToggleSwitch = ({
       />
       <span className={styles.track}>
         <span className={styles.thumb}>
-          <CheckIcon classNameOverride={styles.checkIcon} role="presentation" />
+          <Icon name="check" isPresentational className={styles.checkIcon} />
         </span>
       </span>
     </span>

package/src/Workflow/_docs/Workflow.stories.tsx

@@ -1,11 +1,10 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Heading } from "~components/Heading"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
 import { Button } from "~components/__actions__/v2"
-import { Tag } from "~components/__future__"
+import { Icon, Tag } from "~components/__future__"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
@@ -55,7 +54,7 @@ const meta = {
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
       />,
@@ -85,14 +84,14 @@ export const MultipleActions: Story = {
       <Button
         key="would-use-uui-1"
         label="Preview"
-        icon={<VisibleIcon role="presentation" />}
+        icon={<Icon name="visibility" isPresentational isFilled />}
         secondary
         iconPosition="start"
       />,
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}

package/src/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
-import { Tag } from "~components/__future__"
+import { Icon, Tag } from "~components/__future__"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
@@ -20,7 +19,7 @@ const meta = {
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}
@@ -51,14 +50,14 @@ export const MultipleActions: Story = {
       <Button
         key="would-use-uui-1"
         label="Preview"
-        icon={<VisibleIcon role="presentation" />}
+        icon={<Icon name="visibility" isPresentational isFilled />}
         secondary
         iconPosition="start"
       />,
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}

package/src/Workflow/_docs/controls/controls.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { ArgTypes } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {
@@ -14,7 +14,7 @@ export const WorkflowControls: Partial<ArgTypes> = {
         <Button
           key="would-use-uui-1"
           label="Close"
-          icon={<CloseIcon role="presentation" />}
+          icon={<Icon name="close" isPresentational />}
           secondary
           iconPosition="end"
         />,
@@ -23,14 +23,14 @@ export const WorkflowControls: Partial<ArgTypes> = {
         <Button
           key="would-use-uui-1"
           label="Close"
-          icon={<CloseIcon role="presentation" />}
+          icon={<Icon name="close" isPresentational />}
           secondary
           iconPosition="end"
         />,
         <Button
           key="would-use-uui-2"
           label="Preview"
-          icon={<VisibleIcon role="presentation" />}
+          icon={<Icon name="visibility" isPresentational isFilled />}
           secondary
           iconPosition="start"
         />,

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -1,11 +1,7 @@
 import React from "react"
 import classnames from "classnames"
-import {
-  IndicatorActiveIcon,
-  IndicatorInactiveIcon,
-  SuccessIcon,
-} from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./ProgressStepper.module.css"
 
 export type Step = {
@@ -34,39 +30,18 @@ const getStepStatus = (
 } => {
   if (isComplete) {
     return {
-      icon: (
-        <SuccessIcon
-          key={index}
-          inheritSize
-          role="presentation"
-          classNameOverride="success"
-        />
-      ),
+      icon: <Icon key={index} name="check_circle" isPresentational isFilled />,
       accessibleName: `Completed: ${step.label}`,
     }
   }
   if (isCurrentStep) {
     return {
-      icon: (
-        <IndicatorActiveIcon
-          key={index}
-          inheritSize
-          role="presentation"
-          classNameOverride="active"
-        />
-      ),
+      icon: <Icon key={index} name="radio_button_checked" isPresentational />,
       accessibleName: `Current: ${step.label}`,
     }
   }
   return {
-    icon: (
-      <IndicatorInactiveIcon
-        key={index}
-        inheritSize
-        classNameOverride="incomplete"
-        role="presentation"
-      />
-    ),
+    icon: <Icon key={index} name="radio_button_unchecked" isPresentational />,
     accessibleName: `Not started: ${step.label}`,
   }
 }
@@ -91,7 +66,7 @@ export const ProgressStepper = ({
         {steps.map((step, index: number) => {
           const isCurrentStep = currentStepIndex === index
           const isCompletedStep = index < currentStepIndex || isComplete
-          const { accessibleName, icon: Icon } = getStepStatus(
+          const { accessibleName, icon } = getStepStatus(
             isCompletedStep,
             isCurrentStep,
             step,
@@ -122,7 +97,7 @@ export const ProgressStepper = ({
                       [styles.isCompleted]: isCompletedStep,
                     })}
                   >
-                    {Icon}
+                    {icon}
                   </span>
                 </div>
                 {index < steps.length - 1 && (

package/src/__actions__/Button/v1/Button/_docs/Button.mdx

@@ -47,7 +47,7 @@ A disabled Button prevents user interaction. It doesn't appear in the tab order,
 
 Use any <LinkTo pageId="components-icons">Icon</LinkTo> component in the `icon` prop.
 
-<Canvas of={ButtonStories.Icon} />
+<Canvas of={ButtonStories.IconStory} />
 
 #### Icon position
 

package/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { AddIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -8,7 +8,7 @@ import {
 import { Button, ButtonProps } from "../index"
 
 export default {
-  title: "Actions/Button/v1",
+  title: "Actions/Button/Button (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -69,12 +69,12 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     const ICON_LEFT_PROPS: ButtonProps = {
       label: "Label",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
     }
 
     const ICON_RIGHT_PROPS: ButtonProps = {
       label: "Label",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     }
 
@@ -84,12 +84,12 @@ const StickerSheetTemplate: StickerSheetStory = {
     }
     const BADGE_LEFT_PROPS: ButtonProps = {
       ...BADGE_PROPS,
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
     }
 
     const BADGE_RIGHT_PROPS: ButtonProps = {
       ...BADGE_PROPS,
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     }
 

package/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { AddIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
 import { TextField } from "~components/TextField"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v1",
+  title: "Actions/Button/Button (v1)",
   component: Button,
   args: {
     label: "Label",
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, AddIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<AddIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="add" isPresentational />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <AddIcon role="presentation" />,
+    icon: <Icon name="add" isPresentational />,
   },
   parameters: {
     docs: { source: { code: sourceCodeIcon } },
@@ -79,7 +80,7 @@ export const Icon: Story = {
 
 export const IconPosition: Story = {
   args: {
-    icon: <ArrowRightIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
     iconPosition: "end",
   },
 }