Merge pull request #7448 from storybookjs/fix/viewport

Fix/viewport
storybookjs · Aug 27, 2019 · 8240849 · 8240849
2 parents 7ac1cab + bde0c12
commit 8240849
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -67,6 +67,21 @@
 
 ## From version 5.1.x to 5.2.x
 
+### default viewports
+
+The default viewports have been reduced to a smaller set, we think is enough for most usecases.
+You can get the old default back by adding the following to your `config.js`:
+
+```js
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+addParameters({
+  options: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+});
+```
+
 ### Grid toolbar-feature
 
 The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again.

diff --git a/addons/viewport/src/Tool.tsx b/addons/viewport/src/Tool.tsx
@@ -8,6 +8,7 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 import { useParameter, useAddonState } from '@storybook/api';
 import { PARAM_KEY, ADDON_ID } from './constants';
+import { MINIMAL_VIEWPORTS } from './defaults';
 import { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
 
 interface ViewportItem {
@@ -122,7 +123,7 @@ export const ViewportTool: FunctionComponent<{}> = React.memo(
     const { viewports, defaultViewport, disable } = useParameter<ViewportAddonParameter>(
       PARAM_KEY,
       {
-        viewports: {},
+        viewports: MINIMAL_VIEWPORTS,
         defaultViewport: responsiveViewport.id,
       }
     );
@@ -195,13 +196,15 @@ export const ViewportTool: FunctionComponent<{}> = React.memo(
                 },
                 [`#${wrapperId}`]: {
                   padding: theme.layoutMargin,
-                  display: 'grid',
                   alignContent: 'center',
                   alignItems: 'center',
                   justifyContent: 'center',
                   justifyItems: 'center',
                   overflow: 'auto',
-                  gridTemplateColumns: 'minmax(0, 1fr)',
+
+                  display: 'grid',
+                  gridTemplateColumns: '100%',
+                  gridTemplateRows: '100%',
                 },
               }}
             />

diff --git a/addons/viewport/src/defaults.ts b/addons/viewport/src/defaults.ts
@@ -131,3 +131,30 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
   },
 };
 export const DEFAULT_VIEWPORT = 'responsive';
+
+export const MINIMAL_VIEWPORTS: ViewportMap = {
+  mobile1: {
+    name: 'Small mobile',
+    styles: {
+      height: '568px',
+      width: '320px',
+    },
+    type: 'mobile',
+  },
+  mobile2: {
+    name: 'Large mobile',
+    styles: {
+      height: '896px',
+      width: '414px',
+    },
+    type: 'mobile',
+  },
+  tablet: {
+    name: 'Tablet',
+    styles: {
+      height: '1112px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
+};