Skip to content

Commit 58dae67

Browse files
mfrances17mfrances17
authored
chore(Toolbar): add different gap props to examples (#11440)
* chore(Toolbar): add different gap props to examples * use h4 for example headings * rm redundant wrap classes * reformat and restructure examples
1 parent d885c9f commit 58dae67

File tree

4 files changed

+293
-58
lines changed

4 files changed

+293
-58
lines changed

‎packages/react-core/src/components/Toolbar/examples/Toolbar.md‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
2424

2525
```
2626

27-
### Toolbar item spacers
28-
29-
You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
30-
31-
Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
32-
33-
```ts file="./ToolbarSpacers.tsx"
34-
35-
```
36-
3727
### With adjusted inset
3828

3929
To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
@@ -120,3 +110,20 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
120110
```ts file="./ToolbarStacked.tsx"
121111

122112
```
113+
114+
## Examples with toolbar spacers
115+
You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
116+
117+
Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
118+
119+
### Toolbar group spacers
120+
121+
```ts file="./ToolbarGroupSpacers.tsx"
122+
123+
```
124+
125+
### Toolbar item spacers
126+
127+
```ts file="./ToolbarItemSpacers.tsx"
128+
129+
```

‎packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import React from 'react';
2+
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
3+
import { Button } from '@patternfly/react-core';
4+
5+
export const ToolbarGroupSpacers: React.FunctionComponent = () => {
6+
const groupGapItems = (
7+
<React.Fragment>
8+
<ToolbarGroup>
9+
<ToolbarItem>
10+
<Button variant="secondary">Default Gap</Button>
11+
</ToolbarItem>
12+
<ToolbarItem>
13+
<Button variant="secondary">Default Gap</Button>
14+
</ToolbarItem>
15+
</ToolbarGroup>
16+
<ToolbarItem variant="separator"></ToolbarItem>
17+
<ToolbarGroup gap={{ default: 'gapNone' }}>
18+
<ToolbarItem>
19+
<Button variant="secondary">No Gap</Button>
20+
</ToolbarItem>
21+
<ToolbarItem>
22+
<Button variant="secondary">No Gap</Button>
23+
</ToolbarItem>
24+
</ToolbarGroup>
25+
<ToolbarItem variant="separator"></ToolbarItem>
26+
<ToolbarGroup gap={{ default: 'gapSm' }}>
27+
<ToolbarItem>
28+
<Button variant="secondary">Small Gap</Button>
29+
</ToolbarItem>
30+
<ToolbarItem>
31+
<Button variant="secondary">Small Gap</Button>
32+
</ToolbarItem>
33+
</ToolbarGroup>
34+
<ToolbarItem variant="separator"></ToolbarItem>
35+
<ToolbarGroup gap={{ default: 'gapXl' }}>
36+
<ToolbarItem>
37+
<Button variant="secondary">Extra Large Gap</Button>
38+
</ToolbarItem>
39+
<ToolbarItem>
40+
<Button variant="secondary">Extra Large Gap</Button>
41+
</ToolbarItem>
42+
</ToolbarGroup>
43+
</React.Fragment>
44+
);
45+
46+
const groupColumnGapItems = (
47+
<React.Fragment>
48+
<ToolbarGroup columnGap={{ default: 'columnGapNone' }}>
49+
<ToolbarItem>
50+
<Button variant="secondary">No Column Gap</Button>
51+
</ToolbarItem>
52+
<ToolbarItem>
53+
<Button variant="secondary">No Column Gap</Button>
54+
</ToolbarItem>
55+
</ToolbarGroup>
56+
<ToolbarItem variant="separator"></ToolbarItem>
57+
<ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
58+
<ToolbarItem>
59+
<Button variant="secondary">Small Column Gap</Button>
60+
</ToolbarItem>
61+
<ToolbarItem>
62+
<Button variant="secondary">Small Column Gap</Button>
63+
</ToolbarItem>
64+
</ToolbarGroup>
65+
<ToolbarItem variant="separator"></ToolbarItem>
66+
<ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
67+
<ToolbarItem>
68+
<Button variant="secondary">Extra Large Column Gap</Button>
69+
</ToolbarItem>
70+
<ToolbarItem>
71+
<Button variant="secondary">Extra Large Column Gap</Button>
72+
</ToolbarItem>
73+
</ToolbarGroup>
74+
</React.Fragment>
75+
);
76+
77+
const groupRowGapItems = (
78+
<React.Fragment>
79+
<ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
80+
<ToolbarItem>
81+
<Button variant="secondary">No Row Gap</Button>
82+
</ToolbarItem>
83+
<ToolbarItem>
84+
<Button variant="secondary">No Row Gap</Button>
85+
</ToolbarItem>
86+
<ToolbarItem>
87+
<Button variant="secondary">No Row Gap</Button>
88+
</ToolbarItem>
89+
<ToolbarItem>
90+
<Button variant="secondary">No Row Gap</Button>
91+
</ToolbarItem>
92+
<ToolbarItem>
93+
<Button variant="secondary">No Row Gap</Button>
94+
</ToolbarItem>
95+
<ToolbarItem>
96+
<Button variant="secondary">No Row Gap</Button>
97+
</ToolbarItem>
98+
<ToolbarItem>
99+
<Button variant="secondary">No Row Gap</Button>
100+
</ToolbarItem>
101+
<ToolbarItem>
102+
<Button variant="secondary">No Row Gap</Button>
103+
</ToolbarItem>
104+
<ToolbarItem variant="separator"></ToolbarItem>
105+
</ToolbarGroup>
106+
<ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
107+
<ToolbarItem>
108+
<Button variant="secondary">Small Row Gap</Button>
109+
</ToolbarItem>
110+
<ToolbarItem>
111+
<Button variant="secondary">Small Row Gap</Button>
112+
</ToolbarItem>
113+
<ToolbarItem>
114+
<Button variant="secondary">Small Row Gap</Button>
115+
</ToolbarItem>
116+
<ToolbarItem>
117+
<Button variant="secondary">Small Row Gap</Button>
118+
</ToolbarItem>
119+
<ToolbarItem>
120+
<Button variant="secondary">Small Row Gap</Button>
121+
</ToolbarItem>
122+
<ToolbarItem>
123+
<Button variant="secondary">Small Row Gap</Button>
124+
</ToolbarItem>
125+
<ToolbarItem>
126+
<Button variant="secondary">Small Row Gap</Button>
127+
</ToolbarItem>
128+
<ToolbarItem>
129+
<Button variant="secondary">Small Row Gap</Button>
130+
</ToolbarItem>
131+
<ToolbarItem variant="separator"></ToolbarItem>
132+
</ToolbarGroup>
133+
<ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
134+
<ToolbarItem>
135+
<Button variant="secondary">Extra Large Row Gap</Button>
136+
</ToolbarItem>
137+
<ToolbarItem>
138+
<Button variant="secondary">Extra Large Row Gap</Button>
139+
</ToolbarItem>
140+
<ToolbarItem>
141+
<Button variant="secondary">Extra Large Row Gap</Button>
142+
</ToolbarItem>
143+
<ToolbarItem>
144+
<Button variant="secondary">Extra Large Row Gap</Button>
145+
</ToolbarItem>
146+
<ToolbarItem>
147+
<Button variant="secondary">Extra Large Row Gap</Button>
148+
</ToolbarItem>
149+
<ToolbarItem>
150+
<Button variant="secondary">Extra Large Row Gap</Button>
151+
</ToolbarItem>
152+
<ToolbarItem>
153+
<Button variant="secondary">Extra Large Row Gap</Button>
154+
</ToolbarItem>
155+
<ToolbarItem>
156+
<Button variant="secondary">Extra Large Row Gap</Button>
157+
</ToolbarItem>
158+
</ToolbarGroup>
159+
</React.Fragment>
160+
);
161+
162+
return (
163+
<>
164+
Using gap
165+
<br />
166+
<br />
167+
<Toolbar id="toolbar-spacers">
168+
<ToolbarContent>{groupGapItems}</ToolbarContent>
169+
</Toolbar>
170+
Using column gap
171+
<br />
172+
<br />
173+
<Toolbar id="toolbar-spacers">
174+
<ToolbarContent>{groupColumnGapItems}</ToolbarContent>
175+
</Toolbar>
176+
Using row gap
177+
<br />
178+
<br />
179+
<Toolbar id="toolbar-spacers">
180+
<ToolbarContent>{groupRowGapItems}</ToolbarContent>
181+
</Toolbar>
182+
<br />
183+
</>
184+
);
185+
};

‎packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react';
2+
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
3+
import { Button } from '@patternfly/react-core';
4+
5+
export const ToolbarItemSpacers: React.FunctionComponent = () => {
6+
const itemGapItems = (
7+
<React.Fragment>
8+
<ToolbarGroup className="pf-m-wrap">
9+
<ToolbarItem gap={{ default: 'gapNone' }}>
10+
<Button variant="secondary">No Gap</Button>
11+
<Button variant="secondary">No Gap</Button>
12+
</ToolbarItem>
13+
<ToolbarItem variant="separator"></ToolbarItem>
14+
<ToolbarItem gap={{ default: 'gapSm' }}>
15+
<Button variant="secondary">Small Gap</Button>
16+
<Button variant="secondary">Small Gap</Button>
17+
</ToolbarItem>
18+
<ToolbarItem variant="separator"></ToolbarItem>
19+
<ToolbarItem gap={{ default: 'gapXl' }}>
20+
<Button variant="secondary">Extra Large Gap</Button>
21+
<Button variant="secondary">Extra Large Gap</Button>
22+
</ToolbarItem>
23+
</ToolbarGroup>
24+
</React.Fragment>
25+
);
26+
27+
const itemColumnGapItems = (
28+
<React.Fragment>
29+
<ToolbarGroup className="pf-m-wrap">
30+
<ToolbarItem columnGap={{ default: 'columnGapNone' }}>
31+
<Button variant="secondary">No Column Gap</Button>
32+
<Button variant="secondary">No Column Gap</Button>
33+
</ToolbarItem>
34+
<ToolbarItem variant="separator"></ToolbarItem>
35+
<ToolbarItem columnGap={{ default: 'columnGapSm' }}>
36+
<Button variant="secondary">Small Column Gap</Button>
37+
<Button variant="secondary">Small Column Gap</Button>
38+
</ToolbarItem>
39+
<ToolbarItem variant="separator"></ToolbarItem>
40+
<ToolbarItem columnGap={{ default: 'columnGapXl' }}>
41+
<Button variant="secondary">Extra Large Column Gap</Button>
42+
<Button variant="secondary">Extra Large Column Gap</Button>
43+
</ToolbarItem>
44+
</ToolbarGroup>
45+
</React.Fragment>
46+
);
47+
48+
const itemRowGapItems = (
49+
<React.Fragment>
50+
<ToolbarGroup>
51+
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
52+
<Button variant="secondary">No Row Gap</Button>
53+
<Button variant="secondary">No Row Gap</Button>
54+
</ToolbarItem>
55+
<ToolbarItem variant="separator"></ToolbarItem>
56+
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
57+
<Button variant="secondary">Small Row Gap</Button>
58+
<Button variant="secondary">Small Row Gap</Button>
59+
</ToolbarItem>
60+
<ToolbarItem variant="separator"></ToolbarItem>
61+
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
62+
<Button variant="secondary">Extra Large Row Gap</Button>
63+
<Button variant="secondary">Extra Large Row Gap</Button>
64+
</ToolbarItem>
65+
</ToolbarGroup>
66+
</React.Fragment>
67+
);
68+
69+
return (
70+
<>
71+
Using gap
72+
<br />
73+
<br />
74+
<Toolbar id="toolbar-spacers">
75+
<ToolbarContent>{itemGapItems}</ToolbarContent>
76+
</Toolbar>
77+
Using column gap
78+
<br />
79+
<br />
80+
<Toolbar id="toolbar-spacers">
81+
<ToolbarContent>{itemColumnGapItems}</ToolbarContent>
82+
</Toolbar>
83+
Using row gap
84+
<br />
85+
<br />
86+
<Toolbar id="toolbar-spacers">
87+
<ToolbarContent>{itemRowGapItems}</ToolbarContent>
88+
</Toolbar>
89+
</>
90+
);
91+
};

‎packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx‎

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

0 commit comments

Comments
 (0)