[TextField, Radio, Checkbox] Add styles for AI generated values #10819

matallo · 2023-10-03T20:00:16Z

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. It uses the --p-color-text-magic color token and serves as an example for how the rest of styles in this and other components should be implemented.

References #10152

WHAT is this pull request doing?

This follows the pattern suggested by the Polaris team. After considering applying the styles with a data-ai-generated attribute so it could be modified via DOM manipulation I discarded that option.

Radio in web

Checkbox

hover

checked

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Added a new story in Storybook for showing the variant.

🎩 checklist

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

kyledurand

Code looks good but there are a lot of hardcoded colors. Can we add these to the system where they make sense? cc @sarahill

.changeset/fair-eggs-cross.md

sarahill · 2023-10-24T16:10:34Z

I noticed hard coded values in another PR. I'm chatting with @jonrundle today and will bring this up.

jonrundle · 2023-10-24T16:51:21Z

I noticed hard coded values in another PR. I'm chatting with @jonrundle today and will bring this up.

yep! got some details on how we can clean this up, was on my list for us to pair on :D

matallo · 2023-10-24T21:01:52Z

Updated var(--p-color-bg-fill-magic) !

sarahill · 2023-10-24T21:23:32Z

I left some comments in the Figma file re: color. The new border color doesn't pass contrast requirements for interactive elements since these do rely on the border to give the element shape.

sarahill · 2023-10-24T23:33:24Z

I chatted with Jon earlier today and he mentioned you all on are a time constraint for the beta release so these suggestions are to help us meet that while keeping connected to the system and making it easier for us to continue to iterate on these designs.

Re: tokens vs hard coded values - As I mentioned above, I chatted with Jon earlier about the new and updated tokens. I have some questions about the design so I'm hesitant to make too many breaking changes to the tokens right now. I would also prefer not to use hard coded values.

I put together a suggestion of how we might approach the tokens here in figma

Things to note:

@jonrundle I know you mentioned having two sets of surface tokens for generated vs. not - this proposal just updates the surface color without adding the new ones as the distinction between values seemed really minimal but we can chat about it if you feel strongly. This could also be a follow-up.
I upped the value of the border-secondary for contrast requirements
I would bump border-magic to 7 personally (I left some other range suggestions on the other border tokens too)

This would keep things connected to the tokens so we can easily update later.

jonrundle · 2023-10-25T13:28:57Z

@sarahill awesome, appreciate it! yeah I'm good with updating surface for now to just use that across both cases. Is that something your team can help get updated or is that something our team should help get updated?

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

kyledurand

I'm still seeing the weird hover behaviour https://screenshot.click/30-35-q5w1g-wpqrp.mp4

@sarahill What should the border color be on hover?

jonrundle · 2023-10-30T14:59:52Z

@sarahill What should the border color be on hover?

Should be --p-color-border-magic-secondary-hover

matallo · 2023-10-30T15:42:42Z

🤔 here's the hover state with --p-color-border-magic-secondary-hover

https://github.com/Shopify/polaris/pull/10819/files#diff-13a7214a105b762eeee0585572a351003e8a56c6fcfbec45b52a5bf7971caffbR115

could it be possible that it needs to run a build command? just throwing ideas here

https://screenshot.click/30-41-9dzc7-qrxzc.mp4

sarahill · 2023-10-30T20:48:56Z

Looks correct on in Storybook for me re: border colors

sarahill · 2023-10-30T20:54:24Z

For Storybook:

Can you add single and multi-select stories? I'm only seeing single select right now
Can you add Magic examples for Radiobutton?

matallo · 2023-10-31T13:51:34Z

Can you add single and multi-select stories? I'm only seeing single select right now

✅ I assume it's for ChoiceList

Can you add Magic examples for Radiobutton?

✅

sarahill

Looks good on the design side ✅

matallo · 2023-10-31T18:13:59Z

/snapit

github-actions · 2023-10-31T18:18:26Z

🫰✨ 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-migrator@0.0.0-snapshot-release-20231031181630

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

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

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

kyledurand

Changes look good. Just seeing one thing where the active state on radio is black. Not sure if that's a blocker or intentional

radio.mp4

jonrundle · 2023-11-01T15:29:16Z

Just seeing one thing where the active state on radio is black. Not sure if that's a blocker or intentional

Personally don't think this is a big deal since these would never be clicked by the user—they'd always be auto-highlighted by sidekick

