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,