From af6f5aff18f6d5d416f53570aadee028e4cddaa2 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 16:18:50 -0400 Subject: [PATCH 1/7] [polaris.shopify.com][Text] Update token references in variants table --- .../content/components/typography/text.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/polaris.shopify.com/content/components/typography/text.md b/polaris.shopify.com/content/components/typography/text.md index db24482f14d..9b29aa6170b 100644 --- a/polaris.shopify.com/content/components/typography/text.md +++ b/polaris.shopify.com/content/components/typography/text.md @@ -68,15 +68,15 @@ Each variant uses a predetermined combination of the [font tokens](/tokens/font) | Variant | Font size token | px value | rem value | Font line height token | Font weight token | Reponsive | | ------------ | ------------------- | -------- | --------- | ---------------------- | -------------------------- | --------- | -| `heading3xl` | `--p-font-size-600` | 32 | 2 | `--p-line-height-6` | `--p-font-weight-semibold` | Yes | -| `heading2xl` | `--p-font-size-500` | 28 | 1.75 | `--p-line-height-5` | `--p-font-weight-semibold` | Yes | -| `headingXl` | `--p-font-size-400` | 24 | 1.5 | `--p-line-height-4` | `--p-font-weight-semibold` | Yes | -| `headingLg` | `--p-font-size-300` | 20 | 1.25 | `--p-line-height-3` | `--p-font-weight-semibold` | Yes | -| `headingMd` | `--p-font-size-200` | 16 | 1 | `--p-line-height-3` | `--p-font-weight-semibold` | No | -| `headingSm` | `--p-font-size-100` | 14 | 0.875 | `--p-line-height-2` | `--p-font-weight-semibold` | No | -| `bodyLg` | `--p-font-size-200` | 16 | 1 | `--p-line-height-2` | `--p-font-weight-regular` | No | -| `bodyMd` | `--p-font-size-100` | 14 | 0.875 | `--p-line-height-2` | `--p-font-weight-regular` | No | -| `bodySm` | `--p-font-size-75` | 12 | 0.75 | `--p-line-height-1` | `--p-font-weight-regular` | No | +| `heading3xl` | `--p-font-size-900` | 36 | 2.25 | `--p-line-height-1000` | `--p-font-weight-bold` | Yes | +| `heading2xl` | `--p-font-size-750` | 30 | 1.875 | `--p-line-height-800` | `--p-font-weight-bold` | Yes | +| `headingXl` | `--p-font-size-600` | 24 | 1.5 | `--p-line-height-700` | `--p-font-weight-bold` | Yes | +| `headingLg` | `--p-font-size-500` | 20 | 1.25 | `--p-line-height-600` | `--p-font-weight-bold` | Yes | +| `headingMd` | `--p-font-size-400` | 16 | 1 | `--p-line-height-600` | `--p-font-weight-semibold` | No | +| `headingSm` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-semibold` | No | +| `bodyLg` | `--p-font-size-400` | 16 | 1 | `--p-line-height-500` | `--p-font-weight-regular` | No | +| `bodyMd` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-regular` | No | +| `bodySm` | `--p-font-size-300` | 12 | 0.75 | `--p-line-height-400` | `--p-font-weight-regular` | No | --- From 6bf4afbf0e79bb3c88bcd16f3cd14e5b97c15f64 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 16:19:54 -0400 Subject: [PATCH 2/7] Add changeset --- .changeset/weak-turkeys-relate.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-turkeys-relate.md diff --git a/.changeset/weak-turkeys-relate.md b/.changeset/weak-turkeys-relate.md new file mode 100644 index 00000000000..7559023fc69 --- /dev/null +++ b/.changeset/weak-turkeys-relate.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Updated references to font tokens from Polaris v11 to v12 in `Text` component documentation From 98ba94b79f72ac858e1241d9e974f3e2d1027c11 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 18:34:40 -0400 Subject: [PATCH 3/7] [polaris.shopify.com][Text] Update references to font tokens for variants Co-authored-by: Sara Hill --- .../content/components/typography/text.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/polaris.shopify.com/content/components/typography/text.md b/polaris.shopify.com/content/components/typography/text.md index 9b29aa6170b..a3374badfdd 100644 --- a/polaris.shopify.com/content/components/typography/text.md +++ b/polaris.shopify.com/content/components/typography/text.md @@ -68,14 +68,14 @@ Each variant uses a predetermined combination of the [font tokens](/tokens/font) | Variant | Font size token | px value | rem value | Font line height token | Font weight token | Reponsive | | ------------ | ------------------- | -------- | --------- | ---------------------- | -------------------------- | --------- | -| `heading3xl` | `--p-font-size-900` | 36 | 2.25 | `--p-line-height-1000` | `--p-font-weight-bold` | Yes | -| `heading2xl` | `--p-font-size-750` | 30 | 1.875 | `--p-line-height-800` | `--p-font-weight-bold` | Yes | -| `headingXl` | `--p-font-size-600` | 24 | 1.5 | `--p-line-height-700` | `--p-font-weight-bold` | Yes | +| `heading3xl` | `--p-font-size-900` | 36 | 2.25 | `--p-line-height-1200` | `--p-font-weight-bold` | Yes | +| `heading2xl` | `--p-font-size-750` | 30 | 1.875 | `--p-line-height-1000` | `--p-font-weight-bold` | Yes | +| `headingXl` | `--p-font-size-600` | 24 | 1.5 | `--p-line-height-800` | `--p-font-weight-bold` | Yes | | `headingLg` | `--p-font-size-500` | 20 | 1.25 | `--p-line-height-600` | `--p-font-weight-bold` | Yes | -| `headingMd` | `--p-font-size-400` | 16 | 1 | `--p-line-height-600` | `--p-font-weight-semibold` | No | -| `headingSm` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-semibold` | No | -| `bodyLg` | `--p-font-size-400` | 16 | 1 | `--p-line-height-500` | `--p-font-weight-regular` | No | -| `bodyMd` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-regular` | No | +| `headingMd` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-semibold` | No | +| `headingSm` | `--p-font-size-325` | 13 | 0.8125 | `--p-line-height-500` | `--p-font-weight-semibold` | No | +| `bodyLg` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-regular` | No | +| `bodyMd` | `--p-font-size-325` | 13 | 0.8125 | `--p-line-height-500` | `--p-font-weight-regular` | No | | `bodySm` | `--p-font-size-300` | 12 | 0.75 | `--p-line-height-400` | `--p-font-weight-regular` | No | --- From 6dbce23ed43eeee8c3c625491daa4b8ba10ee75f Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 18:49:00 -0400 Subject: [PATCH 4/7] [polaris.shopify.com][Text] Add docs for `bodySm` variant Co-authored-by: Sara Hill --- polaris.shopify.com/content/components/typography/text.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/typography/text.md b/polaris.shopify.com/content/components/typography/text.md index a3374badfdd..ebd3e6f391d 100644 --- a/polaris.shopify.com/content/components/typography/text.md +++ b/polaris.shopify.com/content/components/typography/text.md @@ -71,12 +71,13 @@ Each variant uses a predetermined combination of the [font tokens](/tokens/font) | `heading3xl` | `--p-font-size-900` | 36 | 2.25 | `--p-line-height-1200` | `--p-font-weight-bold` | Yes | | `heading2xl` | `--p-font-size-750` | 30 | 1.875 | `--p-line-height-1000` | `--p-font-weight-bold` | Yes | | `headingXl` | `--p-font-size-600` | 24 | 1.5 | `--p-line-height-800` | `--p-font-weight-bold` | Yes | -| `headingLg` | `--p-font-size-500` | 20 | 1.25 | `--p-line-height-600` | `--p-font-weight-bold` | Yes | +| `headingLg` | `--p-font-size-500` | 20 | 1.25 | `--p-line-height-600` | `--p-font-weight-semibold` | Yes | | `headingMd` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-semibold` | No | | `headingSm` | `--p-font-size-325` | 13 | 0.8125 | `--p-line-height-500` | `--p-font-weight-semibold` | No | | `bodyLg` | `--p-font-size-350` | 14 | 0.875 | `--p-line-height-500` | `--p-font-weight-regular` | No | | `bodyMd` | `--p-font-size-325` | 13 | 0.8125 | `--p-line-height-500` | `--p-font-weight-regular` | No | | `bodySm` | `--p-font-size-300` | 12 | 0.75 | `--p-line-height-400` | `--p-font-weight-regular` | No | +| `bodyXs` | `--p-font-size-275` | 11 | 0.6875 | `--p-line-height-300` | `--p-font-weight-regular` | No | --- From 180e79289caafb761f1b24be3e89d2b1988c7b3d Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 18:56:44 -0400 Subject: [PATCH 5/7] [Text] Add support for `bodyXs` variant --- polaris-react/src/components/Text/Text.scss | 6 ++++++ polaris-react/src/components/Text/Text.stories.tsx | 3 +++ polaris-react/src/components/Text/Text.tsx | 1 + polaris.shopify.com/pages/examples/text-body.tsx | 8 ++++++-- 4 files changed, 16 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss index f584cfaaf3a..2ab2db04757 100644 --- a/polaris-react/src/components/Text/Text.scss +++ b/polaris-react/src/components/Text/Text.scss @@ -120,6 +120,12 @@ @include _heading3xl; } +.bodyXs { + font-size: var(--p-text-body-xs-font-size); + font-weight: var(--p-text-body-xs-font-weight); + line-height: var(--p-text-body-xs-font-line-height); +} + .bodySm { font-size: var(--p-text-body-sm-font-size); font-weight: var(--p-text-body-sm-font-weight); diff --git a/polaris-react/src/components/Text/Text.stories.tsx b/polaris-react/src/components/Text/Text.stories.tsx index b6f1cd991c7..a9651b404ca 100644 --- a/polaris-react/src/components/Text/Text.stories.tsx +++ b/polaris-react/src/components/Text/Text.stories.tsx @@ -35,6 +35,9 @@ export const Variants = () => ( Text with BodySm variant + + Text with BodyXs variant + Text as a strong tag diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx index feb6f8c38a6..cde97c8b899 100644 --- a/polaris-react/src/components/Text/Text.tsx +++ b/polaris-react/src/components/Text/Text.tsx @@ -26,6 +26,7 @@ type Variant = | 'headingXl' | 'heading2xl' | 'heading3xl' + | 'bodyXs' | 'bodySm' | 'bodyMd' | 'bodyLg'; diff --git a/polaris.shopify.com/pages/examples/text-body.tsx b/polaris.shopify.com/pages/examples/text-body.tsx index 7d85c14047d..876378ff850 100644 --- a/polaris.shopify.com/pages/examples/text-body.tsx +++ b/polaris.shopify.com/pages/examples/text-body.tsx @@ -9,14 +9,18 @@ function TextExample() { Shopify POS is the easiest way to sell your products in person. Available for iPad, iPhone, and Android. -

+ Shopify POS is the easiest way to sell your products in person. Available for iPad, iPhone, and Android. -

+ Shopify POS is the easiest way to sell your products in person. Available for iPad, iPhone, and Android. + + Shopify POS is the easiest way to sell your products in person. + Available for iPad, iPhone, and Android. + ); } From 139c762f57e7468259eddef44d9750491131fda7 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 18:57:59 -0400 Subject: [PATCH 6/7] [Text] Fix font weight for `headingLg` variant --- polaris-react/src/components/Text/Text.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss index 2ab2db04757..216846ff54d 100644 --- a/polaris-react/src/components/Text/Text.scss +++ b/polaris-react/src/components/Text/Text.scss @@ -75,7 +75,7 @@ .headingLg { font-size: var(--p-font-size-500); line-height: var(--p-font-line-height-600); - font-weight: var(--p-font-weight-bold); + font-weight: var(--p-font-weight-semibold); @media (--p-breakpoints-md-up) { font-size: var(--p-text-heading-lg-font-size); From 552135d05d987daf5ee6407e09ad9cb90433e02d Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 2 Nov 2023 18:58:05 -0400 Subject: [PATCH 7/7] Update changeset --- .changeset/weak-turkeys-relate.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/weak-turkeys-relate.md b/.changeset/weak-turkeys-relate.md index 7559023fc69..d9205166250 100644 --- a/.changeset/weak-turkeys-relate.md +++ b/.changeset/weak-turkeys-relate.md @@ -1,5 +1,7 @@ --- +'@shopify/polaris': minor 'polaris.shopify.com': patch --- +Added support for `bodyXs` variant and fixed font weight for `headingLg` variant in `Text` component. Updated references to font tokens from Polaris v11 to v12 in `Text` component documentation