Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Checkbox styling for mobile webview #11892

Closed

Conversation

lilywuyanru
Copy link

@lilywuyanru lilywuyanru commented Apr 15, 2024

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1580
Fixes #33786

Caution

Basing this PR off of #11896 (which is also based off #11837) and will not merge until that ships.

Figma link

Update checkbox styling for mobile webviews

  • when breakpoint is below md, update border to 1px
  • change customized icon to Polaris CheckIcon
  • keeps 4px border radius
  • when breakpoint is below md, change checkbox size from 18px to 20px

Unchecked

Before After
Screenshot 2024-04-15 at 4 40 16 PM Screenshot 2024-05-07 at 2 27 52 PM

Checked

Before After
Screenshot 2024-04-15 at 4 41 22 PM Screenshot 2024-05-07 at 2 28 00 PM

WHAT is this pull request doing?

How to 🎩

Tip

Make sure you have the breakpoint in storybook at sm or xs to see the changes

Before Storybook
After Storybook

🎩 checklist

@lgriffee lgriffee added the #gsd:40396 WebView infrastructure - Forms and Polaris label Apr 15, 2024
@lilywuyanru lilywuyanru marked this pull request as ready for review April 15, 2024 20:45
@lilywuyanru lilywuyanru changed the title Update checkbox styling for mobile webviews [Prototype] Update checkbox styling for mobile webviews Apr 15, 2024
@lgriffee lgriffee mentioned this pull request Apr 17, 2024
@lgriffee lgriffee force-pushed the lw/update-checkbox-for-mobile branch 2 times, most recently from 7a11e8f to bcdc37c Compare April 19, 2024 18:39
@github-actions github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024
@translation-platform
Copy link
Contributor

Localization quality issues found

The following issues may affect the quality of localized translations if they are not addressed:

  • The value Clear for key Polaris.ActionList.SearchField.clearButtonLabel is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
  • The value Search for key Polaris.ActionList.SearchField.search is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
  • The value Search actions for key Polaris.ActionList.SearchField.placeholder is very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.

Please look out for other instances of this issue in your PR and fix them as well if possible.

Questions about these messages? Hop in the #help-localization Slack channel.

@lilywuyanru lilywuyanru changed the title [Prototype] Update checkbox styling for mobile webviews Update checkbox styling for mobile webview May 7, 2024
@lilywuyanru lilywuyanru changed the base branch from main to choicelist-mobile-alignment May 7, 2024 17:41
@lilywuyanru lilywuyanru removed the request for review from alex-page May 7, 2024 17:41
@lilywuyanru lilywuyanru force-pushed the lw/update-checkbox-for-mobile branch from 1daed9b to 2571926 Compare May 7, 2024 17:46
@github-actions github-actions bot removed the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label May 7, 2024
@lilywuyanru lilywuyanru changed the title Update checkbox styling for mobile webview Update Checkbox styling for mobile webview May 7, 2024
@lilywuyanru lilywuyanru requested a review from aveline May 7, 2024 17:50
@lilywuyanru lilywuyanru force-pushed the lw/update-checkbox-for-mobile branch 3 times, most recently from 1bbc4cc to 3b506a6 Compare May 8, 2024 13:46
@lilywuyanru lilywuyanru force-pushed the lw/update-checkbox-for-mobile branch from 3b506a6 to 383cc29 Compare May 8, 2024 14:12
Copy link
Member

@lgriffee lgriffee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🎉🚢✨💯

'@shopify/polaris': minor
---

Update `Checkbox` styling to improve mobile consistency
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Update `Checkbox` styling to improve mobile consistency
Updated `Checkbox` styling to improve mobile consistency

@@ -211,7 +190,11 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
!isIndeterminate && styles.animated,
)}
>
{isIndeterminate ? <Icon source={MinusIcon} /> : iconSource}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By replacing this icon we are removing the checkbox icon animation that was added for the new design language, just wanted to confirm this is intentional @heyjoethomas?

@lilywuyanru lilywuyanru closed this May 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:40396 WebView infrastructure - Forms and Polaris
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants