Skip to content

Commit fefa4b4

Browse files
mfrances17mfrances17
committed
reformat and restructure examples
1 parent 77716f8 commit fefa4b4

File tree

3 files changed

+119
-110
lines changed

3 files changed

+119
-110
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 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".
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/ToolbarSpacers.tsx renamed to packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx

Lines changed: 11 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from 'react';
22
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
33
import { Button } from '@patternfly/react-core';
44

5-
export const ToolbarSpacers: React.FunctionComponent = () => {
5+
export const ToolbarGroupSpacers: React.FunctionComponent = () => {
66
const groupGapItems = (
77
<React.Fragment>
8-
<ToolbarGroup variant="action-group">
8+
<ToolbarGroup>
99
<ToolbarItem>
1010
<Button variant="secondary">Default Gap</Button>
1111
</ToolbarItem>
@@ -14,7 +14,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
1414
</ToolbarItem>
1515
</ToolbarGroup>
1616
<ToolbarItem variant="separator"></ToolbarItem>
17-
<ToolbarGroup variant="action-group" gap={{ default: 'gapNone' }}>
17+
<ToolbarGroup gap={{ default: 'gapNone' }}>
1818
<ToolbarItem>
1919
<Button variant="secondary">No Gap</Button>
2020
</ToolbarItem>
@@ -23,7 +23,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
2323
</ToolbarItem>
2424
</ToolbarGroup>
2525
<ToolbarItem variant="separator"></ToolbarItem>
26-
<ToolbarGroup variant="action-group" gap={{ default: 'gapSm' }}>
26+
<ToolbarGroup gap={{ default: 'gapSm' }}>
2727
<ToolbarItem>
2828
<Button variant="secondary">Small Gap</Button>
2929
</ToolbarItem>
@@ -32,7 +32,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
3232
</ToolbarItem>
3333
</ToolbarGroup>
3434
<ToolbarItem variant="separator"></ToolbarItem>
35-
<ToolbarGroup variant="action-group" gap={{ default: 'gapXl' }}>
35+
<ToolbarGroup gap={{ default: 'gapXl' }}>
3636
<ToolbarItem>
3737
<Button variant="secondary">Extra Large Gap</Button>
3838
</ToolbarItem>
@@ -45,7 +45,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
4545

4646
const groupColumnGapItems = (
4747
<React.Fragment>
48-
<ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapNone' }}>
48+
<ToolbarGroup columnGap={{ default: 'columnGapNone' }}>
4949
<ToolbarItem>
5050
<Button variant="secondary">No Column Gap</Button>
5151
</ToolbarItem>
@@ -54,7 +54,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
5454
</ToolbarItem>
5555
</ToolbarGroup>
5656
<ToolbarItem variant="separator"></ToolbarItem>
57-
<ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapSm' }}>
57+
<ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
5858
<ToolbarItem>
5959
<Button variant="secondary">Small Column Gap</Button>
6060
</ToolbarItem>
@@ -63,7 +63,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
6363
</ToolbarItem>
6464
</ToolbarGroup>
6565
<ToolbarItem variant="separator"></ToolbarItem>
66-
<ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapXl' }}>
66+
<ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
6767
<ToolbarItem>
6868
<Button variant="secondary">Extra Large Column Gap</Button>
6969
</ToolbarItem>
@@ -76,7 +76,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
7676

7777
const groupRowGapItems = (
7878
<React.Fragment>
79-
<ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapNone' }}>
79+
<ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
8080
<ToolbarItem>
8181
<Button variant="secondary">No Row Gap</Button>
8282
</ToolbarItem>
@@ -103,7 +103,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
103103
</ToolbarItem>
104104
<ToolbarItem variant="separator"></ToolbarItem>
105105
</ToolbarGroup>
106-
<ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapSm' }}>
106+
<ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
107107
<ToolbarItem>
108108
<Button variant="secondary">Small Row Gap</Button>
109109
</ToolbarItem>
@@ -130,7 +130,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
130130
</ToolbarItem>
131131
<ToolbarItem variant="separator"></ToolbarItem>
132132
</ToolbarGroup>
133-
<ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapXl' }}>
133+
<ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
134134
<ToolbarItem>
135135
<Button variant="secondary">Extra Large Row Gap</Button>
136136
</ToolbarItem>
@@ -159,116 +159,27 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
159159
</React.Fragment>
160160
);
161161

162-
const itemGapItems = (
163-
<React.Fragment>
164-
<ToolbarGroup className="pf-m-wrap" variant="action-group">
165-
<ToolbarItem gap={{ default: 'gapNone' }}>
166-
<Button variant="secondary">No Gap</Button>
167-
<Button variant="secondary">No Gap</Button>
168-
</ToolbarItem>
169-
<ToolbarItem variant="separator"></ToolbarItem>
170-
<ToolbarItem gap={{ default: 'gapSm' }}>
171-
<Button variant="secondary">Small Gap</Button>
172-
<Button variant="secondary">Small Gap</Button>
173-
</ToolbarItem>
174-
<ToolbarItem variant="separator"></ToolbarItem>
175-
<ToolbarItem gap={{ default: 'gapXl' }}>
176-
<Button variant="secondary">Extra Large Gap</Button>
177-
<Button variant="secondary">Extra Large Gap</Button>
178-
</ToolbarItem>
179-
</ToolbarGroup>
180-
</React.Fragment>
181-
);
182-
183-
const itemColumnGapItems = (
184-
<React.Fragment>
185-
<ToolbarGroup className="pf-m-wrap" variant="action-group">
186-
<ToolbarItem columnGap={{ default: 'columnGapNone' }}>
187-
<Button variant="secondary">No Column Gap</Button>
188-
<Button variant="secondary">No Column Gap</Button>
189-
</ToolbarItem>
190-
<ToolbarItem variant="separator"></ToolbarItem>
191-
<ToolbarItem columnGap={{ default: 'columnGapSm' }}>
192-
<Button variant="secondary">Small Column Gap</Button>
193-
<Button variant="secondary">Small Column Gap</Button>
194-
</ToolbarItem>
195-
<ToolbarItem variant="separator"></ToolbarItem>
196-
<ToolbarItem columnGap={{ default: 'columnGapXl' }}>
197-
<Button variant="secondary">Extra Large Column Gap</Button>
198-
<Button variant="secondary">Extra Large Column Gap</Button>
199-
</ToolbarItem>
200-
</ToolbarGroup>
201-
</React.Fragment>
202-
);
203-
204-
const itemRowGapItems = (
205-
<React.Fragment>
206-
<ToolbarGroup variant="action-group">
207-
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
208-
<Button variant="secondary">No Row Gap</Button>
209-
<Button variant="secondary">No Row Gap</Button>
210-
</ToolbarItem>
211-
<ToolbarItem variant="separator"></ToolbarItem>
212-
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
213-
<Button variant="secondary">Small Row Gap</Button>
214-
<Button variant="secondary">Small Row Gap</Button>
215-
</ToolbarItem>
216-
<ToolbarItem variant="separator"></ToolbarItem>
217-
<ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
218-
<Button variant="secondary">Extra Large Row Gap</Button>
219-
<Button variant="secondary">Extra Large Row Gap</Button>
220-
</ToolbarItem>
221-
</ToolbarGroup>
222-
</React.Fragment>
223-
);
224-
225162
return (
226163
<>
227-
<h4>Toolbar group spacing</h4>
228-
<br />
229164
Using gap
230165
<br />
231166
<br />
232167
<Toolbar id="toolbar-spacers">
233168
<ToolbarContent>{groupGapItems}</ToolbarContent>
234169
</Toolbar>
235-
<br />
236170
Using column gap
237171
<br />
238172
<br />
239173
<Toolbar id="toolbar-spacers">
240174
<ToolbarContent>{groupColumnGapItems}</ToolbarContent>
241175
</Toolbar>
242-
<br />
243176
Using row gap
244177
<br />
245178
<br />
246179
<Toolbar id="toolbar-spacers">
247180
<ToolbarContent>{groupRowGapItems}</ToolbarContent>
248181
</Toolbar>
249182
<br />
250-
<h4>Toolbar item spacing</h4>
251-
<br />
252-
Using gap
253-
<br />
254-
<br />
255-
<Toolbar id="toolbar-spacers">
256-
<ToolbarContent>{itemGapItems}</ToolbarContent>
257-
</Toolbar>
258-
<br />
259-
Using column gap
260-
<br />
261-
<br />
262-
<Toolbar id="toolbar-spacers">
263-
<ToolbarContent>{itemColumnGapItems}</ToolbarContent>
264-
</Toolbar>
265-
<br />
266-
Using row gap
267-
<br />
268-
<br />
269-
<Toolbar id="toolbar-spacers">
270-
<ToolbarContent>{itemRowGapItems}</ToolbarContent>
271-
</Toolbar>
272183
</>
273184
);
274185
};

‎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+
};

0 commit comments

Comments
 (0)