fix(storybook): container width, stories width

carbon-design-system · Jul 26, 2019 · b027854 · b027854
1 parent cd5fcf5
commit b027854
Show file tree

Hide file tree

Showing 4 changed files with 230,648 additions and 231,345 deletions.
diff --git a/.storybook/Container.js b/.storybook/Container.js
@@ -4,18 +4,19 @@ import '../src/index.scss';
 export default class Container extends Component {
   render() {
     const { story } = this.props;
+    console.log(story);
 
     return (
       <div
         className="storybook-container"
         style={{
-          padding: '3em',
+          padding: '3rem',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
         }}
       >
-        <div style={{ width: '100%' }}>{story()}</div>
+        {story()}
       </div>
     );
   }

diff --git a/src/components/Table/Table.story.jsx b/src/components/Table/Table.story.jsx
@@ -200,13 +200,13 @@ const RowExpansionContent = ({ rowId }) => (
 
 const StyledTableWidth = styled.div`
   &&& {
-    width: 95vw;
+    width: calc(100vw - 6rem);
   }
 `;
 
 const StyledTableCustomRowHeight = styled(Table)`
   &&& {
-    width: 95vw;
+    width: calc(100vw - 6rem);
     & tr {
       height: 5rem;
     }
@@ -1081,14 +1081,16 @@ storiesOf('Watson IoT|Table', module)
     'with fixed column width',
     () => (
       // You don't need to use styled components, just pass a className to the Table component and use selectors to find the correct column
-      <Table
-        columns={tableColumns.map((i, idx) => ({
-          width: idx % 2 === 0 ? '20rem' : '10rem',
-          ...i,
-        }))}
-        data={tableData}
-        actions={actions}
-      />
+      <div style={{ width: 'calc(100vw - 6rem)' }}>
+        <Table
+          columns={tableColumns.map((i, idx) => ({
+            width: idx % 2 === 0 ? '20rem' : '10rem',
+            ...i,
+          }))}
+          data={tableData}
+          actions={actions}
+        />
+      </div>
     ),
     {
       info: {

diff --git a/src/components/TileCatalog/TileCatalog.story.jsx b/src/components/TileCatalog/TileCatalog.story.jsx
@@ -1,3 +1,5 @@
+import { callbackify } from 'util';
+
 import React, { useState, useEffect } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
@@ -93,7 +95,9 @@ storiesOf('Watson IoT|TileCatalog', module)
   ))
   .add('loading', () => <StatefulTileCatalog {...commonTileCatalogProps} isLoading />)
   .add('error', () => (
-    <StatefulTileCatalog {...commonTileCatalogProps} tiles={[]} error="In error state" />
+    <div style={{ width: 'calc(100vw - 6rem)' }}>
+      <StatefulTileCatalog {...commonTileCatalogProps} tiles={[]} error="In error state" />
+    </div>
   ))
   .add('async loaded wait one second', () => {
     const Container = () => {