From 8d82cc43590558db3de987698f754a3ad35c8cb9 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Mon, 21 Aug 2023 13:28:04 -0400 Subject: [PATCH] [Tag] Consolidate se23 styles (#10141) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Resolves #9970. ### WHAT is this pull request doing? Consolidates se23 beta styles for `Tag`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-mobppokpoq.chromatic.com/?path=/story/all-components-tag--default) [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-tag--default&globals=polarisSummerEditions2023:true) 🖥 [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) ### 🎩 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) - [ ] 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 --- polaris-react/src/components/Tag/Tag.scss | 177 ++++++---------------- 1 file changed, 50 insertions(+), 127 deletions(-) diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss index 399647a833e..d445c2b56ba 100644 --- a/polaris-react/src/components/Tag/Tag.scss +++ b/polaris-react/src/components/Tag/Tag.scss @@ -7,10 +7,11 @@ $button-size: 20px; display: inline-flex; max-width: 100%; align-items: center; - min-height: 28px; - padding: 0 var(--p-space-2); + min-height: $height; + padding: 0; + padding-inline: calc(var(--p-space-1) + var(--p-space-05)); background-color: var(--p-color-bg-strong); - border-radius: var(--p-border-radius-1); + border-radius: var(--p-border-radius-2); color: var(--p-color-text); &.disabled { @@ -27,28 +28,27 @@ $button-size: 20px; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include unstyled-button; cursor: pointer; - padding: var(--p-space-1) var(--p-space-2); + padding: 0 calc(var(--p-space-1) + var(--p-space-05)); background-color: var(--p-color-bg-strong); outline: var(--p-border-width-1) solid transparent; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - font-size: 13px; - line-height: var(--p-font-line-height-2); + font-size: var(--p-font-size-80-experimental); + line-height: var(--p-font-line-height-1); &:hover { background: var(--p-color-bg-strong-hover); } // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; - // stylelint-disable selector-max-specificity -- generated by polaris-migrator DO NOT COPY + @include focus-ring($size: 'wide'); + // stylelint-disable-next-line selector-max-specificity -- use focus-ring mixin &:focus-visible:not(:active) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($style: 'focused'); } &:active { - background: var(--p-color-bg-strong-hover); + background: var(--p-color-bg-strong-active); } &:disabled { @@ -56,76 +56,42 @@ $button-size: 20px; cursor: default; pointer-events: none; color: var(--p-color-text-disabled); - - #{$se23} & { - border: var(--p-border-width-1) solid var(--p-color-border-strong); - } + border: var(--p-border-width-1) solid var(--p-color-border-strong); } @media #{$p-breakpoints-sm-up} { - padding: var(--p-space-05) var(--p-space-2); font-size: var(--p-font-size-75); } - - #{$se23} & { - /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */ - @include focus-ring($size: 'wide'); - line-height: var(--p-font-line-height-1); - padding: 0 calc(var(--p-space-1) + var(--p-space-05)); - - &:hover { - background: var(--p-color-bg-strong-hover); - } - - &:active { - background: var(--p-color-bg-strong-active); - } - } - } - - &.removable { - padding-right: 0; } &.linkable { padding: 0; + padding-inline: calc(var(--p-space-1) + var(--p-space-05)); - #{$se23} & { - &:hover { - background: var(--p-color-bg-strong-hover); - } + &:hover { + background: var(--p-color-bg-strong-hover); + } - &:active { - background: var(--p-color-bg-strong-active); - } + &:active { + background: var(--p-color-bg-strong-active); } } - #{$se23} & { - min-height: $height; - border-radius: var(--p-border-radius-2); - padding-inline: calc(var(--p-space-1) + var(--p-space-05)); - - &.removable { - padding-inline-end: 0; - } + &.removable { + padding-right: 0; + padding-inline-end: 0; } @media #{$p-breakpoints-sm-up} { - min-height: 24px; - - #{$se23} & { - min-height: $height; - } + min-height: $height; } } .TagText { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - font-size: 13px; + font-size: var(--p-font-size-80-experimental); line-height: var(--p-font-line-height-2); min-height: $height; - padding: var(--p-space-1) 0; + padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -133,12 +99,6 @@ $button-size: 20px; @media #{$p-breakpoints-sm-up} { font-size: var(--p-font-size-75); - padding: var(--p-space-05) 0; - } - - #{$se23} & { - min-height: $height; - padding: 0; } } @@ -147,22 +107,31 @@ $button-size: 20px; @include unstyled-button; display: block; flex-shrink: 0; - height: $button-size; - width: $button-size; - margin: 0 var(--p-space-1); - border-radius: var(--p-border-radius-full); + height: 18px; + width: 18px; + margin: var(--p-space-025); + margin-left: var(--p-space-05); + // stylelint-disable-next-line polaris/border/declaration-property-unit-disallowed-list -- override border-radius + border-radius: 7px; + color: var(--p-color-icon-subdued); svg { - fill: var(--p-color-icon); + fill: currentColor; } &:hover { background: var(--p-color-bg-strong-hover); + color: var(--p-color-icon-primary); outline: var(--p-border-width-1) solid transparent; } // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; + @include focus-ring($size: 'wide'); + + &:focus-visible { + background: var(--p-color-bg-strong-hover); + color: var(--p-color-icon-primary); + } &:focus-visible:not(:active) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -177,38 +146,9 @@ $button-size: 20px; cursor: default; pointer-events: none; - svg { - fill: var(--p-color-icon-disabled); - } - } - - &.segmented { - margin-left: calc(-1 * var(--p-space-1)); - } - - #{$se23} & { - /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */ - @include focus-ring($size: 'wide'); - /* stylelint-disable-next-line polaris/border/declaration-property-unit-disallowed-list -- se23 */ - border-radius: 7px; - margin: var(--p-space-025); - margin-left: var(--p-space-05); - width: 18px; - height: 18px; - color: var(--p-color-icon-subdued); - - &:hover { - color: var(--p-color-icon-primary); - } - /* stylelint-disable-next-line selector-max-combinators -- se23 */ svg { fill: currentColor; } - - &:focus-visible { - background: var(--p-color-bg-strong-hover); - color: var(--p-color-icon-primary); - } } } @@ -216,33 +156,24 @@ $button-size: 20px; display: inline-grid; color: var(--p-color-text); outline: none; - border-radius: var(--p-border-radius-1); + border-radius: var(--p-border-radius-2); text-decoration: none; min-height: $height; - padding: 0 var(--p-space-2); + padding: 0; .LinkText { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include truncate; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - font-size: 13px; + font-size: var(--p-font-size-80-experimental); line-height: var(--p-font-line-height-2); - padding-top: var(--p-space-1); - padding-bottom: var(--p-space-1); @media #{$p-breakpoints-sm-up} { font-size: var(--p-font-size-75); - padding-top: var(--p-space-05); - padding-bottom: var(--p-space-05); - } - - #{$se23} & { - padding: 0; } } // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; + @include focus-ring('wide'); &:focus-visible:not(:active) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -265,24 +196,16 @@ $button-size: 20px; } } - #{$se23} & { - /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */ - @include focus-ring('wide'); - border-radius: var(--p-border-radius-2); - padding: 0; - - &:active { - background: var(--p-color-bg-strong-active); - } + &:active { + background: var(--p-color-bg-strong-active); } } -#{$se23} { - .linkable.removable:hover { - background: var(--p-color-bg-strong-hover); - /* stylelint-disable-next-line selector-max-class, selector-max-combinators -- se23 */ - .Button { - background: var(--p-color-bg-strong-active); - } +.linkable.removable:hover { + background: var(--p-color-bg-strong-hover); + + // stylelint-disable-next-line selector-max-class, selector-max-specificity -- override Button background color + .Button { + background: var(--p-color-bg-strong-active); } }