[Icon] Add support for `emphasis` and `text` tones and migrated `color` custom properties #10722

laurkim · 2023-09-27T16:50:23Z

WHY are these changes introduced?

Resolves #10486.
Adds support for net new tones on Icon component tone prop.

WHAT is this pull request doing?

Adds emphasis and text tones to Icon.
Migrates primary and subdued color custom properties.

How to 🎩

Storybook

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

…ones

sarahill · 2023-09-27T20:02:06Z

polaris-react/src/components/Icon/Icon.scss

 .toneMagic svg {
  fill: var(--p-color-icon-magic);
 }

+.toneBrand svg {


icon-brand will replace icon-primary

I think we still want to keep the tone as primary as this is how it's being handled for buttons and other elements I believe. It'll be a little confusing at first but feels safer for consistency for now and then we can decide to adjust if needed.

Just pushed up a fix to remove the extra .toneBrand class and just update the existing .tonePrimary to --p-icon-brand directly 👍

Updated snapshot:

sarahill

🎉

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @shopify/polaris@12.0.0-beta.2 ### Major Changes - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` ### Minor Changes - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 ## @shopify/polaris-tokens@8.0.0-beta.1 ### Major Changes - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values ### Minor Changes - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer ## @shopify/stylelint-polaris@14.1.2-beta.1 ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

…r` custom properties (Shopify#10722) ### WHY are these changes introduced? Resolves Shopify#10486. Adds support for net new tones on `Icon` component `tone` prop. ### WHAT is this pull request doing? Adds `emphasis` and `text` tones to `Icon`. Migrates `primary` and `subdued` color custom properties. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-sbgcrlbgjk.chromatic.com/?path=/story/all-components-icon--colored) 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

laurkim added 2 commits September 27, 2023 12:51

[Icon] Add support for brand, secondary, emphasis, and text t…

6531ee6

…ones

[Icon] Update stories with net new tones

6099811

laurkim force-pushed the lo/manually-migrate-color-icon branch from 2c35a33 to 6099811 Compare September 27, 2023 16:52

Add changeset

9c0e761

laurkim changed the title ~~[Icon] Add support for brand, secondary, emphasis, and text tones~~ [Icon] Add support for brand, secondary, emphasis, and text tones Sep 27, 2023

laurkim self-assigned this Sep 27, 2023

laurkim added the #gsd:36565 label Sep 27, 2023

laurkim linked an issue Sep 27, 2023 that may be closed by this pull request

Icon component color updates #10486

Closed

sophschneider force-pushed the next branch from 9cc8232 to 48ca178 Compare September 27, 2023 17:40

laurkim marked this pull request as ready for review September 27, 2023 17:46

laurkim requested review from kyledurand, sarahill, chloerice and lgriffee and removed request for chloerice September 27, 2023 17:47

sarahill reviewed Sep 27, 2023

View reviewed changes

laurkim changed the title ~~[Icon] Add support for brand, secondary, emphasis, and text tones~~ [Icon] Add support for secondary, emphasis, and text tones Sep 27, 2023

laurkim force-pushed the lo/manually-migrate-color-icon branch from ce4a5a2 to 54c4be7 Compare September 27, 2023 20:24

laurkim added 3 commits September 27, 2023 16:25

[Icon] Replace icon-primary token to icon-brand for primary prop

0422e68

[Icon] Remove icon brand tone example from story

e9f8717

Update changelog

9334dd4

laurkim force-pushed the lo/manually-migrate-color-icon branch from 54c4be7 to 9334dd4 Compare September 27, 2023 20:25

laurkim requested a review from sarahill September 27, 2023 20:33

laurkim added 3 commits September 27, 2023 16:40

[Icon] Update subdued and textPrimary types and styles

48120b5

[Icon] Update textPrimary and subdued tone stories

d6f2e67

Update changeset

c5edd7a

laurkim changed the title ~~[Icon] Add support for secondary, emphasis, and text tones~~ [Icon] Add support for emphasis and text tones and migrated color custom properties Sep 27, 2023

sarahill approved these changes Sep 27, 2023

View reviewed changes

Merge branch 'next' into lo/manually-migrate-color-icon

9f59723

laurkim requested a review from a team as a code owner September 27, 2023 21:32

laurkim merged commit 14a9496 into next Sep 27, 2023
12 checks passed

laurkim deleted the lo/manually-migrate-color-icon branch September 27, 2023 21:54

shopify-github-actions-access bot mentioned this pull request Sep 27, 2023

Version Packages (beta) #10718

Merged

shopify-github-actions-access bot mentioned this pull request Oct 9, 2023

Version Packages #10931

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Icon] Add support for `emphasis` and `text` tones and migrated `color` custom properties #10722

[Icon] Add support for `emphasis` and `text` tones and migrated `color` custom properties #10722

laurkim commented Sep 27, 2023 •

edited

Loading

sarahill Sep 27, 2023

laurkim Sep 27, 2023

sarahill left a comment

[Icon] Add support for emphasis and text tones and migrated color custom properties #10722

[Icon] Add support for emphasis and text tones and migrated color custom properties #10722

Conversation

laurkim commented Sep 27, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

sarahill Sep 27, 2023

Choose a reason for hiding this comment

laurkim Sep 27, 2023

Choose a reason for hiding this comment

sarahill left a comment

Choose a reason for hiding this comment

[Icon] Add support for `emphasis` and `text` tones and migrated `color` custom properties #10722

[Icon] Add support for `emphasis` and `text` tones and migrated `color` custom properties #10722

laurkim commented Sep 27, 2023 •

edited

Loading