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

Reduce font size of helper, error, and footer text #11878

Closed
wants to merge 3 commits into from

Conversation

sam-b-rose
Copy link
Member

@sam-b-rose sam-b-rose commented Apr 11, 2024

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1567

The helper, error, and footer text are currently very large on mobile screens. This clashes with the native mobile styles when viewed on webviews.

WHAT is this pull request doing?

Bumping down the text size of the following components will help bring the text hierarchy closer to mobile.

📸 See Chromatic for all component diffs.
🌀 Spin link

Note

This is changing the text variation from bodyMd to bodySm. However, Polaris Mobile uses mostly bodyMd paired with bodyXs. We could consider also using bodyXs or perhaps mobile could upshift to bodySm.

Example screenshot

Screenshot 2024-04-10 at 9 26 02 PM

Example of mobile radio input

Screenshot 2024-04-10 at 9 28 21 PM

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@sam-b-rose
Copy link
Member Author

/snapit

Copy link
Contributor

🫰✨ Thanks @sam-b-rose! Your snapshots have been published to npm.

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

"@shopify/polaris": "0.0.0-snapshot-20240411104329",
"polaris.shopify.com": "0.0.0-snapshot-20240411104329"

@sam-b-rose sam-b-rose mentioned this pull request Apr 11, 2024
@sam-b-rose sam-b-rose changed the title Reduce font size of helper, error, and footer text [Prototype] Reduce font size of helper, error, and footer text Apr 11, 2024
@sam-b-rose sam-b-rose marked this pull request as draft April 11, 2024 13:24
@github-actions github-actions bot added the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label Apr 19, 2024
Co-authored-by: Laura Griffee <laura@mailzone.com>
@github-actions github-actions bot removed the cla-needed Added by a bot. Contributor needs to sign the CLA Agreement. label May 6, 2024
@lgriffee lgriffee requested a review from aveline May 6, 2024 15:26
@lgriffee lgriffee marked this pull request as ready for review May 6, 2024 16:28
@lgriffee lgriffee changed the title [Prototype] Reduce font size of helper, error, and footer text Reduce font size of helper, error, and footer text May 6, 2024
@lgriffee lgriffee added the #gsd:40396 WebView infrastructure - Forms and Polaris label May 7, 2024
@aveline
Copy link
Contributor

aveline commented May 9, 2024

closing duplicate

@aveline aveline 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

4 participants