@@ -52,25 +57,55 @@ export function SkeletonPage({
) : null;
const breadcrumbMarkup = breadcrumbs ? (
-
+
-
+
) : null;
+ const narrowWidthProps = narrowWidth
+ ? {
+ maxWidth: '662px',
+ }
+ : {};
+
+ const fullWidthProps = fullWidth
+ ? {
+ maxWidth: 'none',
+ }
+ : {};
+
return (
-
-
- {breadcrumbMarkup}
-
- {titleMarkup}
- {primaryActionMarkup}
-
-
-
{children}
-
+
+
+ {breadcrumbMarkup}
+
+ {titleContent}
+ {primaryActionMarkup}
+
+
+
+ {children}
+
+
+
);
}
diff --git a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
index 1bef933df19..2d84103e29b 100644
--- a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
+++ b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
@@ -7,6 +7,7 @@ import {Layout} from '../../Layout';
import {SkeletonBodyText} from '../../SkeletonBodyText';
import {SkeletonDisplayText} from '../../SkeletonDisplayText';
import {SkeletonPage} from '../SkeletonPage';
+import {Box} from '../../Box';
describe('
', () => {
it('renders its children', () => {
@@ -37,29 +38,27 @@ describe('
', () => {
it('renders an h1 with the Title class when title is defined', () => {
const skeletonPage = mountWithApp(
);
- expect(skeletonPage).toContainReactComponent('h1', {className: 'Title'});
- expect(skeletonPage).not.toContainReactComponent(Text);
+ expect(skeletonPage).toContainReactComponent(Text);
+ expect(skeletonPage).not.toContainReactComponent(Box, {
+ background: 'surface-neutral',
+ });
});
it('renders SkeletonTitle when a title not defined', () => {
const skeletonPage = mountWithApp(
);
- expect(skeletonPage).not.toContainReactComponent('h1', {
- className: 'Title',
- });
- expect(skeletonPage).toContainReactComponent('div', {
- className: 'SkeletonTitle',
+ expect(skeletonPage).not.toContainReactComponent(Text);
+ expect(skeletonPage).toContainReactComponent(Box, {
+ background: 'surface-neutral',
});
});
it('renders SkeletonTitle when title is an empty string', () => {
const skeletonPage = mountWithApp(
);
- expect(skeletonPage).not.toContainReactComponent('h1', {
- className: 'Title',
- });
- expect(skeletonPage).toContainReactComponent('div', {
- className: 'SkeletonTitle',
+ expect(skeletonPage).not.toContainReactComponent(Text);
+ expect(skeletonPage).toContainReactComponent(Box, {
+ background: 'surface-neutral',
});
});
});
From ea7e3b777e6414d1b702b0ebb3a824c7674caf28 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Wed, 23 Nov 2022 18:14:33 -0500
Subject: [PATCH 02/12] Clear `Playground.tsx`
---
polaris-react/playground/Playground.tsx | 56 +------------------------
1 file changed, 2 insertions(+), 54 deletions(-)
diff --git a/polaris-react/playground/Playground.tsx b/polaris-react/playground/Playground.tsx
index f4f1a825e83..355f6b984f2 100644
--- a/polaris-react/playground/Playground.tsx
+++ b/polaris-react/playground/Playground.tsx
@@ -1,63 +1,11 @@
import React from 'react';
-import {
- Card,
- Layout,
- Page,
- SkeletonBodyText,
- SkeletonDisplayText,
- SkeletonPage,
- TextContainer,
-} from '../src';
+import {Page} from '../src';
export function Playground() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* Add the code you want to test in here */}
);
}
From 51151216ac4c8c8e1a933e2bd8f62c11e9b4b816 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 25 Nov 2022 10:02:48 -0500
Subject: [PATCH 03/12] Add role `status` attribute
---
polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 617f92aaea3..4f7db0c3662 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -81,6 +81,7 @@ export function SkeletonPage({
paddingInlineEnd={{sm: '6'}}
maxWidth="998px"
aria-label={i18n.translate('Polaris.SkeletonPage.loadingLabel')}
+ role="status"
{...narrowWidthProps}
{...fullWidthProps}
>
From daf7cab40fc3678331dbf80c3db4b0bfeec1eaee Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Mon, 28 Nov 2022 09:30:40 -0500
Subject: [PATCH 04/12] Add `AlphaStack` as wrapper
---
.changeset/strong-bottles-swim.md | 2 +
.../src/components/AlphaStack/AlphaStack.scss | 4 -
.../SkeletonPage/SkeletonPage.stories.tsx | 100 ++++++++++++++++++
.../components/SkeletonPage/SkeletonPage.tsx | 68 ++++++------
4 files changed, 137 insertions(+), 37 deletions(-)
diff --git a/.changeset/strong-bottles-swim.md b/.changeset/strong-bottles-swim.md
index b456399a9aa..cf87a1ffd1e 100644
--- a/.changeset/strong-bottles-swim.md
+++ b/.changeset/strong-bottles-swim.md
@@ -3,3 +3,5 @@
---
Refactored `SkeletonPage` to use primitive Layout components
+Removed `max-width: 100%` from AlphaStack
+Added `narrowWidth` and `fullWidth` examples to AlphaStack stories
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss
index 0a212e1817d..11e29d82bc4 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.scss
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss
@@ -26,10 +26,6 @@
@media #{$p-breakpoints-xl-up} {
gap: var(--pc-stack-gap-xl);
}
-
- > * {
- max-width: 100%;
- }
}
.listReset {
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
index 41216d5e316..4ffd288ba88 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.stories.tsx
@@ -100,3 +100,103 @@ export function WithStaticContent() {
);
}
+
+export function WithNarrowWidth() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function WithFullWidth() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 4f7db0c3662..d21747fc133 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -75,38 +75,40 @@ export function SkeletonPage({
: {};
return (
-
-
-
- {breadcrumbMarkup}
-
- {titleContent}
- {primaryActionMarkup}
-
-
-
- {children}
-
-
-
+
+
+
+
+ {breadcrumbMarkup}
+
+ {titleContent}
+ {primaryActionMarkup}
+
+
+
+ {children}
+
+
+
+
);
}
From 245e64e076c49433993d2a289bb5fff5e6a0cebf Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Mon, 28 Nov 2022 17:59:56 +0100
Subject: [PATCH 05/12] Update .changeset/strong-bottles-swim.md
Co-authored-by: Lo Kim
---
.changeset/strong-bottles-swim.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/.changeset/strong-bottles-swim.md b/.changeset/strong-bottles-swim.md
index cf87a1ffd1e..9b76d2d1790 100644
--- a/.changeset/strong-bottles-swim.md
+++ b/.changeset/strong-bottles-swim.md
@@ -1,7 +1,7 @@
---
-'@shopify/polaris': patch
+'@shopify/polaris': minor
---
Refactored `SkeletonPage` to use primitive Layout components
-Removed `max-width: 100%` from AlphaStack
-Added `narrowWidth` and `fullWidth` examples to AlphaStack stories
+Removed `max-width` on children in `AlphaStack`
+Added `narrowWidth` and `fullWidth` examples to `AlphaStack` stories
From 6e3eb93ec75f993ca8e5cf492a0a4dec64601ef1 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Mon, 28 Nov 2022 13:03:53 -0500
Subject: [PATCH 06/12] Update Page title
---
polaris-react/src/components/SkeletonPage/SkeletonPage.scss | 6 ++++++
polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 4 +---
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
index 0a963b7da54..8f204e821c5 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
@@ -3,6 +3,12 @@
$primary-action-button-height: 36px;
$primary-action-button-width: 100px;
+.Title {
+ font-weight: var(--p-font-weight-semibold);
+ font-size: var(--p-font-size-300);
+ line-height: var(--p-font-line-height-4);
+}
+
.SkeletonTitle {
@media screen and (-ms-high-contrast: active) {
background-color: grayText;
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index d21747fc133..80ff93b9d23 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -36,9 +36,7 @@ export function SkeletonPage({
const i18n = useI18n();
const titleContent = title ? (
-
- {title}
-
+ {title}
) : (
Date: Mon, 28 Nov 2022 13:14:40 -0500
Subject: [PATCH 07/12] Remove `Text`
---
polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 80ff93b9d23..62670e13983 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -5,7 +5,6 @@ import {SkeletonDisplayText} from '../SkeletonDisplayText';
import {SkeletonBodyText} from '../SkeletonBodyText';
import {Box} from '../Box';
import {Inline} from '../Inline';
-import {Text} from '../Text';
import {AlphaStack} from '../AlphaStack';
import styles from './SkeletonPage.scss';
From b59194a70e07fe222ae98b0f24b2b05c55fca732 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Mon, 28 Nov 2022 13:50:09 -0500
Subject: [PATCH 08/12] Update SkeletonPage.test.tsx
---
.../SkeletonPage/tests/SkeletonPage.test.tsx | 11 +++++++----
1 file changed, 7 insertions(+), 4 deletions(-)
diff --git a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
index 2d84103e29b..20688bd794d 100644
--- a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
+++ b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import {mountWithApp} from 'tests/utilities';
import {Card} from '../../Card';
-import {Text} from '../../Text';
import {Layout} from '../../Layout';
import {SkeletonBodyText} from '../../SkeletonBodyText';
import {SkeletonDisplayText} from '../../SkeletonDisplayText';
@@ -38,7 +37,7 @@ describe('', () => {
it('renders an h1 with the Title class when title is defined', () => {
const skeletonPage = mountWithApp();
- expect(skeletonPage).toContainReactComponent(Text);
+ expect(skeletonPage).toContainReactComponent('h1', {className: 'Title'});
expect(skeletonPage).not.toContainReactComponent(Box, {
background: 'surface-neutral',
});
@@ -47,7 +46,9 @@ describe('', () => {
it('renders SkeletonTitle when a title not defined', () => {
const skeletonPage = mountWithApp();
- expect(skeletonPage).not.toContainReactComponent(Text);
+ expect(skeletonPage).not.toContainReactComponent('h1', {
+ className: 'Title',
+ });
expect(skeletonPage).toContainReactComponent(Box, {
background: 'surface-neutral',
});
@@ -56,7 +57,9 @@ describe('', () => {
it('renders SkeletonTitle when title is an empty string', () => {
const skeletonPage = mountWithApp();
- expect(skeletonPage).not.toContainReactComponent(Text);
+ expect(skeletonPage).not.toContainReactComponent('h1', {
+ className: 'Title',
+ });
expect(skeletonPage).toContainReactComponent(Box, {
background: 'surface-neutral',
});
From 2e774fe8f59069d49b4077f8acce791fc23006b9 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 29 Nov 2022 08:11:34 -0500
Subject: [PATCH 09/12] Refactor `SkeletonPage`
---
.../components/SkeletonPage/SkeletonPage.tsx | 20 ++++++-------------
1 file changed, 6 insertions(+), 14 deletions(-)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 62670e13983..92286e74c5d 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -59,18 +59,6 @@ export function SkeletonPage({
) : null;
- const narrowWidthProps = narrowWidth
- ? {
- maxWidth: '662px',
- }
- : {};
-
- const fullWidthProps = fullWidth
- ? {
- maxWidth: 'none',
- }
- : {};
-
return (
Date: Thu, 1 Dec 2022 16:17:34 -0500
Subject: [PATCH 10/12] Update scss
---
polaris-react/src/components/SkeletonPage/SkeletonPage.scss | 5 +++++
polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 4 ++--
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
index 8f204e821c5..08b9841f4ec 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
@@ -3,6 +3,11 @@
$primary-action-button-height: 36px;
$primary-action-button-width: 100px;
+:root {
+ --pc-skeleton-page-max-width: 998px;
+ --pc-skeleton-page-max-width-narrow: 662px;
+}
+
.Title {
font-weight: var(--p-font-weight-semibold);
font-size: var(--p-font-size-300);
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 92286e74c5d..e2c0f191b07 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -69,10 +69,10 @@ export function SkeletonPage({
aria-label={i18n.translate('Polaris.SkeletonPage.loadingLabel')}
role="status"
{...(narrowWidth && {
- maxWidth: '662px',
+ maxWidth: 'var(--pc-skeleton-page-max-width-narrow)',
})}
{...(fullWidth && {
- maxWidth: 'none',
+ maxWidth: 'var(--pc-skeleton-page-max-width)',
})}
>
From 074a6fbbdca9155145cc45faa0c0d4299dc299f2 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Thu, 1 Dec 2022 16:19:52 -0500
Subject: [PATCH 11/12] Update SkeletonPage.tsx
---
polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index e2c0f191b07..d1fed2cf0ef 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -65,7 +65,7 @@ export function SkeletonPage({
padding="0"
paddingInlineStart={{sm: '6'}}
paddingInlineEnd={{sm: '6'}}
- maxWidth="998px"
+ maxWidth="var(--pc-skeleton-page-max-width)"
aria-label={i18n.translate('Polaris.SkeletonPage.loadingLabel')}
role="status"
{...(narrowWidth && {
From 1d1bb69e58c9141b16ccb07fd1886f6f69c3815a Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 2 Dec 2022 10:06:26 -0500
Subject: [PATCH 12/12] Update `fullWidth` prop
---
polaris-react/src/components/SkeletonPage/SkeletonPage.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index d1fed2cf0ef..e692822ef56 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -72,7 +72,7 @@ export function SkeletonPage({
maxWidth: 'var(--pc-skeleton-page-max-width-narrow)',
})}
{...(fullWidth && {
- maxWidth: 'var(--pc-skeleton-page-max-width)',
+ maxWidth: 'none',
})}
>