Skip to content

Commit cd2f41d

Browse files
committed
[Thumbnail] Consolidate conditional logic (#10171)
### WHY are these changes introduced? Fixes #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]()
1 parent 45baeb5 commit cd2f41d

File tree

1 file changed

+18
-28
lines changed

1 file changed

+18
-28
lines changed

polaris-react/src/components/Thumbnail/Thumbnail.scss

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,41 +14,31 @@
1414
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
1515
min-width: var(--pc-thumbnail-extra-small-size);
1616
max-width: 100%;
17-
border-radius: var(--p-border-radius-1);
18-
border: var(--p-border-width-1) solid var(--p-color-border-subdued);
17+
border-radius: var(--p-border-radius-2);
1918

20-
#{$se23} & {
19+
&::after {
20+
content: '';
21+
top: 0;
22+
left: 0;
23+
right: 0;
24+
bottom: 0;
25+
position: absolute;
2126
border-radius: var(--p-border-radius-2);
22-
border: none;
23-
24-
&::after {
25-
content: '';
26-
top: 0;
27-
left: 0;
28-
right: 0;
29-
bottom: 0;
30-
position: absolute;
31-
border-radius: var(--p-border-radius-2);
32-
box-shadow: var(--p-shadow-border-inset-experimental);
33-
}
34-
35-
&.sizeExtraSmall,
36-
&.sizeExtraSmall::after {
37-
border-radius: var(--p-border-radius-1_5-experimental);
38-
}
27+
box-shadow: var(--p-shadow-border-inset-experimental);
28+
display: block;
29+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
30+
padding-bottom: 100%;
31+
}
3932

40-
&::before {
41-
content: '';
42-
display: block;
43-
// stylelint-disable-next-line -- SE23 styling
44-
padding-bottom: 100%;
45-
}
33+
&.sizeExtraSmall,
34+
&.sizeExtraSmall::after {
35+
border-radius: var(--p-border-radius-1_5-experimental);
4636
}
4737

48-
&::after {
38+
&::before {
4939
content: '';
5040
display: block;
51-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
41+
// stylelint-disable-next-line -- SE23 styling
5242
padding-bottom: 100%;
5343
}
5444
}

0 commit comments

Comments
 (0)