Skip to content

Commit adb73f5

Browse files
walauraacao
walaura
authored and
acao
committed
feat(graphiql-theming): Toolbar component (#1203) by @walaura
* separate dividers for the toolbar * add toolbar * add layout to stories Authored-by @walaura
1 parent 9e18ad5 commit adb73f5

File tree

14 files changed

+1157
-249
lines changed

14 files changed

+1157
-249
lines changed

‎packages/graphiql/.storybook/decorators.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
const styles = {
4+
maxWidth: '60em',
5+
margin: '5em auto',
6+
border: '1px solid #eee',
7+
};
8+
9+
export const layout = storyFn => <div style={styles}>{storyFn()}</div>;

‎packages/graphiql/src/new-components/Layout.stories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import Nav from './Nav';
3-
import List, { ListRow } from './List';
3+
import List, { ListRow } from './List/List';
44
import { useThemeLayout } from './themes/provider';
55

66
const explorer = {

‎packages/graphiql/src/new-components/List.js‎ renamed to ‎packages/graphiql/src/new-components/List/List.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/** @jsx jsx */
22
import { jsx } from 'theme-ui';
3-
43
import PropTypes from 'prop-types';
54

6-
const ListRow = ({ children, flex = false, padding = true }) => (
5+
const ListRow = ({ children, flex = false, padding = false }) => (
76
<div
87
sx={{
98
overflow: 'auto',
109
flex: flex && '1 1 auto',
11-
padding: padding && 3,
10+
padding: padding ? ({ spaces }) => spaces.rowPadding : undefined,
11+
minHeight: ({ spaces }) => spaces.rowMinHeight,
1212
}}>
1313
{children}
1414
</div>

‎packages/graphiql/src/new-components/List.stories.js‎ renamed to ‎packages/graphiql/src/new-components/List/List.stories.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ const longText = Array(300)
1111
export const withFlexChild = () => (
1212
<div style={{ height: '100vh', display: 'grid' }}>
1313
<List>
14-
<ListRow>
15-
{
16-
'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
17-
}
14+
<ListRow padding>
15+
<div>
16+
{
17+
'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
18+
}
19+
</div>
1820
</ListRow>
19-
<ListRow flex>
21+
<ListRow padding flex>
2022
{'You normally want 1 flex area that grows forever like this one'}
2123
{longText}
2224
{'the end'}
@@ -28,17 +30,17 @@ export const withFlexChild = () => (
2830
export const withStackedRows = () => (
2931
<div style={{ height: '100vh', display: 'grid' }}>
3032
<List>
31-
<ListRow>{'Title'}</ListRow>
32-
<ListRow>{'Navigation'}</ListRow>
33-
<ListRow>{'Search'}</ListRow>
34-
<ListRow>{'Filter'}</ListRow>
35-
<ListRow flex>
33+
<ListRow padding>{'Title'}</ListRow>
34+
<ListRow padding>{'Navigation'}</ListRow>
35+
<ListRow padding>{'Search'}</ListRow>
36+
<ListRow padding>{'Filter'}</ListRow>
37+
<ListRow padding flex>
3638
{'Actual content'}
3739
{longText}
3840
{'Actual content ends here'}
3941
</ListRow>
40-
<ListRow>{'Footer'}</ListRow>
41-
<ListRow>{'Footers footer'}</ListRow>
42+
<ListRow padding>{'Footer'}</ListRow>
43+
<ListRow padding>{'Footers footer'}</ListRow>
4244
</List>
4345
</div>
4446
);

‎packages/graphiql/src/new-components/Tabs.js‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎packages/graphiql/src/new-components/Toolbar/Content.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/** @jsx jsx */
2+
import { jsx } from 'theme-ui';
3+
4+
const Content = ({ ...props }) => (
5+
<div
6+
{...props}
7+
sx={{
8+
padding: ({ spaces }) => spaces.rowPadding,
9+
}}
10+
/>
11+
);
12+
13+
export default Content;

‎packages/graphiql/src/new-components/Toolbar/Tabs.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/** @jsx jsx */
2+
import { jsx } from 'theme-ui';
3+
import PropTypes from 'prop-types';
4+
import WithDividers from './support/WithDividers';
5+
6+
const Tab = ({ active, ...props }) => (
7+
<button
8+
sx={{
9+
padding: ({ spaces }) => spaces.rowPadding,
10+
outline: 'none',
11+
textAlign: 'end',
12+
verticalAlign: 'baseline',
13+
transition: ({ transitions }) => transitions[0],
14+
cursor: 'pointer',
15+
':focus, :hover': {
16+
boxShadow: active ? 'primaryUnderline' : 'underline',
17+
color: active ? 'primary' : 'darkText',
18+
},
19+
boxShadow: active ? 'primaryUnderline' : 'inset 0 0 0 transparent',
20+
color: active ? 'primary' : 'text',
21+
}}
22+
{...props}
23+
/>
24+
);
25+
Tab.propTypes = { active: PropTypes.bool };
26+
27+
const Tabs = ({ tabs, active, onChange }) => {
28+
return (
29+
<WithDividers>
30+
{tabs.map((tab, index) => (
31+
<Tab
32+
key={index}
33+
active={active === index}
34+
onClick={() => onChange(index)}>
35+
{tab}
36+
</Tab>
37+
))}
38+
</WithDividers>
39+
);
40+
};
41+
42+
Tabs.propTypes = {
43+
tabs: PropTypes.arrayOf(PropTypes.node).isRequired,
44+
active: PropTypes.number.isRequired,
45+
onChange: PropTypes.func.isRequired,
46+
};
47+
48+
export default Tabs;

‎packages/graphiql/src/new-components/Tabs.stories.js‎ renamed to ‎packages/graphiql/src/new-components/Toolbar/Tabs.stories.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
import List, { ListRow } from './List';
1+
import List, { ListRow } from '../List/List';
22
import Tabs from './Tabs';
33
import React, { useState } from 'react';
4+
import { layout } from '../../../.storybook/decorators';
45

5-
export default { title: 'Tabs' };
6+
export default { title: 'Tabbar', decorators: [layout] };
67

78
// eslint-disable-next-line react/prop-types
89
const ManagedTabs = ({ tabs }) => {
9-
const [active, setActive] = useState(1);
10+
const [active, setActive] = useState(0);
1011
return <Tabs active={active} tabs={tabs} onChange={setActive} />;
1112
};
1213

1314
export const Tabbar = () => (
1415
<List>
15-
<ListRow padding={false}>
16-
<ManagedTabs tabs={['First', 'Second', 'Third']} />
16+
<ListRow>
17+
<ManagedTabs tabs={['One', 'Two', 'Three']} />
1718
</ListRow>
18-
<ListRow padding={false}>
19+
<ListRow>
1920
<ManagedTabs
2021
tabs={[
2122
'With',
@@ -28,8 +29,8 @@ export const Tabbar = () => (
2829
]}
2930
/>
3031
</ListRow>
31-
<ListRow padding={false}>
32-
<div style={{ height: 100 }}>
32+
<ListRow flex>
33+
<div style={{ height: '100px', display: 'grid' }}>
3334
<ManagedTabs tabs={['Very tall', 'tabs']} />
3435
</div>
3536
</ListRow>

‎packages/graphiql/src/new-components/Toolbar/Toolbar.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/** @jsx jsx */
2+
import { jsx } from 'theme-ui';
3+
import PropTypes from 'prop-types';
4+
import WithDividers from './support/WithDividers';
5+
6+
const Toolbar = ({ children, justifyContent = 'space-between' }) => {
7+
const needsExtraPadding = !justifyContent.includes('space');
8+
return (
9+
<div
10+
sx={{
11+
overflow: 'auto',
12+
display: 'flex',
13+
alignItems: 'stretch',
14+
justifyContent,
15+
}}>
16+
{needsExtraPadding ? (
17+
<WithDividers padding>{children}</WithDividers>
18+
) : (
19+
children
20+
)}
21+
</div>
22+
);
23+
};
24+
Toolbar.propTypes = {
25+
justifyContent: PropTypes.oneOf([
26+
'space-between',
27+
'space-around',
28+
'flex-start',
29+
'flex-end',
30+
'center',
31+
]),
32+
};
33+
34+
export default Toolbar;

‎packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import List, { ListRow } from '../List/List';
2+
import Tabs from './Tabs';
3+
import React from 'react';
4+
import Toolbar from './Toolbar';
5+
import Content from './Content';
6+
import { layout } from '../../../.storybook/decorators';
7+
8+
export default { title: 'Toolbar', decorators: [layout] };
9+
10+
export const Basic = () => (
11+
<List>
12+
<ListRow padding>
13+
<p>{`Toolbars group together widgets in a flexbox. You can cutomize what type of
14+
justification to use and if elements go together it'll add dividers
15+
between them`}</p>
16+
</ListRow>
17+
<ListRow>
18+
<Toolbar justifyContent="center">
19+
<Content>{'Some text'}</Content>
20+
<Content>{'Some text'}</Content>
21+
<Content>{'Some text'}</Content>
22+
</Toolbar>
23+
</ListRow>
24+
<ListRow>
25+
<Toolbar justifyContent="flex-start">
26+
<Content>{'Some text'}</Content>
27+
<Content>{'Some text'}</Content>
28+
<Content>{'Some text'}</Content>
29+
</Toolbar>
30+
</ListRow>
31+
<ListRow>
32+
<Toolbar justifyContent="flex-end">
33+
<Content>{'Some text'}</Content>
34+
<Content>{'Some text'}</Content>
35+
<Content>{'Some text'}</Content>
36+
</Toolbar>
37+
</ListRow>
38+
<ListRow>
39+
<Toolbar justifyContent="space-between">
40+
<Content>{'Some text'}</Content>
41+
<Content>{'Some text'}</Content>
42+
<Content>{'Some text'}</Content>
43+
</Toolbar>
44+
</ListRow>
45+
</List>
46+
);
47+
48+
export const ToolbarWithTabs = () => (
49+
<List>
50+
<ListRow padding>
51+
<p>
52+
{`The dividers don't nest so if you have tabs inside a toolbar the tabs won't get dividers`}
53+
</p>
54+
</ListRow>
55+
<ListRow>
56+
<Toolbar justifyContent="center">
57+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
58+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
59+
</Toolbar>
60+
</ListRow>
61+
<ListRow>
62+
<Toolbar justifyContent="flex-start">
63+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
64+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
65+
</Toolbar>
66+
</ListRow>
67+
<ListRow>
68+
<Toolbar justifyContent="flex-end">
69+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
70+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
71+
</Toolbar>
72+
</ListRow>
73+
<ListRow>
74+
<Toolbar justifyContent="space-between">
75+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
76+
<Tabs active={2} tabs={['First', 'Second', 'Third']} />
77+
</Toolbar>
78+
</ListRow>
79+
</List>
80+
);

0 commit comments

Comments
 (0)