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

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;
@@ -138,8 +138,6 @@ $focus-border-color: $color-blue-500;
 
     &.disabledOption {
       color: $color-purple-800;
-      border-style: $border-dashed-border-style;
-      border-width: $border-focus-ring-border-width;
       border-color: $color-gray-500;
       background: transparent;
     }
@@ -150,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 {
@@ -347,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>
       )}

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

@@ -1,8 +1,8 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
-import { EffectivenessIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { StickerSheetStory } from "~storybook/components/StickerSheet"
 import {
   TableCard,
@@ -178,7 +178,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               width={4 / 12}
               sorting="descending"
               onClick={action("header 1")}
-              icon={<EffectivenessIcon role="img" aria-label="Focus" />}
+              icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
             <TableHeaderRowCell
               reversed={isReversed}
@@ -187,7 +187,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               sorting="ascending"
               onClick={action("header 3")}
               data-sb-pseudo-styles="hover"
-              icon={<EffectivenessIcon role="img" aria-label="Focus" />}
+              icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
             <TableHeaderRowCell
               reversed={isReversed}
@@ -196,7 +196,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               sorting="ascending"
               onClick={action("header 2")}
               data-sb-pseudo-styles="focus-visible"
-              icon={<EffectivenessIcon role="img" aria-label="Focus" />}
+              icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
           </TableRow>
         </TableHeader>

package/src/Table/_docs/Table.stories.tsx

@@ -3,8 +3,8 @@ import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
 import { Checkbox } from "~components/Checkbox"
 import { Divider } from "~components/Divider"
-import { EffectivenessIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import {
   TableCard,
   TableCardProps,
@@ -331,12 +331,12 @@ export const IconVariant: StoryObj<TableStoryProps> = {
   args: {
     headerRowCells: [
       {
-        icon: <EffectivenessIcon role="presentation" />,
+        icon: <Icon name="potted_plant" isPresentational isFilled />,
         labelText: "Resource name",
         width: 3 / 12,
       },
       {
-        icon: <EffectivenessIcon role="presentation" />,
+        icon: <Icon name="potted_plant" isPresentational isFilled />,
         labelText: "Supplementary information",
         width: 3 / 12,
       },

package/src/Tabs/subcomponents/index.ts

@@ -2,4 +2,3 @@ export * from "./Tab"
 export * from "./TabList"
 export * from "./TabPanel"
 export * from "./TabPanels"
-export * from "./Tab"

package/src/Tag/Tag.module.scss

@@ -55,6 +55,8 @@ $small: $spacing-md;
 }
 
 .iconWrapper {
+  --icon-size: 16;
+
   position: relative;
   height: 16px;
   width: 16px;

package/src/Tag/Tag.tsx

@@ -1,14 +1,8 @@
 import React from "react"
 import classnames from "classnames"
 import { Avatar, AvatarProps } from "~components/Avatar"
-import {
-  CautionIcon,
-  ClearIcon,
-  ExclamationIcon,
-  InformationIcon,
-  LiveIcon,
-  SuccessIcon,
-} from "~components/Icon"
+import { LiveIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TagVariants } from "./types"
 import styles from "./Tag.module.scss"
 
@@ -85,25 +79,25 @@ export const Tag = (props: TagProps): JSX.Element => {
                 case "validationPositive":
                   return (
                     <span className={styles.validationIcon}>
-                      <SuccessIcon role="presentation" />
+                      <Icon name="check_circle" isPresentational isFilled />
                     </span>
                   )
                 case "validationNegative":
                   return (
                     <span className={styles.validationIcon}>
-                      <ExclamationIcon role="presentation" />
+                      <Icon name="error" isPresentational isFilled />
                     </span>
                   )
                 case "validationCautionary":
                   return (
                     <span className={styles.validationIcon}>
-                      <CautionIcon role="presentation" />
+                      <Icon name="warning" isPresentational isFilled />
                     </span>
                   )
                 case "validationInformative":
                   return (
                     <span className={styles.validationIcon}>
-                      <InformationIcon role="presentation" />
+                      <Icon name="info" isPresentational isFilled />
                     </span>
                   )
                 case "profile":
@@ -137,7 +131,7 @@ export const Tag = (props: TagProps): JSX.Element => {
                 onMouseLeave={onMouseLeave}
               >
                 <div className={styles.iconWrapper}>
-                  <ClearIcon inheritSize role="img" aria-label="Dismiss" />
+                  <Icon name="cancel" alt="Dismiss" isFilled />
                 </div>
               </button>
             </>

package/src/Text/Text.module.scss

@@ -2,6 +2,8 @@
 @import "~@kaizen/design-tokens/sass/typography";
 
 .text {
+  --icon-vertical-align: text-bottom;
+
   margin: 0;
 
   strong {