@matallo

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 main, this PR will be updated. # Releases ## @shopify/polaris@12.1.0 ### Minor Changes - [#10819](#10819) [`460c48cfa`](460c48c) Thanks [@matallo](https://github.com/matallo)! - - Added `tone` prop with `magic` value to `TextField` - Added `tone` prop with `magic` value to `ChoiceList` - Added `tone` prop with `magic` value to `Checkbox` ### Patch Changes - [#11079](#11079) [`9c0433c02`](9c0433c) Thanks [@kyledurand](https://github.com/kyledurand)! - Added tests for destructive mapping in `Page` and `Modal` - [#11081](#11081) [`c0be502a8`](c0be502) Thanks [@kyledurand](https://github.com/kyledurand)! - Updated Page titleMetadata documentation ## polaris.shopify.com@0.60.3 ### Patch Changes - [#11083](#11083) [`54dcc984b`](54dcc98) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed typos in Design > Icons section created from MDX layout refactor - Updated dependencies \[[`460c48cfa`](460c48c), [`9c0433c02`](9c0433c), [`c0be502a8`](c0be502)]: - @shopify/polaris@12.1.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### 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 Shopify#10152 ### WHAT is this pull request doing? This is a followup of Shopify#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](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

### 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](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

…ify#10819)  ### 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. It uses the `--p-color-text-magic` color token and serves as an example for how the rest of styles in this and other components should be implemented. References Shopify#10152 ### WHAT is this pull request doing? This follows the pattern suggested by the Polaris team. After considering applying the styles with a `data-ai-generated` attribute so it could be modified via DOM manipulation I discarded that option. ![Screenshot 2023-10-23 at 9 33 27 AM](https://github.com/Shopify/polaris/assets/36676/a1c51eb0-e0f7-4c21-9c15-c2aa4c22d0f9) Radio in web ![Screenshot 2023-10-24 at 1 13 51 PM](https://github.com/Shopify/polaris/assets/36676/3bf9bbee-569a-4e1e-b281-8049d0f02ebe) Checkbox <img width="571" alt="Screenshot 2023-10-26 at 11 03 40 AM" src="https://github.com/Shopify/polaris/assets/36676/0d5e197a-488b-418b-b698-7d4ad14771b4"> hover <img width="570" alt="Screenshot 2023-10-26 at 11 10 51 AM" src="https://github.com/Shopify/polaris/assets/36676/eb37c2df-1545-45b8-a1a4-83f51cd5c1cb"> checked <img width="573" alt="Screenshot 2023-10-26 at 11 03 59 AM" src="https://github.com/Shopify/polaris/assets/36676/20360362-effe-4982-b382-1a1f70670932"> ### How to 🎩 🖥 [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) - Added a new story in Storybook for showing the variant. ### 🎩 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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] N/A Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

@matallo

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 main, this PR will be updated. # Releases ## @shopify/polaris@12.1.0 ### Minor Changes - [Shopify#10819](Shopify#10819) [`460c48cfa`](Shopify@0bf9c03) Thanks [@matallo](https://github.com/matallo)! - - Added `tone` prop with `magic` value to `TextField` - Added `tone` prop with `magic` value to `ChoiceList` - Added `tone` prop with `magic` value to `Checkbox` ### Patch Changes - [Shopify#11079](Shopify#11079) [`9c0433c02`](Shopify@5ee40d5) Thanks [@kyledurand](https://github.com/kyledurand)! - Added tests for destructive mapping in `Page` and `Modal` - [Shopify#11081](Shopify#11081) [`c0be502a8`](Shopify@d500f53) Thanks [@kyledurand](https://github.com/kyledurand)! - Updated Page titleMetadata documentation ## polaris.shopify.com@0.60.3 ### Patch Changes - [Shopify#11083](Shopify#11083) [`54dcc984b`](Shopify@2513d17) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed typos in Design > Icons section created from MDX layout refactor - Updated dependencies \[[`460c48cfa`](Shopify@0bf9c03), [`9c0433c02`](Shopify@5ee40d5), [`c0be502a8`](Shopify@d500f53)]: - @shopify/polaris@12.1.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### 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 Shopify#10152 ### WHAT is this pull request doing? This is a followup of Shopify#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](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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 a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

matallo changed the title ~~Sidekick forms~~ [WIP] Sidekick forms Oct 3, 2023

matallo force-pushed the matallo/sidekick-forms branch 4 times, most recently from 0eb5d7b to b5af474 Compare October 11, 2023 20:16

matallo changed the title ~~[WIP] Sidekick forms~~ [WIP] Add styles for AI generated values to Text field Oct 11, 2023

