Skip to content

Commit

Permalink
[SkeletonThumbnail][SkeletonPage] Consolidate se23 conditional logic (#…
Browse files Browse the repository at this point in the history
…10143)

### WHY are these changes introduced?

Fixes #9966
Fixes #9967

### WHAT is this pull request doing?

* Consolidate se23 logic and styles for `SkeletonThumbnail` Component
* Consolidate se23 logic and styles for `SkeletonPage` Component

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

[Production skeleton
page](https://storybook.polaris.shopify.com/?path=/story/all-components-skeletonpage--with-dynamic-content&globals=polarisSummerEditions2023:true)
[This PR skeleton
page](https://5d559397bae39100201eedc1-zxhtnbvnuu.chromatic.com/?path=/story/all-components-skeletonpage--with-dynamic-content)

[Production skeleton
thumbnail](https://storybook.polaris.shopify.com/?path=/story/all-components-skeletonthumbnail--all&globals=polarisSummerEditions2023:true)
[This PR skeleton
thumbnail](https://5d559397bae39100201eedc1-zxhtnbvnuu.chromatic.com/?path=/story/all-components-skeletonthumbnail--all)
  • Loading branch information
sophschneider committed Sep 18, 2023
1 parent 07b8c77 commit 22be721
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 16 deletions.
6 changes: 1 addition & 5 deletions polaris-react/src/components/SkeletonPage/SkeletonPage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,9 @@ $primary-action-button-width: 6.25rem;
}

.Title {
font-weight: var(--p-font-weight-semibold);
font-weight: var(--p-font-weight-bold);
font-size: var(--p-font-size-300);
line-height: var(--p-font-line-height-4);

#{$se23} & {
font-weight: var(--p-font-weight-bold);
}
}

.SkeletonTitle {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,14 @@

.SkeletonThumbnail {
// stylelint-disable -- Polaris component custom properties
--pc-skeleton-thumbnail-extra-small-size: 24px;
--pc-skeleton-thumbnail-small-size: 40px;
--pc-skeleton-thumbnail-extra-small-size: 40px;
--pc-skeleton-thumbnail-small-size: 48px;
--pc-skeleton-thumbnail-medium-size: 60px;
--pc-skeleton-thumbnail-large-size: 80px;
// stylelint-enable
display: flex;
background-color: var(--p-color-bg-strong);
border-radius: var(--p-border-radius-1);

#{$se23} & {
// stylelint-disable -- Polaris component custom properties, se23 temporary styles
--pc-skeleton-thumbnail-extra-small-size: 40px;
--pc-skeleton-thumbnail-small-size: 48px;
// stylelint-enable
border-radius: var(--p-border-radius-2);
}
border-radius: var(--p-border-radius-2);

@media screen and (-ms-high-contrast: active) {
background-color: grayText;
Expand Down

0 comments on commit 22be721

Please sign in to comment.