@kaizen/components 1.68.0 → 1.68.1

package/codemods/README.md

@@ -37,7 +37,22 @@ pnpm kaizen-codemod src migrateWellVariantToColor
 - `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`
+  - `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

@@ -32,46 +32,6 @@
   }
 }
 
-.MenuItem-module_item__uImZI {
-  display: block;
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
-  padding: var(--spacing-6) var(--spacing-8);
-  border: var(--border-focus-ring-border-width)
-    var(--border-focus-ring-border-style) transparent;
-  border-radius: 4px;
-  margin-inline: var(--spacing-6);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.MenuItem-module_flexWrapper__hiXro {
-  display: flex;
-  gap: 0 var(--spacing-8);
-  align-items: center;
-}
-
-.MenuItem-module_iconWrapper__QoZgd {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-}
-
-.MenuItem-module_item__uImZI[data-focused] {
-  background-color: var(--color-blue-100);
-  color: var(--color-blue-500);
-  outline: none;
-  border-color: var(--color-blue-500);
-}
-
-.MenuItem-module_item__uImZI[data-disabled] {
-  opacity: 0.3;
-}
-
 .Button-module_button__vlUCI {
   /* RESET */
   appearance: none;
@@ -308,6 +268,46 @@
   visibility: hidden;
 }
 
+.MenuItem-module_item__uImZI {
+  display: block;
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  padding: var(--spacing-6) var(--spacing-8);
+  border: var(--border-focus-ring-border-width)
+    var(--border-focus-ring-border-style) transparent;
+  border-radius: 4px;
+  margin-inline: var(--spacing-6);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.MenuItem-module_flexWrapper__hiXro {
+  display: flex;
+  gap: 0 var(--spacing-8);
+  align-items: center;
+}
+
+.MenuItem-module_iconWrapper__QoZgd {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.MenuItem-module_item__uImZI[data-focused] {
+  background-color: var(--color-blue-100);
+  color: var(--color-blue-500);
+  outline: none;
+  border-color: var(--color-blue-500);
+}
+
+.MenuItem-module_item__uImZI[data-disabled] {
+  opacity: 0.3;
+}
+
 .PendingContent-module_pendingContent__c4IFS {
   display: inline-flex;
   align-items: center;

package/package.json

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