diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js
index d56356f63c92..2898eb45def6 100644
--- 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 ? (
- {violations.length} Violations,
- panel: ,
- },
- {
- label: {passes.length} Passes,
- panel: ,
- },
- ]}
- />
-
+
+ {violations.length} Violations,
+ panel: (
+
+ ),
+ },
+ {
+ label: {passes.length} Passes,
+ panel: ,
+ },
+ ]}
+ />
+
+
) : null;
}
diff --git a/addons/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx
index b9115774d56b..180981ce6991 100644
--- 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 }) => (
+
+ {children}
+
+))({
+ margin: 0,
+ padding: '10px 5px 20px',
+});
+
+const ThemedInspector = withTheme(({ theme, ...props }) => );
+
interface ActionLoggerProps {
actions: ActionDisplay[];
onClear: () => void;
- theme: any;
}
-export const ActionLogger = withTheme(({ actions, onClear, theme }: ActionLoggerProps) => (
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
-
+
{actions.map((action: ActionDisplay) => (
{action.count > 1 && {action.count}}
-
+
))}
-
+
-
+
-));
+);
diff --git a/addons/actions/src/components/ActionLogger/style.ts b/addons/actions/src/components/ActionLogger/style.tsx
similarity index 79%
rename from addons/actions/src/components/ActionLogger/style.ts
rename to addons/actions/src/components/ActionLogger/style.tsx
index 1c1796b7accf..06d83aa7941f 100644
--- a/addons/actions/src/components/ActionLogger/style.ts
+++ b/addons/actions/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
index 706c7a6f213a..76380331ca25 100644
--- 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
index 9826581b9eac..b1c0e3acbf4f 100644
--- 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 ? : This story has no tests configured;
+const Panel = ({ tests }) => (
+
+ {tests ? : This story has no tests configured}
+
+);
Panel.defaultProps = {
tests: null,
diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
index ff311c28a27c..6dacd8b814e0 100644
--- 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 }) => (
+
+ {children}
+
+))({
height: '100%',
- overflow: 'auto',
width: '100%',
});
@@ -188,29 +198,31 @@ export default class KnobPanel extends PureComponent {
const entries = Object.entries(groups);
return (
-
- {entries.length > 1 ? (
-
- {entries.map(([k, v]) => (
-
- {v.render}
-
- ))}
-
- ) : (
-
- )}
+
+
+ {entries.length > 1 ? (
+
+ {entries.map(([k, v]) => (
+
+ {v.render}
+
+ ))}
+
+ ) : (
+
+ )}
+
-
+
);
}
}
diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js
index 24b1d98d3e54..9a4681560db8 100644
--- 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 => )(
+export const Bar = styled(({ children, className }) => (
+
+ {children}
+
+))(
({ theme }) => ({
color: theme.barTextColor,
width: '100%',
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.js b/lib/components/src/syntaxhighlighter/syntaxhighlighter.js
index 3d7b16d80b4f..ab2b6cdec55c 100644
--- 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 => )(
+const Scroller = styled(({ children, className }) => (
+
+ {children}
+
+))(
{
position: 'relative',
},
diff --git a/lib/components/src/tabs/tabs.js b/lib/components/src/tabs/tabs.js
index 24e0bc743c86..c33b368692db 100644
--- 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 ? (
-
-
+
+
{list.map(({ title, id, active }) => (
{tools ? {tools} : null}
- {absolute ? (
-
- {list.map(({ id, active, render }) => render({ key: id, active }))}
-
- ) : (
- {list.map(({ id, active, render }) => render({ key: id, active }))}
- )}
+
+ {list.map(({ id, active, render }) => render({ key: id, active }))}
+
) : (
diff --git a/lib/components/src/typography/DocumentFormatting.js b/lib/components/src/typography/DocumentFormatting.js
index d66f4adea618..4361f9875457 100644
--- 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
index d9c935d881ef..4bd0ced96c7d 100644
--- 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 }) => )(
{
position: 'absolute',
left: 0,