REFACTOR no scroller around Tabs content, instead force scroll on child

This I hacky, I know but we need to scroll over content, without the Actionbar component, that should stick. I'd like to refactor the Tabs component so it can render ActionBar independently, but that a bigger overhaul, then I feel comfortable with at the moment. Most of our addons will show a custom scrollbar now, but it's a manual process, the addon rendering is taking control over scrolling. Instead I'd like tabs to be in control of scrolling, but that's currently not feasable with how ActionBar works.
storybookjs · Feb 27, 2019 · 79d2cd1 · 79d2cd1
1 parent 5ef058d
commit 79d2cd1
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 88 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';
@@ -33,12 +34,6 @@ const Violations = styled.span(({ theme }) => ({
   color: theme.color.negative,
 }));
 
-const StyledActionBar = styled(ActionBar)({
-  position: 'fixed',
-  bottom: 10,
-  right: 10,
-});
-
 class A11YPanel extends Component {
   static propTypes = {
     active: PropTypes.bool.isRequired,
@@ -136,23 +131,24 @@ 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" />,
-            },
-          ]}
-        />
-        <StyledActionBar
-          key="actionbar"
-          actionItems={[{ title: actionTitle, onClick: this.request }]}
-        />
+        <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/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx
@@ -1,36 +1,41 @@
-import React, {Fragment} from 'react';
-import Inspector from 'react-inspector';
+import React, { Fragment } from 'react';
+import { styled, withTheme } from '@storybook/theming';
 
-import { withTheme } from '@storybook/theming';
+import Inspector from 'react-inspector';
+import { ActionBar, ScrollArea } from '@storybook/components';
 
-import { Actions, Action, InspectorContainer, Counter, StyledActionBar } 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) => (
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
   <Fragment>
-    <Actions>
+    <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>
 
-    <StyledActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
+    <ActionBar actionItems={[{ title: 'Clear', onClick: onClear }]} />
   </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,7 @@
 import { styled } from '@storybook/theming';
 import { opacify } from 'polished';
-
 import { ActionBar } from '@storybook/components';
 
-export const Actions = styled.pre({
-  margin: 0,
-  padding: '10px 5px 20px',
-});
-
 export const Action = styled.div({
   display: 'flex',
   padding: '0',
@@ -32,9 +26,3 @@ export const InspectorContainer = styled.div({
   flex: 1,
   padding: '0 0 0 5px',
 });
-
-export const StyledActionBar = styled(ActionBar)({
-  position: 'fixed',
-  bottom: 10,
-  right: 10,
-});
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>
     );
   }
 }

diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js
@@ -31,7 +31,11 @@ const Side = styled.div(
 );
 Side.displayName = 'Side';
 
-export const Bar = styled(props => <ScrollArea horizontal {...props} />)(
+export const Bar = styled(({ children, className }) => (
+  <ScrollArea horizontal className={className}>
+    {children}
+  </ScrollArea>
+))(
   ({ theme }) => ({
     color: theme.barTextColor,
     width: '100%',

diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.js
@@ -38,7 +38,11 @@ const Wrapper = styled.div(
       : {}
 );
 
-const Scroller = styled(props => <ScrollArea vertical horizontal {...props} />)(
+const Scroller = styled(({ children, className }) => (
+  <ScrollArea horizontal vertical className={className}>
+    {children}
+  </ScrollArea>
+))(
   {
     position: 'relative',
   },

diff --git a/lib/components/src/tabs/tabs.js b/lib/components/src/tabs/tabs.js
@@ -5,7 +5,6 @@ import { styled } from '@storybook/theming';
 import { Placeholder } from '../placeholder/placeholder';
 import { FlexBar } from '../bar/bar';
 import { TabButton } from '../bar/button';
-import { ScrollArea } from '../ScrollArea/ScrollArea';
 
 const Wrapper = styled.div(
   ({ theme, bordered }) =>
@@ -45,6 +44,18 @@ const Content = styled.div(
   },
   ({ theme }) => ({
     fontSize: theme.typography.size.s2 - 1,
+  }),
+  ({ absolute }) => ({
+    height: absolute ? 'calc(100% - 40px)' : 'auto',
+    '& > *:first-child': {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      height: '100%',
+      overflow: 'auto',
+    },
   })
 );
 
@@ -92,8 +103,8 @@ export const Tabs = React.memo(
     const list = childrenToList(children, selected);
 
     return list.length ? (
-      <Wrapper absolute={absolute} bordered={bordered} id={htmlId} title="wrapper">
-        <FlexBar border title="flexbar">
+      <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
+        <FlexBar border>
           <TabBar role="tablist">
             {list.map(({ title, id, active }) => (
               <TabButton
@@ -109,13 +120,9 @@ export const Tabs = React.memo(
           </TabBar>
           {tools ? <Fragment>{tools}</Fragment> : null}
         </FlexBar>
-        {absolute ? (
-          <ScrollArea vertical horizontal>
-            <Content>{list.map(({ id, active, render }) => render({ key: id, active }))}</Content>
-          </ScrollArea>
-        ) : (
-          <Content>{list.map(({ id, active, render }) => render({ key: id, active }))}</Content>
-        )}
+        <Content absolute={absolute}>
+          {list.map(({ id, active, render }) => render({ key: id, active }))}
+        </Content>
       </Wrapper>
     ) : (
       <Placeholder>

diff --git a/lib/components/src/typography/DocumentFormatting.js b/lib/components/src/typography/DocumentFormatting.js
@@ -48,7 +48,6 @@ const Wrapper = styled.div(
     pre.hljs {
       padding: 15px;
       margin: 0;
-      overflow: auto;
 
       white-space: pre-wrap;
       color: ${props.theme.color.darkest};

diff --git a/lib/ui/src/components/preview/toolbar.js b/lib/ui/src/components/preview/toolbar.js
@@ -1,8 +1,9 @@
+import React from 'react';
 import { styled } from '@storybook/theming';
 
 import { FlexBar } from '@storybook/components';
 
-export const Toolbar = styled(FlexBar)(
+export const Toolbar = styled(({ shown, ...props }) => <FlexBar {...props} />)(
   {
     position: 'absolute',
     left: 0,