Skip to content

Commit

Permalink
[Thumbnail] Consolidate conditional logic (Shopify#10171)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Fixes Shopify#9973

### WHAT is this pull request doing?

* Consolidate se23 logic and styles for the `Thumbnail` Component

### How to 🎩
* Compare production and this PR's chromatic storybook to make sure
styles are the same


[Production](https://storybook.polaris.shopify.com/?path=/story/all-components-thumbnail--all&globals=polarisSummerEditions2023:true)
[This PR]()
  • Loading branch information
sophschneider authored Aug 23, 2023
1 parent 8340561 commit 7ae7c4a
Showing 1 changed file with 18 additions and 28 deletions.
46 changes: 18 additions & 28 deletions polaris-react/src/components/Thumbnail/Thumbnail.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,31 @@
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
min-width: var(--pc-thumbnail-extra-small-size);
max-width: 100%;
border-radius: var(--p-border-radius-1);
border: var(--p-border-width-1) solid var(--p-color-border-subdued);
border-radius: var(--p-border-radius-2);

#{$se23} & {
&::after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
border-radius: var(--p-border-radius-2);
border: none;

&::after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
border-radius: var(--p-border-radius-2);
box-shadow: var(--p-shadow-border-inset-experimental);
}

&.sizeExtraSmall,
&.sizeExtraSmall::after {
border-radius: var(--p-border-radius-1_5-experimental);
}
box-shadow: var(--p-shadow-border-inset-experimental);
display: block;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
padding-bottom: 100%;
}

&::before {
content: '';
display: block;
// stylelint-disable-next-line -- SE23 styling
padding-bottom: 100%;
}
&.sizeExtraSmall,
&.sizeExtraSmall::after {
border-radius: var(--p-border-radius-1_5-experimental);
}

&::after {
&::before {
content: '';
display: block;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
// stylelint-disable-next-line -- SE23 styling
padding-bottom: 100%;
}
}
Expand Down

0 comments on commit 7ae7c4a

Please sign in to comment.