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

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/Button.module.scss

@@ -80,7 +80,6 @@
 
     &:focus-visible {
       &::after {
-        border-style: $border-dashed-border-style;
         border-color: $color-purple-800;
       }
     }

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",
   },
 }

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

@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { FilterIcon, MeatballsIcon, TrashIcon } from "~components/Icon"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -9,7 +9,7 @@ import {
 import { IconButton, IconButtonProps } from "../index"
 
 export default {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -30,14 +30,14 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Default",
     props: {
       label: "Default label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
     },
   },
   {
     title: "Primary",
     props: {
       label: "Primary label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
       primary: true,
     },
   },
@@ -45,7 +45,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Destructive",
     props: {
       label: "Label",
-      icon: <TrashIcon role="presentation" />,
+      icon: <Icon name="delete" isPresentational isFilled />,
       destructive: true,
     },
   },
@@ -53,7 +53,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Secondary",
     props: {
       label: "Label",
-      icon: <FilterIcon role="presentation" />,
+      icon: <Icon name="tune" isPresentational />,
       secondary: true,
     },
   },
@@ -72,7 +72,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             title: "Secondary Destructive",
             props: {
               label: "Label",
-              icon: <TrashIcon role="presentation" />,
+              icon: <Icon name="delete" isPresentational isFilled />,
               secondary: true,
               destructive: true,
             },

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

@@ -1,24 +1,24 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
-  title: "Actions/IconButton/v1",
+  title: "Actions/IconButton/IconButton (v1)",
   component: IconButton,
   argTypes: {
     icon: {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 

package/src/__actions__/Button/v2/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/v2/Button/_docs/Button.stories.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { ArrowForwardIcon, 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/v2",
+  title: "Actions/Button/Button (v2)",
   component: Button,
   args: {
     label: "Label",
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, ArrowForwardIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<ArrowForwardIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="arrow_forward" isPresentational shouldMirrorInRTL />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <ArrowForwardIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
   },
   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",
   },
 }