Padded layout for components in storybook by default (#6771)

Shopify · Jul 27, 2022 · b5ff69e · b5ff69e
1 parent 6365532
commit b5ff69e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/.changeset/grumpy-zoos-retire.md 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
diff --git 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/polaris-readme-loader.js b/polaris-react/.storybook/polaris-readme-loader.js
@@ -25,9 +25,14 @@ module.exports = function loader(source) {
 
   const readme = parseCodeExamples(source);
 
-  const hasFullscreenLayout = ['App provider', 'Frame', 'Navigation'].includes(
-    readme.name,
-  );
+  const hasFullscreenLayout = [
+    'App provider',
+    'Contextual save bar',
+    'Frame',
+    'Fullscreen bar',
+    'Navigation',
+    'Sheet',
+  ].includes(readme.name);
 
   const omitAppProvider = [
     'Frame',

diff --git a/polaris-react/.storybook/preview-body.html b/polaris-react/.storybook/preview-body.html