Merge branch 'next' into fix/theming-flash

# Conflicts: # examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
storybookjs · Feb 28, 2019 · 239d9f3 · 239d9f3 · vercel · Feb 28, 2019
2 parents 362a339 + 8602b51
commit 239d9f3
Show file tree

Hide file tree

Showing 31 changed files with 10,841 additions and 7,908 deletions.
diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js
@@ -6,6 +6,7 @@ import { styled } from '@storybook/theming';
 import { STORY_RENDERED } from '@storybook/core-events';
 import { ActionBar, Icons } from '@storybook/components';
 
+import { ScrollArea } from '@storybook/components/dist/ScrollArea/ScrollArea';
 import EVENTS from '../constants';
 
 import Tabs from './Tabs';
@@ -130,19 +131,23 @@ class A11YPanel extends Component {
 
     return active ? (
       <Fragment>
-        <Tabs
-          key="tabs"
-          tabs={[
-            {
-              label: <Violations>{violations.length} Violations</Violations>,
-              panel: <Report passes={false} items={violations} empty="No a11y violations found." />,
-            },
-            {
-              label: <Passes>{passes.length} Passes</Passes>,
-              panel: <Report passes items={passes} empty="No a11y check passed" />,
-            },
-          ]}
-        />
+        <ScrollArea vertical horizontal>
+          <Tabs
+            key="tabs"
+            tabs={[
+              {
+                label: <Violations>{violations.length} Violations</Violations>,
+                panel: (
+                  <Report passes={false} items={violations} empty="No a11y violations found." />
+                ),
+              },
+              {
+                label: <Passes>{passes.length} Passes</Passes>,
+                panel: <Report passes items={passes} empty="No a11y check passed" />,
+              },
+            ]}
+          />
+        </ScrollArea>
         <ActionBar key="actionbar" actionItems={[{ title: actionTitle, onClick: this.request }]} />
       </Fragment>
     ) : null;

diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
+// TODO: reuse the Tabs component from @storybook/theming instead
+// of re-building identical functionality
 
 const Container = styled.div({
   width: '100%',

diff --git a/addons/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx
@@ -1,37 +1,41 @@
-import React from 'react';
-import Inspector from 'react-inspector';
+import React, { Fragment } from 'react';
+import { styled, withTheme } from '@storybook/theming';
 
-import { withTheme } from '@storybook/theming';
-import { ActionBar } from '@storybook/components';
+import Inspector from 'react-inspector';
+import { ActionBar, ScrollArea } from '@storybook/components';
 
-import { Actions, Action, Wrapper, InspectorContainer, Counter } from './style';
+import { Action, InspectorContainer, Counter } from './style';
 import { ActionDisplay } from '../../models';
 
+export const Wrapper = styled(({ children, className }) => (
+  <ScrollArea horizontal vertical className={className}>
+    {children}
+  </ScrollArea>
+))({
+  margin: 0,
+  padding: '10px 5px 20px',
+});
+
+const ThemedInspector = withTheme(({ theme, ...props }) => <Inspector theme={theme.addonActionsTheme || 'chromeLight'} {...props} />);
+
 interface ActionLoggerProps {
   actions: ActionDisplay[];
   onClear: () => void;
-  theme: any;
 }
 
-export const ActionLogger = withTheme(({ actions, onClear, theme }: ActionLoggerProps) => (
-  <Wrapper>
-    <Actions>
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
+  <Fragment>
+    <Wrapper title="actionslogger">
       {actions.map((action: ActionDisplay) => (
         <Action key={action.id}>
           {action.count > 1 && <Counter>{action.count}</Counter>}
           <InspectorContainer>
-            <Inspector
-              theme={theme.addonActionsTheme || 'chromeLight'}
-              sortObjectKeys
-              showNonenumerable={false}
-              name={action.data.name}
-              data={action.data.args || action.data}
-            />
+            <ThemedInspector sortObjectKeys showNonenumerable={false} name={action.data.name} data={action.data.args || action.data} />
           </InspectorContainer>
         </Action>
       ))}
-    </Actions>
+    </Wrapper>
 
     <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
-  </Wrapper>
-));
+  </Fragment>
+);
diff --git a/...ions/src/components/ActionLogger/style.ts → ...ons/src/components/ActionLogger/style.tsx b/...ions/src/components/ActionLogger/style.ts → ...ons/src/components/ActionLogger/style.tsx
@@ -1,13 +1,6 @@
 import { styled } from '@storybook/theming';
 import { opacify } from 'polished';
-
-export const Actions = styled.pre({
-  flex: 1,
-  margin: 0,
-  padding: '10px 5px 20px',
-  overflowY: 'auto',
-  color: '#666',
-});
+import { ActionBar } from '@storybook/components';
 
 export const Action = styled.div({
   display: 'flex',
@@ -33,10 +26,3 @@ export const InspectorContainer = styled.div({
   flex: 1,
   padding: '0 0 0 5px',
 });
-
-export const Wrapper = styled.div({
-  flex: 1,
-  display: 'flex',
-  position: 'relative',
-  height: '100%',
-});
diff --git a/addons/jest/package.json b/addons/jest/package.json
@@ -31,6 +31,7 @@
     "@storybook/addons": "5.0.0-beta.3",
     "@storybook/core-events": "5.0.0-beta.3",
     "@storybook/theming": "5.0.0-beta.3",
+    "@storybook/components": "5.0.0-beta.3",
     "core-js": "^2.6.2",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",

diff --git a/addons/jest/src/components/Panel.js b/addons/jest/src/components/Panel.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
+import { ScrollArea } from '@storybook/components';
 
 import Indicator from './Indicator';
 import Result, { FailedResult } from './Result';
@@ -141,8 +142,11 @@ const Content = styled(({ tests, className }) => (
   flex: '1 1 0%',
 });
 
-const Panel = ({ tests }) =>
-  tests ? <Content tests={tests} /> : <NoTests>This story has no tests configured</NoTests>;
+const Panel = ({ tests }) => (
+  <ScrollArea vertical>
+    {tests ? <Content tests={tests} /> : <NoTests>This story has no tests configured</NoTests>}
+  </ScrollArea>
+);
 
 Panel.defaultProps = {
   tests: null,

diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
@@ -6,7 +6,14 @@ import { styled } from '@storybook/theming';
 import copy from 'copy-to-clipboard';
 
 import { STORY_CHANGED } from '@storybook/core-events';
-import { Placeholder, TabWrapper, TabsState, ActionBar, Link } from '@storybook/components';
+import {
+  Placeholder,
+  TabWrapper,
+  TabsState,
+  ActionBar,
+  Link,
+  ScrollArea,
+} from '@storybook/components';
 import { RESET, SET, CHANGE, SET_OPTIONS, CLICK } from '../shared';
 
 import Types from './types';
@@ -16,9 +23,12 @@ const getTimestamp = () => +new Date();
 
 const DEFAULT_GROUP_ID = 'ALL';
 
-const PanelWrapper = styled.div({
+const PanelWrapper = styled(({ children, className }) => (
+  <ScrollArea horizontal vertical className={className}>
+    {children}
+  </ScrollArea>
+))({
   height: '100%',
-  overflow: 'auto',
   width: '100%',
 });
 
@@ -188,29 +198,31 @@ export default class KnobPanel extends PureComponent {
 
     const entries = Object.entries(groups);
     return (
-      <PanelWrapper>
-        {entries.length > 1 ? (
-          <TabsState>
-            {entries.map(([k, v]) => (
-              <div id={k} key={k} title={v.title}>
-                {v.render}
-              </div>
-            ))}
-          </TabsState>
-        ) : (
-          <PropForm
-            knobs={knobsArray}
-            onFieldChange={this.handleChange}
-            onFieldClick={this.handleClick}
-          />
-        )}
+      <Fragment>
+        <PanelWrapper>
+          {entries.length > 1 ? (
+            <TabsState>
+              {entries.map(([k, v]) => (
+                <div id={k} key={k} title={v.title}>
+                  {v.render}
+                </div>
+              ))}
+            </TabsState>
+          ) : (
+            <PropForm
+              knobs={knobsArray}
+              onFieldChange={this.handleChange}
+              onFieldClick={this.handleClick}
+            />
+          )}
+        </PanelWrapper>
         <ActionBar
           actionItems={[
             { title: 'Copy', onClick: this.copy },
             { title: 'Reset', onClick: this.reset },
           ]}
         />
-      </PanelWrapper>
+      </Fragment>
     );
   }
 }