From 7761bbc831465f0fb3f9fb1bbc0c99c6aab6227f Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 26 Jul 2022 16:39:13 -0700 Subject: [PATCH 1/5] Fix whitespace around components in storybook --- polaris-react/.storybook/polaris-readme-loader.js | 10 +++++++--- polaris-react/.storybook/preview-body.html | 5 ----- 2 files changed, 7 insertions(+), 8 deletions(-) delete mode 100644 polaris-react/.storybook/preview-body.html diff --git a/polaris-react/.storybook/polaris-readme-loader.js b/polaris-react/.storybook/polaris-readme-loader.js index f6a2b2866a9..5faa251b711 100644 --- a/polaris-react/.storybook/polaris-readme-loader.js +++ b/polaris-react/.storybook/polaris-readme-loader.js @@ -25,9 +25,13 @@ module.exports = function loader(source) { const readme = parseCodeExamples(source); - const hasFullscreenLayout = ['App provider', 'Frame', 'Navigation'].includes( - readme.name, - ); + const hasFullscreenLayout = [ + 'App provider', + 'Frame', + 'Navigation', + 'Sheet', + 'Grid', + ].includes(readme.name); const omitAppProvider = [ 'Frame', diff --git a/polaris-react/.storybook/preview-body.html b/polaris-react/.storybook/preview-body.html deleted file mode 100644 index b8777224ada..00000000000 --- a/polaris-react/.storybook/preview-body.html +++ /dev/null @@ -1,5 +0,0 @@ - From ece8fc74c074dfbbb2f071fafac648a91352bc1d Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 26 Jul 2022 16:50:25 -0700 Subject: [PATCH 2/5] Change spacing in grid if there is padding --- polaris-react/.storybook/GridOverlay/GridOverlay.tsx | 10 +++++++++- polaris-react/.storybook/polaris-readme-loader.js | 1 + polaris-react/.storybook/preview.js | 7 ++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/polaris-react/.storybook/GridOverlay/GridOverlay.tsx b/polaris-react/.storybook/GridOverlay/GridOverlay.tsx index 665a7c0c58f..3d2a1a8b326 100644 --- a/polaris-react/.storybook/GridOverlay/GridOverlay.tsx +++ b/polaris-react/.storybook/GridOverlay/GridOverlay.tsx @@ -15,9 +15,16 @@ interface Props { maxWidth?: string; layer?: Layer; children?: React.ReactNode; + componentLayout: 'padded' | 'centered' | 'fullscreen'; } -export function GridOverlay({inFrame, maxWidth, layer, children}: Props) { +export function GridOverlay({ + inFrame, + maxWidth, + layer, + children, + componentLayout, +}: Props) { const [columns, setColumns] = useState( window.innerWidth < BREAKPOINT ? COLUMNS_SMALL : COLUMNS_LARGE, ); @@ -28,6 +35,7 @@ export function GridOverlay({inFrame, maxWidth, layer, children}: Props) { const className = classNames('GridOverlay', inFrame && 'inFrame'); const style = { maxWidth, + margin: componentLayout === 'padded' ? '0 1rem' : '', zIndex: layer === 'above' || inFrame ? 1 : -1, } as React.CSSProperties; diff --git a/polaris-react/.storybook/polaris-readme-loader.js b/polaris-react/.storybook/polaris-readme-loader.js index 5faa251b711..8ad3623cdd7 100644 --- a/polaris-react/.storybook/polaris-readme-loader.js +++ b/polaris-react/.storybook/polaris-readme-loader.js @@ -28,6 +28,7 @@ module.exports = function loader(source) { const hasFullscreenLayout = [ 'App provider', 'Frame', + 'Fullscreen bar', 'Navigation', 'Sheet', 'Grid', diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js index 8eb0e935b37..29025d1991b 100644 --- a/polaris-react/.storybook/preview.js +++ b/polaris-react/.storybook/preview.js @@ -31,7 +31,12 @@ function GridOverlayDecorator(Story, context) { const {showGrid, gridInFrame, gridWidth, gridLayer} = context.globals; const gridOverlay = showGrid ? ( - + ) : null; return ( From a14aab9e9ba9f64ac274734a5d25a824641896c9 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 26 Jul 2022 16:51:02 -0700 Subject: [PATCH 3/5] Create grumpy-zoos-retire.md --- .changeset/grumpy-zoos-retire.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-zoos-retire.md diff --git a/.changeset/grumpy-zoos-retire.md b/.changeset/grumpy-zoos-retire.md new file mode 100644 index 00000000000..5082d517d26 --- /dev/null +++ b/.changeset/grumpy-zoos-retire.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Add spacing around components in storybook, adjust grid if there is spacing From f252dd2c5e1b6453d006571f783a42a123a419b5 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 27 Jul 2022 07:29:52 -0700 Subject: [PATCH 4/5] Clean up --- polaris-react/.storybook/GridOverlay/GridOverlay.css | 4 ++++ polaris-react/.storybook/GridOverlay/GridOverlay.tsx | 10 +--------- polaris-react/.storybook/polaris-readme-loader.js | 2 +- polaris-react/.storybook/preview.js | 7 +------ 4 files changed, 7 insertions(+), 16 deletions(-) diff --git a/polaris-react/.storybook/GridOverlay/GridOverlay.css b/polaris-react/.storybook/GridOverlay/GridOverlay.css index 6ee8fd26ac1..a1a4fccc887 100644 --- a/polaris-react/.storybook/GridOverlay/GridOverlay.css +++ b/polaris-react/.storybook/GridOverlay/GridOverlay.css @@ -1,3 +1,7 @@ +.sb-main-padded .GridOverlay { + margin: 0 1rem; +} + .GridOverlay { --pc-top-bar-height: 56px; --pc-nav-width: 240px; diff --git a/polaris-react/.storybook/GridOverlay/GridOverlay.tsx b/polaris-react/.storybook/GridOverlay/GridOverlay.tsx index 3d2a1a8b326..665a7c0c58f 100644 --- a/polaris-react/.storybook/GridOverlay/GridOverlay.tsx +++ b/polaris-react/.storybook/GridOverlay/GridOverlay.tsx @@ -15,16 +15,9 @@ interface Props { maxWidth?: string; layer?: Layer; children?: React.ReactNode; - componentLayout: 'padded' | 'centered' | 'fullscreen'; } -export function GridOverlay({ - inFrame, - maxWidth, - layer, - children, - componentLayout, -}: Props) { +export function GridOverlay({inFrame, maxWidth, layer, children}: Props) { const [columns, setColumns] = useState( window.innerWidth < BREAKPOINT ? COLUMNS_SMALL : COLUMNS_LARGE, ); @@ -35,7 +28,6 @@ export function GridOverlay({ const className = classNames('GridOverlay', inFrame && 'inFrame'); const style = { maxWidth, - margin: componentLayout === 'padded' ? '0 1rem' : '', zIndex: layer === 'above' || inFrame ? 1 : -1, } as React.CSSProperties; diff --git a/polaris-react/.storybook/polaris-readme-loader.js b/polaris-react/.storybook/polaris-readme-loader.js index 8ad3623cdd7..63708c67297 100644 --- a/polaris-react/.storybook/polaris-readme-loader.js +++ b/polaris-react/.storybook/polaris-readme-loader.js @@ -27,11 +27,11 @@ module.exports = function loader(source) { const hasFullscreenLayout = [ 'App provider', + 'Contextual save bar', 'Frame', 'Fullscreen bar', 'Navigation', 'Sheet', - 'Grid', ].includes(readme.name); const omitAppProvider = [ diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js index 29025d1991b..8eb0e935b37 100644 --- a/polaris-react/.storybook/preview.js +++ b/polaris-react/.storybook/preview.js @@ -31,12 +31,7 @@ function GridOverlayDecorator(Story, context) { const {showGrid, gridInFrame, gridWidth, gridLayer} = context.globals; const gridOverlay = showGrid ? ( - + ) : null; return ( From faa9c8097914890093ba2e88c0c04a3932ac911e Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 27 Jul 2022 07:55:28 -0700 Subject: [PATCH 5/5] Update links --- polaris-react/src/components/Frame/README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Frame/README.md b/polaris-react/src/components/Frame/README.md index 6b3a46d7912..1907c53c814 100644 --- a/polaris-react/src/components/Frame/README.md +++ b/polaris-react/src/components/Frame/README.md @@ -226,7 +226,11 @@ function FrameExample() { const loadingMarkup = isLoading ? : null; const skipToContentTarget = ( - + + + Account details + + ); const actualPageMarkup = ( @@ -562,7 +566,11 @@ function FrameExample() { const loadingMarkup = isLoading ? : null; const skipToContentTarget = ( - + + + Account details + + ); const actualPageMarkup = (