Skip to content

Commit

Permalink
[Tag] Consolidate se23 styles (Shopify#10141)
Browse files Browse the repository at this point in the history 
### WHY are these changes introduced?

Resolves Shopify#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
  • Loading branch information
@laurkim
laurkim authored Aug 21, 2023
1 parent 4f1dd17 commit 706c889
Showing 1 changed file with 50 additions and 127 deletions.
177 changes: 50 additions & 127 deletions polaris-react/src/components/Tag/Tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -27,118 +28,77 @@ $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 {
background: var(--p-color-bg-disabled);
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;
vertical-align: middle;

@media #{$p-breakpoints-sm-up} {
font-size: var(--p-font-size-75);
padding: var(--p-space-05) 0;
}

#{$se23} & {
min-height: $height;
padding: 0;
}
}

Expand All @@ -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
Expand All @@ -177,72 +146,34 @@ $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);
}
}
}

.Link {
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
Expand All @@ -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);
}
}

0 comments on commit 706c889

Please sign in to comment.