@kaizen/components 1.68.0 → 1.68.2

package/codemods/README.md

@@ -23,21 +23,107 @@ pnpm kaizen-codemod src migrateWellVariantToColor
 ```
 
 ## Available codemods
-- `migrateBrandMomentMoodToVariant`: Migrates `BrandMoment` component prop from `mood` to `variant`
-- `migrateCardVariantToColor`: Migrates `Card` component prop from `variant` to `color`
-- `migrateConfirmationModalMoodsToVariant`: Migrates `ConfirmationModal` component prop from `mood` to `variant`
-- `migrateEmptyStateIllustrationTypeToVariant`: Migrates `EmptyState` component prop from `illustrationType` to `variant`
-- `migrateGlobalNotificationTypeToVariant`: Transforms `GlobalNotification`'s `type` prop to the new `variant` prop
-- `migrateInformationTileMoodToVariant`: Migrates `InformationTile` component prop from `mood` to `variant`
-- `migrateInlineNotificationTypeToVariant`: Transforms `InlineNotification`'s `type` prop to the new `variant` prop
-- `migrateMultiActionTileMoodToVariant`: Migrates `MultiActionTile` component prop from `mood` to `variant`
-- `migrateProgressBarMoodToColor`: Migrates `ProgressBar` component prop from `mood` to `color`
-- `migrateToastNotificationTypeToVariant`: Transforms `ToastNotification`'s `type` prop to the new `variant` prop
-- `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
-- `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
-- `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
-- `upgradeIconV1`: Migrates `*Icon` components to a new equivalent
-  - `CaMonogramIcon` becomes `Brand`
-  - `SpinnerIcon` becomes `LoadingSpinner`
-  - All other Icons become future `Icon`
-    - **Note:** See [Icon API Specification (Future)](https://cultureamp.design/?path=/docs/illustrations-icon-icon-future-api-specification--docs) for setup instructions
+
+### `migrateBrandMomentMoodToVariant`
+
+Released in `1.58.0`
+
+Migrates `BrandMoment` component prop from `mood` to `variant`.
+
+### `migrateCardVariantToColor`
+
+Released in `1.58.0`
+
+Migrates `Card` component prop from `variant` to `color`.
+
+### `migrateConfirmationModalMoodsToVariant`
+
+Released in `1.58.0`
+
+Migrates `ConfirmationModal` component prop from `mood` to `variant`.
+
+### `migrateEmptyStateIllustrationTypeToVariant`
+
+Released in `1.58.0`
+
+Migrates `EmptyState` component prop from `illustrationType` to `variant`.
+
+### `migrateGlobalNotificationTypeToVariant`
+
+Released in `1.58.0`
+
+Transforms `GlobalNotification`'s `type` prop to the new `variant` prop.
+
+### `migrateInformationTileMoodToVariant`
+
+Released in `1.58.0`
+
+Migrates `InformationTile` component prop from `mood` to `variant`.
+
+### `migrateInlineNotificationTypeToVariant`
+
+Released in `1.58.0`
+
+Transforms `InlineNotification`'s `type` prop to the new `variant` prop.
+
+### `migrateMultiActionTileMoodToVariant`
+
+Released in `1.58.0`
+
+Migrates `MultiActionTile` component prop from `mood` to `variant`.
+
+### `migrateProgressBarMoodToColor`
+
+Released in `1.58.0`
+
+Migrates `ProgressBar` component prop from `mood` to `color`.
+
+### `migrateToastNotificationTypeToVariant`
+
+Released in `1.58.0`
+
+Transforms `ToastNotification`'s `type` prop to the new `variant` prop.
+
+### `migrateWellVariantToColor`
+
+Released in `1.58.0`
+
+Migrates `Well` component prop from `variant` to `color`.
+
+### `removeInputEditModalMood`
+
+Released in `1.58.0`
+
+Removes `InputEditModal` component prop `mood`.
+
+### `removePopoverVariant`
+
+Released in `1.60.0`
+
+Removes `Popover` component props `variant` and `customIcon`.
+
+### `upgradeIconV1`
+
+Released in `1.67.0`; last updated in `1.68.1`
+
+Migrates `*Icon` components to a new equivalent.
+
+- `CaMonogramIcon` becomes `Brand` variant `enso`
+  - `inheritSize` will be removed if set, if not set then `style` will be added to make it 20px (manually adjust to a `className` if you can)
+- `SpinnerIcon` becomes `LoadingSpinner`
+  - `aria-label` will be replaced with `accessibilityLabel` (with a fallback value of `"Loading"`)
+  - `role` will be removed
+  - `viewBox` will be removed
+- All other Icons become future `Icon`
+  - **Note:** See [Icon API Specification (Future)](https://cultureamp.design/?path=/docs/illustrations-icon-icon-future-api-specification--docs) for setup instructions
+  - Icons previously filled may become unfilled. This is intentional as filled icons should only be for active states or selection (see [Icon Usage Guidelines (Future)](https://cultureamp.design/?path=/docs/illustrations-icon-icon-future-usage-guidelines--docs#do-use-the-appropriate-fill-for-the-icon-context-and-state))
+  - `role="presentational"` becomes `isPresentational`
+  - `role="img"` will be removed (as `aria-label` should exist)
+  - `aria-label` becomes `alt`
+  - `classNameOverride` becomes `className`
+  - `inheritSize` will remain - however is no longer a valid prop, therefore will have a TypeScript error and will be prefixed with a comment to manually fix the usage
+  - `aria-hidden` becomes `isPresentational`
+  - `color` becomes an inline `style` (manually adjust to a `className` if you can)
+  - `fontSize` will be removed
+  - `height` and `width` become an inline `style` (manually adjust to a `className` if you can, ideally setting `--icon-size`)
+  - `viewBox` will be removed

package/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts

@@ -88,10 +88,10 @@ const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ["EngagementWhiteIcon", undefined],
   ["EqualIcon", undefined],
   ["EqualWhiteIcon", undefined],
-  ["ExclamationIcon", { name: "error" }],
+  ["ExclamationIcon", { name: "error", isFilled: true }],
   ["ExclamationOctagonIcon", { name: "warning" }],
   ["ExclamationOctagonWhiteIcon", undefined],
-  ["ExclamationWhiteIcon", { name: "error" }],
+  ["ExclamationWhiteIcon", { name: "error", isFilled: true }],
   ["ExperienceIcon", undefined],
   ["ExportIcon", { name: "cloud_download" }],
   ["ExportWhiteIcon", { name: "cloud_download" }],
@@ -138,8 +138,8 @@ const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ["IncreaseIndentIcon", { name: "format_indent_increase" }],
   ["IndicatorActiveIcon", { name: "radio_button_checked" }],
   ["IndicatorInactiveIcon", { name: "radio_button_unchecked" }],
-  ["InformationIcon", { name: "info" }],
-  ["InformationWhiteIcon", { name: "info" }],
+  ["InformationIcon", { name: "info", isFilled: true }],
+  ["InformationWhiteIcon", { name: "info", isFilled: true }],
   ["InsightIcon", { name: "find_in_page" }],
   ["InsightsIcon", undefined],
   ["InvisibleIcon", { name: "visibility_off" }],
@@ -180,9 +180,9 @@ const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ["ProcessManagerIcon", { name: "playlist_add_check" }],
   ["PromotionIcon", { name: "grade" }],
   ["PromotionWhiteIcon", undefined],
-  ["QuestionIcon", { name: "help" }],
+  ["QuestionIcon", { name: "help", isFilled: true }],
   ["QuestionsIcon", undefined],
-  ["QuestionWhiteIcon", { name: "help" }],
+  ["QuestionWhiteIcon", { name: "help", isFilled: true }],
   ["RedoIcon", { name: "redo" }],
   ["RefreshIcon", { name: "refresh" }],
   ["RemoveLinkIcon", { name: "link_off" }],
@@ -193,7 +193,7 @@ const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ["SaveIcon", undefined],
   ["SearchIcon", { name: "search" }],
   ["SearchWhiteIcon", { name: "search" }],
-  ["SecurityTipIcon", { name: "privacy_tip" }],
+  ["SecurityTipIcon", { name: "privacy_tip", isFilled: true }],
   ["SendIcon", { name: "send" }],
   ["SendRtlIcon", undefined],
   ["SettingsIcon", { name: "settings" }],
@@ -209,8 +209,8 @@ const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
   ["StartIcon", { name: "keyboard_tab_rtl" }],
   ["SubtractIcon", { name: "remove" }],
   ["SubtractWhiteIcon", undefined],
-  ["SuccessIcon", { name: "check_circle" }],
-  ["SuccessWhiteIcon", { name: "check_circle" }],
+  ["SuccessIcon", { name: "check_circle", isFilled: true }],
+  ["SuccessWhiteIcon", { name: "check_circle", isFilled: true }],
   ["SupportIcon", { name: "support" }],
   ["SurveysIcon", { name: "assignment" }],
   ["SurveysWhiteIcon", { name: "assignment" }],

package/dist/styles.css

@@ -61,11 +61,19 @@
   align-items: center;
 }
 
-.MenuItem-module_item__uImZI[data-focused] {
+.MenuItem-module_item__uImZI:focus {
+  outline: none;
+}
+
+.MenuItem-module_item__uImZI[data-hovered],
+.MenuItem-module_item__uImZI[data-focus-visible] {
   background-color: var(--color-blue-100);
   color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__uImZI[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width)
+    var(--border-focus-ring-border-style) var(--color-blue-500);
 }
 
 .MenuItem-module_item__uImZI[data-disabled] {
@@ -350,6 +358,34 @@
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
+.OverlayArrow-module_overlayArrow__hoDyK {
+  display: flex;
+  padding: 8px;
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
+  padding: 0 8px;
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
+  padding: 8px 0;
+}
+.OverlayArrow-module_overlayArrow__hoDyK path {
+  fill: var(--color-purple-800, #2f2438);
+  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
+  transform: rotate(90deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
+  transform: rotate(180deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
+  transform: rotate(270deg);
+}
+.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
+  fill: var(--color-white, #ffffff);
+}
+/** THIS IS AN AUTOGENERATED FILE **/
+/** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -404,34 +440,6 @@
     opacity: 1;
   }
 }
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-.OverlayArrow-module_overlayArrow__hoDyK {
-  display: flex;
-  padding: 8px;
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
-  padding: 0 8px;
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
-  padding: 8px 0;
-}
-.OverlayArrow-module_overlayArrow__hoDyK path {
-  fill: var(--color-purple-800, #2f2438);
-  box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
-  transform: rotate(90deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
-  transform: rotate(180deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
-  transform: rotate(270deg);
-}
-.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
-  fill: var(--color-white, #ffffff);
-}
 /*
  * This is taken from the Material Symbols CDN
  * font-weight & font-size removed as overridden in .icon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.0",
+  "version": "1.68.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/__actions__/Menu/v3/MenuItem.module.css

@@ -27,11 +27,19 @@
   align-items: center;
 }
 
-.item[data-focused] {
+.item:focus {
+  outline: none;
+}
+
+.item[data-hovered],
+.item[data-focus-visible] {
   background-color: var(--color-blue-100);
   color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
+}
+
+.item[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width)
+    var(--border-focus-ring-border-style) var(--color-blue-500);
 }
 
 .item[data-disabled] {

package/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx

@@ -44,6 +44,7 @@ export const Actions: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -66,6 +67,7 @@ export const ItemsDo: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -85,6 +87,7 @@ export const ItemsDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -103,7 +106,7 @@ export const ItemsDont: Story = {
 export const SelectionDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Sort by
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -122,7 +125,7 @@ export const SelectionDont: Story = {
 export const LabelChevronDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Edit item
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -138,7 +141,7 @@ export const LabelChevronDo: Story = {
 export const LabelChevronDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>Edit item</Button>
+      <Button variant="secondary">Edit item</Button>
       <Popover>
         <Menu>
           <DefaultMenuItems />
@@ -151,7 +154,7 @@ export const LabelChevronDont: Story = {
 export const LabelDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Actions [visually hidden], conversation with Harper[/visually hidden]
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -167,7 +170,7 @@ export const LabelDo: Story = {
 export const LabelDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button className="[--icon-size:24]">
+      <Button variant="secondary" className="[--icon-size:24]">
         Open menu
         <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
@@ -186,6 +189,7 @@ export const IconsDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -212,6 +216,7 @@ export const MenuItemLabelsDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -233,6 +238,7 @@ export const SentenceCaseDo: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -254,6 +260,7 @@ export const SentenceCaseDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -275,6 +282,7 @@ export const ElipsesDo: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -296,6 +304,7 @@ export const ElipsesDont: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions

package/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx

@@ -39,6 +39,7 @@ export const KitchenSink: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -91,6 +92,7 @@ export const Basic: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -177,6 +179,7 @@ export const DisabledItems: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -221,6 +224,7 @@ export const WithSections: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -256,6 +260,7 @@ export const Controlled: Story = {
         <MenuTrigger isOpen={isOpen} onOpenChange={setOpen}>
           <Button
             icon={<Icon name="more_horiz" isPresentational />}
+            variant="secondary"
             hasHiddenLabel
           >
             Additional actions

package/src/__actions__/Menu/v3/_docs/Menu.stories.tsx

@@ -28,6 +28,7 @@ export const Playground: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions
@@ -75,6 +76,7 @@ export const RichContent: Story = {
       <Button
         size="large"
         icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
         hasHiddenLabel
       >
         Additional actions