From 3646ef2720db73c29f94524de3ce1fd442790427 Mon Sep 17 00:00:00 2001 From: Cassandra Date: Wed, 20 Nov 2024 11:58:12 +1100 Subject: [PATCH] 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 | 10 ++++++++++ packages/components/codemods/README.md | 17 ++++++++++++++++- .../getNewIconPropsFromOldIconName.ts | 18 +++++++++--------- 3 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 .changeset/tidy-walls-brush.md diff --git a/.changeset/tidy-walls-brush.md b/.changeset/tidy-walls-brush.md new file mode 100644 index 00000000000..29fe8182701 --- /dev/null +++ b/.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` diff --git a/packages/components/codemods/README.md b/packages/components/codemods/README.md index 013d7284a23..79c087e6957 100644 --- a/packages/components/codemods/README.md +++ b/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 diff --git a/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts b/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts index 0b8fc8f7dbb..b8cf2ce72dd 100644 --- a/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts +++ b/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts @@ -88,10 +88,10 @@ const iconMap = new Map([ ["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([ ["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([ ["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([ ["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([ ["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" }],