@kaizen/components 1.66.0 → 1.67.0

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.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/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 {

package/src/TextField/TextField.spec.tsx

@@ -26,25 +26,30 @@ describe("<TextField />", () => {
       <TextField
         {...defaultProps}
         description={undefined}
-        validationMessage="Error message"
+        status="caution"
+        validationMessage="Revision required"
       />
     )
+    // React Testing Library bug: Icon should be showing aria-label "caution message" instead
     const input = getByRole("textbox", {
-      description: "Error message",
+      description: "warning Revision required",
     })
 
     expect(input).toBeInTheDocument()
   })
+
   it("renders correct aria-describedby when both description and validation message provided", () => {
     const { getByRole } = render(
       <TextField
         {...defaultProps}
         description="Description text"
-        validationMessage="Error message"
+        status="error"
+        validationMessage="Something went wrong"
       />
     )
+    // React Testing Library bug: Icon should be showing aria-label "error message" instead
     const input = getByRole("textbox", {
-      description: "Description text Error message",
+      description: "Description text error Something went wrong",
     })
 
     expect(input).toBeInTheDocument()

package/src/TextField/TextField.tsx

@@ -2,9 +2,9 @@ import React, { useId } from "react"
 import classnames from "classnames"
 import { FieldGroup } from "~components/FieldGroup"
 import { FieldMessage } from "~components/FieldMessage"
-import { SuccessIcon } from "~components/Icon"
 import { Input, InputProps } from "~components/Input"
 import { Label } from "~components/Label"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./TextField.module.scss"
 
 type OmittedInputProps =
@@ -92,7 +92,7 @@ export const TextField = ({
                 disabled && styles.disabled
               )}
             >
-              <SuccessIcon role="presentation" />
+              <Icon name="check_circle" isPresentational isFilled />
             </div>
           )
         }

package/src/TextField/_docs/TextField.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TextField } from "../index"
 
 const meta = {
@@ -40,8 +40,9 @@ export const Types: Story = {
   },
 }
 
-export const Icon: Story = {
-  args: { icon: <WritingIcon role="presentation" /> },
+export const IconStory: Story = {
+  name: "Icon",
+  args: { icon: <Icon name="edit" isPresentational isFilled /> },
 }
 
 export const Description: Story = {

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes, useState } from "react"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
-import { ArrowBackwardIcon, InformationIcon } from "~components/Icon"
 import { Text } from "~components/Text"
 import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericButton"
 import { IconButton, Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./GenericTile.module.scss"
 
@@ -81,7 +81,7 @@ export const GenericTile = ({
         <div className={styles.informationBtn}>
           <IconButton
             label="Information"
-            icon={<InformationIcon role="presentation" />}
+            icon={<Icon name="info" isPresentational isFilled />}
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
             aria-hidden={isFlipped}
@@ -140,7 +140,7 @@ export const GenericTile = ({
         <div className={styles.informationBtn}>
           <IconButton
             label="Information"
-            icon={<ArrowBackwardIcon role="presentation" />}
+            icon={<Icon name="arrow_back" isPresentational />}
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}
             aria-hidden={!isFlipped}

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -525,6 +525,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})

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.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")}