-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use semantic
Text
component for component typography (#11547)
Closes https://github.com/Shopify/polaris-internal/issues/1483 This PR replaces seeks to reduce the need to semantic CSS custom properties for typography by: - Replacing font styles with the semantic `Text` equivalent - Remove typography overrides (i.e., `LegacyCard`) - Remove semantic typography tokens from `Text` - **Why?** Using the semantic tokens doesn't support responsive typography The goal is to allow the `Text` component to apply semantic type styles rather using CSS custom properties. Using the theme and CSS tokens should be a last resort for styling. Using components to compose styles reduces the surface area of maintenance and the likelihood of implementation bugs. ### WHAT is this pull request doing? - Adds `base`, `inherit`, and `text-inverse-secondary` tones to `Text` component - Uses the `Text` component to apply typography styles for Polaris components where possible - Updates the `@shopify/stylelint-polaris` rule to include the following as a warning in the property disallow list: - `font-size` - `font-weight` - `line-height` - `letter-spacing` - Adds a page on polaris.shopify.com for the `typography/property-disallow-list` rule #### Components updated - `BulkActions` - `CheckableButton` - `DropZone` - `FooterHelp` - `Frame` - `Toast` - `InlineError` - `IndexFilters` - `IndexTable` - `Label` - `MediaCard` - `LegacyCard` - `Navigation` - `Page` - `Select` - `SelectAllActoins` - `SkeletonPage` - `Tabs` - `Text` (added `base`, `inherit`, and `text-inverse-secondary` tone) - `TextField` - `TopBar/UserMenu` #### Stylelint rule in-action https://github.com/Shopify/polaris/assets/11774595/d60c3c77-022d-4799-b2ea-5309a8b96bbb #### New docs page for Stylelint rule <img width="822" alt="Screenshot 2024-03-21 at 3 53 01 PM" src="https://github.com/Shopify/polaris/assets/11774595/6d28281d-0efc-4961-8319-aadd6b5967e5"> ### How to 🎩 🖥 [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) - [ ] 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) - [ ] 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
- Loading branch information
1 parent
86a6ba4
commit df52763
Showing
106 changed files
with
1,388 additions
and
1,115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/polaris': minor | ||
--- | ||
|
||
Applied semantic type styles using the `Text` component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/polaris': minor | ||
--- | ||
|
||
Added `base`,`inherit`, `disabled`, and `text-inverse` tone options for Text component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'polaris.shopify.com': patch | ||
--- | ||
|
||
Added page for `typography/property-disallow-list` Stylelint rule |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/stylelint-polaris': minor | ||
--- | ||
|
||
Added warning for `font-size`, `line-height`, and `font-weight` properties. Use the `Text` component as a preferred option. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@shopify/polaris': minor | ||
--- | ||
|
||
Updated plain/monochrome Button text size to bodySm for micro |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.