matallo changed the title ~~[WIP] Add styles for AI generated values to Text field~~ [WIP] [TextField] Add styles for AI generated values Oct 11, 2023

matallo force-pushed the matallo/sidekick-forms branch 2 times, most recently from 47c497d to b553148 Compare October 13, 2023 18:38

matallo force-pushed the matallo/sidekick-forms branch from b553148 to 30620d8 Compare October 23, 2023 16:32

matallo changed the title ~~[WIP] [TextField] Add styles for AI generated values~~ [TextField] Add styles for AI generated values Oct 23, 2023

matallo marked this pull request as ready for review October 23, 2023 16:33

matallo force-pushed the matallo/sidekick-forms branch from 30620d8 to e450744 Compare October 23, 2023 18:24

kyledurand reviewed Oct 24, 2023

View reviewed changes

.changeset/fair-eggs-cross.md Outdated Show resolved Hide resolved

matallo force-pushed the matallo/sidekick-forms branch 2 times, most recently from d9c56d9 to 5dfd7a4 Compare October 24, 2023 20:05

matallo changed the title ~~[TextField] Add styles for AI generated values~~ [TextField, ChoiceList] Add styles for AI generated values Oct 24, 2023

matallo force-pushed the matallo/sidekick-forms branch 2 times, most recently from 0802eef to 4e9794f Compare October 24, 2023 20:59

sarahill self-requested a review October 24, 2023 21:04

matallo force-pushed the matallo/sidekick-forms branch 2 times, most recently from ada46a2 to b0cf4fe Compare October 24, 2023 21:20

matallo force-pushed the matallo/sidekick-forms branch from b0cf4fe to 7323d98 Compare October 24, 2023 21:39

lone-star reviewed Oct 25, 2023

View reviewed changes

polaris-react/src/components/Choice/Choice.scss Show resolved Hide resolved

matallo force-pushed the matallo/sidekick-forms branch from a248d5d to 3118dcd Compare October 27, 2023 22:03

kyledurand reviewed Oct 30, 2023

View reviewed changes

matallo added 5 commits October 30, 2023 11:38

[TextField] Add styles for AI generated values

3f92d70

[Radio] Add styles for AI generated values

9e0b675

[Checkbox] Add styles for AI generated values

44b9401

Add stories

9c1f7ab

Changeset

9ab63d7

PR changes

f67eb0b

matallo force-pushed the matallo/sidekick-forms branch from 3118dcd to f67eb0b Compare October 31, 2023 13:49

sarahill approved these changes Oct 31, 2023

View reviewed changes

kyledurand approved these changes Nov 1, 2023

View reviewed changes

matallo merged commit 460c48c into main Nov 1, 2023

matallo deleted the matallo/sidekick-forms branch November 1, 2023 22:24

shopify-github-actions-access bot mentioned this pull request Nov 1, 2023

Version Packages #11084

Merged

matallo mentioned this pull request Nov 22, 2023

[Select, Text] Add magic tone #11219

Merged

6 tasks

matallo mentioned this pull request Jan 18, 2024

[RangeSlider] Add magic tone #11472

Closed

6 tasks

[TextField, Radio, Checkbox] Add styles for AI generated values #10819

[TextField, Radio, Checkbox] Add styles for AI generated values #10819

Uh oh!

Conversation

matallo commented Oct 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

kyledurand left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sarahill commented Oct 24, 2023

Uh oh!

jonrundle commented Oct 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matallo commented Oct 24, 2023

Uh oh!

sarahill commented Oct 24, 2023

Uh oh!

sarahill commented Oct 24, 2023

Uh oh!

jonrundle commented Oct 25, 2023

Uh oh!

Uh oh!

kyledurand left a comment

Choose a reason for hiding this comment

Uh oh!

jonrundle commented Oct 30, 2023

Uh oh!

matallo commented Oct 30, 2023

Uh oh!

sarahill commented Oct 30, 2023

Uh oh!

sarahill commented Oct 30, 2023

Uh oh!

matallo commented Oct 31, 2023

Uh oh!

sarahill left a comment

Choose a reason for hiding this comment

Uh oh!

matallo commented Oct 31, 2023

Uh oh!

github-actions bot commented Oct 31, 2023

Uh oh!

kyledurand left a comment

Choose a reason for hiding this comment

Uh oh!

jonrundle commented Nov 1, 2023

Uh oh!

Uh oh!

matallo commented Oct 3, 2023 •

edited

Loading

jonrundle commented Oct 24, 2023 •

edited

Loading