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

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx

@@ -1,14 +1,9 @@
 import React from "react"
-import {
-  ArrowBackwardIcon,
-  ArrowForwardIcon,
-  EndIcon,
-  StartIcon,
-} from "~components/Icon"
 import {
   GenericButton,
   GenericProps,
 } from "~components/__actions__/Button/v2/GenericButton"
+import { Icon } from "~components/__future__/Icon"
 
 export type DirectionalLinkProps = {
   label: string
@@ -16,11 +11,11 @@ export type DirectionalLinkProps = {
   direction: "prev" | "next" | "start" | "end"
 } & GenericProps
 
-const iconMap = {
-  prev: <ArrowBackwardIcon role="presentation" />,
-  next: <ArrowForwardIcon role="presentation" />,
-  start: <StartIcon role="presentation" />,
-  end: <EndIcon role="presentation" />,
+const iconNameMap = {
+  prev: "arrow_back",
+  next: "arrow_forward",
+  start: "keyboard_tab_rtl",
+  end: "keyboard_tab",
 }
 
 /**
@@ -38,7 +33,13 @@ export const DirectionalLink = ({
     {...otherProps}
     iconButton
     directionalLink
-    icon={iconMap[otherProps.direction]}
+    icon={
+      <Icon
+        name={iconNameMap[otherProps.direction]}
+        isPresentational
+        shouldMirrorInRTL
+      />
+    }
   />
 )
 

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

@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
   width: 36px;
   background-color: transparent;
   color: rgba($color-purple-800-rgb, 0.7);

package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { EllipsisIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./TruncateIndicator.module.scss"
 
 export const TruncateIndicator = (): JSX.Element => (
@@ -7,6 +7,6 @@ export const TruncateIndicator = (): JSX.Element => (
     className={styles.truncateIndicatorWrapper}
     data-testid="truncate-indicator"
   >
-    <EllipsisIcon role="presentation" />
+    <Icon name="more_horiz" isPresentational />
   </div>
 )

package/src/Popover/Popover.module.scss

@@ -140,15 +140,15 @@ $cautionary-box-border-color: var(--color-yellow-700);
 }
 
 .informativeIcon {
-  color: $color-blue-500;
+  color: var(--color-blue-500);
 }
 
 .positiveIcon {
-  color: $color-green-400;
+  color: var(--color-green-500);
 }
 
 .negativeIcon {
-  color: $color-red-500;
+  color: var(--color-red-500);
 }
 
 .cautionaryIcon {

package/src/Popover/Popover.tsx

@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useMemo, useState } from "react"
 import classnames from "classnames"
 import { usePopper } from "react-popper"
 import { Heading } from "~components/Heading"
-import { CloseIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Placement, PopoverSize, PopoverVariant } from "./types"
 import {
@@ -140,7 +140,7 @@ export const Popover = ({
                 type="button"
                 aria-label="close"
               >
-                <CloseIcon role="presentation" />
+                <Icon name="close" isPresentational isFilled />
               </button>
             )}
           </div>

package/src/Popover/utils/classMappers.tsx

@@ -1,10 +1,5 @@
 import React from "react"
-import {
-  CautionIcon,
-  ExclamationIcon,
-  InformationIcon,
-  SuccessIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../Popover.module.scss"
 import { PopoverVariant, PopoverSize } from "../types"
 
@@ -43,15 +38,15 @@ export const mapVariantToIconClass = (
 export const mapVariantToIcon = (variant: PopoverVariant): JSX.Element => {
   switch (variant) {
     case "informative":
-      return <InformationIcon role="presentation" />
+      return <Icon name="info" isPresentational isFilled />
     case "positive":
-      return <SuccessIcon role="presentation" />
+      return <Icon name="check_circle" isPresentational isFilled />
     case "negative":
-      return <ExclamationIcon role="presentation" />
+      return <Icon name="error" isPresentational isFilled />
     case "cautionary":
-      return <CautionIcon role="presentation" />
+      return <Icon name="warning" isPresentational isFilled />
     default:
-      return <InformationIcon role="presentation" />
+      return <Icon name="info" isPresentational isFilled />
   }
 }
 

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -6,8 +6,6 @@
 @import "../mixins";
 
 .editor > :global(.ProseMirror) {
-  @include content-styles;
-
   border-radius: $border-solid-border-radius;
   padding: $spacing-sm calc(#{$spacing-xs} * 3);
   position: relative;
@@ -15,6 +13,8 @@
     background-color $animation-duration-immediate,
     border-color $animation-duration-immediate;
 
+  @include content-styles;
+
   &:hover,
   &:focus-visible {
     border-color: $color-gray-600;

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -25,36 +25,36 @@ const ToggleIconButtonGroup = ({
   <StickerSheet.Row rowTitle={rowTitle}>
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       data-sb-pseudo-styles="hover"
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       isActive
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       data-sb-pseudo-styles="focus"
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       disabled
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       disabled
       data-sb-pseudo-styles="focus"

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../ToggleIconButton"
 
 const meta = {
   title: "Components/RichTextEditor/Subcomponents/ToggleIconButton",
   component: ToggleIconButton,
   args: {
-    icon: <BoldIcon role="presentation" />,
+    icon: <Icon name="format_bold" isPresentational />,
     label: "Bold",
   },
   argTypes: {

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../ToggleIconButton"
 import { ToolbarSection } from "../ToolbarSection"
 import { Toolbar } from "."
@@ -11,14 +11,17 @@ const user = userEvent.setup()
 const ExampleToolbar = (): JSX.Element => (
   <Toolbar aria-label="Toolbar" aria-controls="editable-id">
     <ToolbarSection>
-      <ToggleIconButton label="Bold" icon={<BoldIcon role="presentation" />} />
+      <ToggleIconButton
+        label="Bold"
+        icon={<Icon name="format_bold" isPresentational />}
+      />
       <ToggleIconButton
         label="Italic"
-        icon={<BoldIcon role="presentation" />}
+        icon={<Icon name="format_italic" isPresentational />}
       />
       <ToggleIconButton
         label="Underline"
-        icon={<BoldIcon role="presentation" />}
+        icon={<Icon name="format_underlined" isPresentational />}
       />
     </ToolbarSection>
   </Toolbar>

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx

@@ -1,12 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import {
-  BoldIcon,
-  BullettedListIcon,
-  ItalicsIcon,
-  NumberedListIcon,
-  UnderlineIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../../ToggleIconButton"
 import { ToolbarSection } from "../../ToolbarSection"
 import { Toolbar } from "../index"
@@ -22,25 +16,37 @@ const meta = {
         <ToolbarSection>
           <ToggleIconButton
             label="Bold"
-            icon={<BoldIcon role="presentation" />}
+            icon={<Icon name="format_bold" isPresentational />}
           />
           <ToggleIconButton
             label="Italic"
-            icon={<ItalicsIcon role="presentation" />}
+            icon={<Icon name="format_italic" isPresentational />}
           />
           <ToggleIconButton
             label="Underline"
-            icon={<UnderlineIcon role="presentation" />}
+            icon={<Icon name="format_underlined" isPresentational />}
           />
         </ToolbarSection>
         <ToolbarSection>
           <ToggleIconButton
             label="Bullet list"
-            icon={<BullettedListIcon role="presentation" />}
+            icon={
+              <Icon
+                name="format_list_bulleted"
+                isPresentational
+                shouldMirrorInRTL
+              />
+            }
           />
           <ToggleIconButton
             label="Numbered list"
-            icon={<NumberedListIcon role="presentation" />}
+            icon={
+              <Icon
+                name="format_list_numbered"
+                isPresentational
+                shouldMirrorInRTL
+              />
+            }
           />
         </ToolbarSection>
       </>

package/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx

@@ -1,14 +1,5 @@
 import React from "react"
-import {
-  AddLinkIcon,
-  BoldIcon,
-  BullettedListIcon,
-  DecreaseIndentIcon,
-  IncreaseIndentIcon,
-  ItalicsIcon,
-  NumberedListIcon,
-  UnderlineIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToolbarItems, ToolbarControlTypes } from "../../types"
 import { listIsActive, markIsActive } from "../../utils/commands"
 import {
@@ -210,7 +201,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Bold",
-      icon: <BoldIcon role="presentation" />,
+      icon: <Icon name="format_bold" isPresentational />,
     })
   }
 
@@ -221,7 +212,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Italic",
-      icon: <ItalicsIcon role="presentation" />,
+      icon: <Icon name="format_italic" isPresentational />,
     })
   }
 
@@ -232,7 +223,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Underline",
-      icon: <UnderlineIcon role="presentation" />,
+      icon: <Icon name="format_underlined" isPresentational />,
     })
   }
 
@@ -243,7 +234,9 @@ export const buildControlMap = (
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Bullet List",
-      icon: <BullettedListIcon role="presentation" />,
+      icon: (
+        <Icon name="format_list_bulleted" isPresentational shouldMirrorInRTL />
+      ),
     })
   }
 
@@ -254,7 +247,9 @@ export const buildControlMap = (
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Numbered List",
-      icon: <NumberedListIcon role="presentation" />,
+      icon: (
+        <Icon name="format_list_numbered" isPresentational shouldMirrorInRTL />
+      ),
     })
   }
 
@@ -270,14 +265,26 @@ export const buildControlMap = (
         disabled: liftListIsDisabled(editorState),
         isActive: false,
         label: "Decrease indent",
-        icon: <DecreaseIndentIcon role="presentation" />,
+        icon: (
+          <Icon
+            name="format_indent_decrease"
+            isPresentational
+            shouldMirrorInRTL
+          />
+        ),
       },
       {
         action: createIndentListCommand(),
         disabled: indentListIsDisabled(editorState),
         isActive: false,
         label: "Increase indent",
-        icon: <IncreaseIndentIcon role="presentation" />,
+        icon: (
+          <Icon
+            name="format_indent_increase"
+            isPresentational
+            shouldMirrorInRTL
+          />
+        ),
       }
     )
   }
@@ -290,7 +297,7 @@ export const buildControlMap = (
       disabled: editorState.selection.empty,
       isActive: false,
       label: "Link",
-      icon: <AddLinkIcon role="presentation" />,
+      icon: <Icon name="add_link" isPresentational />,
     })
   }
 

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { EditIcon, ExternalLinkIcon, RemoveLinkIcon } from "~components/Icon"
 import { usePopover } from "~components/Popover"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { SelectionPosition } from "../../types"
 import { Positioner } from "./Positioner"
 import styles from "./LinkPopover.module.scss"
@@ -26,7 +26,7 @@ export const LinkPopover = ({
       <Positioner ref={ElementRef} {...selectionPosition} />
       <Popover size="large">
         <div className={styles.popoverContent}>
-          <ExternalLinkIcon role="presentation" />
+          <Icon name="open_in_new" isPresentational />
           <div className={styles.popoverLinkContainer}>
             <Text
               variant="body"
@@ -44,13 +44,9 @@ export const LinkPopover = ({
             </Text>
           </div>
           <div className={styles.popoverActions}>
-            <EditIcon role="img" onClick={onEdit} aria-label="Edit link" />
+            <Icon name="edit" onClick={onEdit} alt="Edit link" />
           </div>
-          <RemoveLinkIcon
-            role="img"
-            onClick={onRemove}
-            aria-label="Remove link"
-          />
+          <Icon name="link_off" onClick={onRemove} alt="Remove link" />
         </div>
       </Popover>
     </>

package/src/Select/Select.module.scss

@@ -47,15 +47,15 @@ $focus-border-color: $color-blue-500;
   }
 
   .control {
-    &.disabled {
-      opacity: 30%;
-    }
-
     min-height: $input-height;
     border: $border-solid-border-width $border-solid-border-style
       $color-gray-500;
     border-radius: $border-solid-border-radius;
 
+    &.disabled {
+      opacity: 30%;
+    }
+
     &:hover {
       border-color: $color-gray-600;
       background-color: $color-gray-100;
@@ -148,12 +148,12 @@ $focus-border-color: $color-blue-500;
   }
 
   .selectedOption {
+    font-weight: $typography-paragraph-bold-font-weight;
+    color: $color-blue-500;
+
     &:not(.focusedOption) {
       background-color: transparent;
     }
-
-    font-weight: $typography-paragraph-bold-font-weight;
-    color: $color-blue-500;
   }
 
   .disabledOption {
@@ -345,6 +345,8 @@ $focus-border-color: $color-blue-500;
     }
 
     .dropdownIndicator {
+      --icon-size: 14;
+
       padding-top: 0;
       padding-bottom: 0;
       transform: translateY(1px);

package/src/Select/Select.tsx

@@ -7,9 +7,9 @@ import ReactSelect, {
 } from "react-select"
 import Async, { AsyncProps as ReactAsyncSelectProps } from "react-select/async"
 import { FieldMessage } from "~components/FieldMessage"
-import { ChevronDownIcon, ChevronUpIcon, ClearIcon } from "~components/Icon"
 import { Label } from "~components/Label"
 import { Tag } from "~components/Tag"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./Select.module.scss"
 
 export type SelectProps = {
@@ -183,11 +183,14 @@ const Placeholder: typeof components.Placeholder = props => (
 
 const DropdownIndicator: typeof components.DropdownIndicator = props => (
   <components.DropdownIndicator {...props} className={styles.dropdownIndicator}>
-    {props.selectProps.menuIsOpen ? (
-      <ChevronUpIcon role="presentation" />
-    ) : (
-      <ChevronDownIcon role="presentation" />
-    )}
+    <Icon
+      name={
+        props.selectProps.menuIsOpen
+          ? "keyboard_arrow_up"
+          : "keyboard_arrow_down"
+      }
+      isPresentational
+    />
   </components.DropdownIndicator>
 )
 
@@ -258,6 +261,6 @@ const ValueContainer: typeof components.ValueContainer = props => (
 )
 const ClearIndicator: typeof components.ClearIndicator = props => (
   <components.ClearIndicator {...props} className={styles.clearIndicator}>
-    <ClearIcon role="presentation" />
+    <Icon name="cancel" isPresentational isFilled />
   </components.ClearIndicator>
 )

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx

@@ -7,20 +7,19 @@ const DropdownButtonWrapper = (
 ): JSX.Element => <DropdownButton {...props} />
 
 describe("<DropdownButton />", () => {
-  it("renders icon with default aria-label", async () => {
+  it("has default accessible name", async () => {
     render(<DropdownButtonWrapper />)
     await waitFor(() => {
       const button = screen.getByRole("button", { name: "Additional actions" })
-      expect(button.getAttribute("aria-label")).toBe("Additional actions")
-      expect(button.firstChild?.nodeName).toEqual("svg")
+      expect(button).toBeInTheDocument()
     })
   })
 
-  it("renders custom aria-label", async () => {
+  it("can customise accessible name", async () => {
     render(<DropdownButtonWrapper aria-label="Custom aria label" />)
     await waitFor(() => {
       const button = screen.getByRole("button", { name: "Custom aria label" })
-      expect(button.getAttribute("aria-label")).toBe("Custom aria label")
+      expect(button).toBeInTheDocument()
     })
   })
 })

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
-import { ChevronDownIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { BaseButton, BaseButtonProps } from "../BaseButton"
 import styles from "./DropdownButton.module.scss"
 
@@ -23,7 +23,7 @@ export const DropdownButton = ({
           description: "Label for a dropdown menu holding additional actions",
         })
       }
-      icon={<ChevronDownIcon role="presentation" />}
+      icon={<Icon name="keyboard_arrow_down" isPresentational />}
       classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
       {...restProps}
     />

package/src/Table/Table.module.scss

@@ -14,7 +14,9 @@ $row-height-data-variant: 48px;
   text-decoration: none;
   color: $color-purple-800;
   display: block;
+}
 
+@mixin anchor-reset-pseudo-states {
   &:hover,
   &:active,
   &:focus {
@@ -94,6 +96,8 @@ $row-height-data-variant: 48px;
   // Ensures that the 100% doesn't go outside of the `headerRowCell` width
   box-sizing: border-box;
 
+  @include anchor-reset-pseudo-states;
+
   &:focus-visible {
     outline: none;
     position: relative;
@@ -161,8 +165,12 @@ $row-height-data-variant: 48px;
 
 .card {
   @include button-reset;
+  // These css properties are required for when the rows are anchor elements
+  @include anchor-reset;
 
-  background: $color-white;
+  // This is an optical hack to stop the card shadow from overlapping over
+  // the proceeding cards
+  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
   border: solid 1px rgba($color-purple-700-rgb, 0.1);
   transition:
     box-shadow $animation-duration-rapid,
@@ -170,13 +178,9 @@ $row-height-data-variant: 48px;
     margin $animation-duration-rapid,
     padding $animation-duration-rapid,
     width $animation-duration-rapid;
+  background: $color-white;
 
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0 4px 6px rgba(53, 55, 74, 0.04);
-
-  // These css properties are required for when the rows are anchor elements
-  @include anchor-reset;
+  @include anchor-reset-pseudo-states;
 
   &:not(:first-child) {
     margin-top: -1px;

package/src/Table/Table.tsx

@@ -2,11 +2,7 @@ import React, { cloneElement, HTMLAttributes, ReactElement } from "react"
 import classnames from "classnames"
 import { Checkbox, CheckedStatus } from "~components/Checkbox"
 import { Heading } from "~components/Heading"
-import {
-  ExclamationIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Table.module.scss"
@@ -169,7 +165,7 @@ export const TableHeaderRowCell = ({
       )}
       {tooltipInfo != null && !isTooltipIconHidden ? (
         <div className={styles.headerRowCellTooltipIcon}>
-          <ExclamationIcon role="presentation" />
+          <Icon name="error" isPresentational isFilled />
         </div>
       ) : null}
       {/* If an "icon" is supplied, the label is displayed inside the icon aria title instead */}
@@ -192,9 +188,9 @@ export const TableHeaderRowCell = ({
           )}
         >
           {sorting === "ascending" || sortingArrowsOnHover === "ascending" ? (
-            <SortAscendingIcon role="presentation" />
+            <Icon name="arrow_drop_up" isPresentational />
           ) : (
-            <SortDescendingIcon role="presentation" />
+            <Icon name="arrow_drop_down" isPresentational />
           )}
         </div>
       )}