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

Author: alex-page

.changeset/grumpy-zoos-retire.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add spacing around components in storybook, adjust grid if there is spacing

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;

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',