fix(upgradeIconV1): update some icons to default to filled (#5294)

* fix(upgradeIconV1): update some icons to default to filled

* docs(codemods): add more details to updateIconV1

.changeset/tidy-walls-brush.md

@@ -0,0 +1,10 @@
+---
+"@kaizen/components": patch
+---
+
+Update codemod `upgradeIconV1` to default the following icons to be filled:
+- `check_circle`
+- `info`
+- `error`
+- `help`
+- `privacy_tip`

packages/components/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

packages/components/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" }],