[Select, Text] Add magic tone

[matallo]

WHY are these changes introduced?

This PR introduces a new tone prop with a possible value "magic" for determining the values in the component have been generated by AI to Select component, as well as "magic" and "magic-subdued" values to Text component. It uses the magic color tokens.

References #10152

WHAT is this pull request doing?

This is a followup of #10819 and follows the pattern suggested by the Polaris team.

How to 🎩

In Storybook

http://localhost:6006/?path=/story/all-components-select--magic

Check with inline label, and active states.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• 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

[matallo]

@jonrundle @mathildebuenerd I'm currently getting the following contrast error when I use magic-subdued value from Figma, what would be the best way to fix?

🔴 3 failures found
- Story ID: all-components-select--with-inline-label-magic
  Error: Elements must have sufficient color contrast (color-contrast)
  Affected node(s):
    <span class="Text-root_w5rIR Text-block_05t03 Text-magic-subdued_i4baY Text-truncate_d5ssy">Sort by</span>
  For help resolving this see: https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axe-puppeteer
- Story ID: all-components-select--all
  Error: Elements must have sufficient color contrast (color-contrast)
  Affected node(s):
    <span class="Text-root_w5rIR Text-block_05t03 Text-magic-subdued_i4baY Text-truncate_d5ssy">Label inline magic</span>
  For help resolving this see: https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axe-puppeteer
- Story ID: all-components-text--with-tone
  Error: Elements must have sufficient color contrast (color-contrast)
  Affected node(s):
    <p class="Text-root_w5rIR Text-magic-subdued_i4baY">Recommended for secondary-level prominence of text suggested by magic AI.</p>
  For help resolving this see: https://dequeuniversity.com/rules/axe/4.4/color-contrast?application=axe-puppeteer

[jonrundle]

I'm currently getting the following contrast error when I use magic-subdued value from Figma, what would be the best way to fix?

Do you have a screenshot of where it's being used in this PR? sounds like it's on some text?

[mathildebuenerd]

@matallo I couldn't find where magic-subdued is used on figma.

For the select, the contrast between the text and background should be enough for WCAG AA level: My bad, it is passing on large text only

(this is between the "Sort by" text and background)

[matallo]

Do you have a screenshot of where it's being used in this PR? sounds like it's on some text?

I updated the link in the comment directly to the component

For the select, the contrast between the text and background should be enough for WCAG AA level:

Thanks! It seems it was not passing for AA (4.34 vs 4.5), I will push an update with values that pass.

[mathildebuenerd]

@matallo which link are you referring to? I only see a localhost link in the PR description, which I can't access: http://localhost:6006/?path=/story/all-components-select--magic

Can you provide a screenshot from Figma?

[matallo]

@mathildebuenerd I referred to the link in my comment, here's again Figma

For the localhost link in the PR description you'd need to run polaris locally, I'm not sure we provide development storybook urls.

I'll reach out by DM for changes related to the WCAG AA level.

[jonrundle]

@matallo my concern with changing text-magic-secondary to purple-13 instead of purple-12 is there is very little contrast between it now and text-magic. It loses it's effect to be a secondary colour. Wondering @sarahill if you have any suggestions here on if there are other places you're dealing with a similar issue? Or do we need to go darker with the main text-magic?

[jonrundle]

Actually following up here. The contrast is actually very close, all we need to do is bump the lightness on the HSL of that colour down one point to meet contrast. We could switch purple-12 from #8051FF to #7D4DFF and meet AA. Here's a screen of that shift, which is pretty minimal and then we'd maintain a good contrast between the main magic text and the secondary text. wdyt @sarahill?

EDIT: And here it is in effect with the component:

I've opened up a branch for the Polaris Styles file, I think this probably makes sense to do.

[matallo]

this is lovely @jonrundle I'll go ahead and push the change:

• revert to purple 12
• replace value of purple 12 to the new one

[kyledurand]

Code looks good but not sure about the usage and token value change. Going to add @sarahill as reviewer for UX

[jonrundle]

this is lovely @jonrundle I'll go ahead and push the change:

@matallo sorry for the back and forth here. Just chatted with @sarahill and it would keep things more in the system for now if we didn't adjust the hex of purple-12 and instead did originally what you had suggested which was changing text-magic-secondary to use purple-13 instead. They're going to review the general palette some more but for now that's the adjustment we should make for this update. Sorry for the ping-pong here 😅

[sarahill]

Overall looks good just a couple questions on the design side:

1. To keep consistency with the way other magic inputs behave I assume the text should go back to the default color after interacting with the select. Is that correct?
   Current behavior:
   

2. Should the icon take on the magic color to match how we're treating icons within the TextField?
   TextField example:
   

[jonrundle]

To keep consistency with the way other magic inputs behave I assume the text should go back to the default color after interacting with the select. Is that correct?

Yeah it should go back to default after interaction.

Should the icon take on the magic color to match how we're treating icons within the TextField?

Yes, good catch we should update that

[matallo]

Fair enough, to be frank I observed both behaviours before pushing the update 😄

https://screenshot.click/23-25-b5fn4-zjfsk.mp4

[sarahill]

Looks good! 🎉

[matallo]

/snapit

[github-actions]

🫰✨ Thanks @matallo! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231123204806

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231123204806

yarn add @shopify/polaris@0.0.0-snapshot-release-20231123204806

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231123204806

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231123204806