Skip to content

Commit 382777f

Browse files
Mash707Mash707
authored
chore(Flex): convert examples to typescript (#12058)
1 parent 13676a8 commit 382777f

18 files changed

+260
-209
lines changed

‎packages/react-core/src/layouts/Flex/examples/Flex.md‎

Lines changed: 17 additions & 209 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,20 @@ import './flex.css';
1111

1212
### Basic
1313

14-
```js
15-
import { Flex, FlexItem } from '@patternfly/react-core';
14+
```ts file="FlexBasic.tsx"
1615

17-
<Flex>
18-
<FlexItem>Flex item</FlexItem>
19-
<FlexItem>Flex item</FlexItem>
20-
<FlexItem>Flex item</FlexItem>
21-
<FlexItem>Flex item</FlexItem>
22-
<FlexItem>Flex item</FlexItem>
23-
</Flex>;
2416
```
2517

2618
### Nesting
2719

28-
```js
29-
import { Flex, FlexItem } from '@patternfly/react-core';
20+
```ts file="FlexNesting.tsx"
3021

31-
<Flex>
32-
<Flex>
33-
<FlexItem>Flex item</FlexItem>
34-
<FlexItem>Flex item</FlexItem>
35-
</Flex>
36-
<Flex>
37-
<FlexItem>Flex item</FlexItem>
38-
<FlexItem>Flex item</FlexItem>
39-
<FlexItem>Flex item</FlexItem>
40-
</Flex>
41-
</Flex>;
4222
```
4323

4424
### Nested with items
4525

46-
```js
47-
import { Flex, FlexItem } from '@patternfly/react-core';
26+
```ts file="FlexNestedItems.tsx"
4827

49-
<Flex>
50-
<Flex>
51-
<FlexItem>Flex item</FlexItem>
52-
<FlexItem>Flex item</FlexItem>
53-
</Flex>
54-
<FlexItem>Flex item</FlexItem>
55-
<FlexItem>Flex item</FlexItem>
56-
<Flex>
57-
<FlexItem>Flex item</FlexItem>
58-
</Flex>
59-
</Flex>;
6028
```
6129

6230
### Spacing
@@ -73,252 +41,92 @@ The flex layout provides two ways of spacing its direct children.
7341

7442
### Individually spaced
7543

76-
```js
77-
import { Flex, FlexItem } from '@patternfly/react-core';
44+
```ts file="FlexIndividuallySpaced.tsx"
7845

79-
<Flex>
80-
<FlexItem spacer={{ default: 'spacerNone' }}>Item - none</FlexItem>
81-
<FlexItem spacer={{ default: 'spacerXs' }}>Item - xs</FlexItem>
82-
<FlexItem spacer={{ default: 'spacerSm' }}>Item -sm</FlexItem>
83-
<FlexItem spacer={{ default: 'spacerMd' }}>Item - md</FlexItem>
84-
<FlexItem spacer={{ default: 'spacerLg' }}>Item - lg</FlexItem>
85-
<FlexItem spacer={{ default: 'spacerXl' }}>Item - xl</FlexItem>
86-
<FlexItem spacer={{ default: 'spacer2xl' }}>Item - 2xl</FlexItem>
87-
<FlexItem spacer={{ default: 'spacer3xl' }}>Item - 3xl</FlexItem>
88-
</Flex>;
8946
```
9047

9148
### Spacing xl
9249

93-
```js
94-
import { Flex, FlexItem } from '@patternfly/react-core';
50+
```ts file="FlexSpacingXl.tsx"
9551

96-
<Flex spaceItems={{ default: 'spaceItemsXl' }}>
97-
<FlexItem>Flex item</FlexItem>
98-
<FlexItem>Flex item</FlexItem>
99-
<FlexItem>Flex item</FlexItem>
100-
<FlexItem>Flex item</FlexItem>
101-
<FlexItem>Flex item</FlexItem>
102-
</Flex>;
10352
```
10453

10554
### Spacing none
10655

107-
```js
108-
import { Flex, FlexItem } from '@patternfly/react-core';
56+
```ts file="FlexSpacingNone.tsx"
10957

110-
<Flex spaceItems={{ default: 'spaceItemsNone' }}>
111-
<FlexItem>Flex item</FlexItem>
112-
<FlexItem>Flex item</FlexItem>
113-
<FlexItem>Flex item</FlexItem>
114-
<FlexItem>Flex item</FlexItem>
115-
<FlexItem>Flex item</FlexItem>
116-
</Flex>;
11758
```
11859

11960
### Flex gap spacing
12061

12162
### Row gap
12263

123-
```js
124-
import { Flex, FlexItem } from '@patternfly/react-core';
64+
```ts file="FlexRowGap.tsx"
12565

126-
<Flex rowGap={{ default: 'rowGap2xl' }}>
127-
<FlexItem>Flex item</FlexItem>
128-
<FlexItem>Flex item</FlexItem>
129-
<FlexItem>Flex item</FlexItem>
130-
<FlexItem>Flex item</FlexItem>
131-
<FlexItem>Flex item</FlexItem>
132-
<FlexItem>Flex item</FlexItem>
133-
<FlexItem>Flex item</FlexItem>
134-
<FlexItem>Flex item</FlexItem>
135-
<FlexItem>Flex item</FlexItem>
136-
<FlexItem>Flex item</FlexItem>
137-
</Flex>;
13866
```
13967

14068
### Column gap
14169

142-
```js
143-
import { Flex, FlexItem } from '@patternfly/react-core';
70+
```ts file="FlexColumnGap.tsx"
14471

145-
<Flex columnGap={{ default: 'columnGap2xl' }}>
146-
<FlexItem>Flex item</FlexItem>
147-
<FlexItem>Flex item</FlexItem>
148-
<FlexItem>Flex item</FlexItem>
149-
<FlexItem>Flex item</FlexItem>
150-
<FlexItem>Flex item</FlexItem>
151-
<FlexItem>Flex item</FlexItem>
152-
<FlexItem>Flex item</FlexItem>
153-
<FlexItem>Flex item</FlexItem>
154-
<FlexItem>Flex item</FlexItem>
155-
<FlexItem>Flex item</FlexItem>
156-
</Flex>;
15772
```
15873

15974
### Gap
16075

161-
```js
162-
import { Flex, FlexItem } from '@patternfly/react-core';
76+
```ts file="FlexGap.tsx"
16377

164-
<Flex gap={{ default: 'gap2xl' }}>
165-
<FlexItem>Flex item</FlexItem>
166-
<FlexItem>Flex item</FlexItem>
167-
<FlexItem>Flex item</FlexItem>
168-
<FlexItem>Flex item</FlexItem>
169-
<FlexItem>Flex item</FlexItem>
170-
<FlexItem>Flex item</FlexItem>
171-
<FlexItem>Flex item</FlexItem>
172-
<FlexItem>Flex item</FlexItem>
173-
<FlexItem>Flex item</FlexItem>
174-
<FlexItem>Flex item</FlexItem>
175-
</Flex>;
17678
```
17779

17880
### Flex layout modifiers
17981

18082
### Default layout
18183

182-
```js
183-
import { Flex, FlexItem } from '@patternfly/react-core';
84+
```ts file="FlexDefaultLayout.tsx"
18485

185-
<Flex className="example-border">
186-
<FlexItem>Flex item</FlexItem>
187-
<FlexItem>Flex item</FlexItem>
188-
<FlexItem>Flex item</FlexItem>
189-
<FlexItem>Flex item</FlexItem>
190-
<FlexItem>Flex item</FlexItem>
191-
</Flex>;
19286
```
19387

19488
### Inline
19589

196-
```js
197-
import { Flex, FlexItem } from '@patternfly/react-core';
90+
```ts file="FlexInline.tsx"
19891

199-
<Flex className="example-border" display={{ default: 'inlineFlex' }}>
200-
<FlexItem>Flex item</FlexItem>
201-
<FlexItem>Flex item</FlexItem>
202-
<FlexItem>Flex item</FlexItem>
203-
<FlexItem>Flex item</FlexItem>
204-
<FlexItem>Flex item</FlexItem>
205-
</Flex>;
20692
```
20793

20894
### Using canGrow
20995

210-
```js
211-
import { Flex, FlexItem } from '@patternfly/react-core';
96+
```ts file="FlexCanGrow.tsx"
21297

213-
<Flex>
214-
<Flex grow={{ default: 'grow' }}>
215-
<FlexItem>Flex item</FlexItem>
216-
<FlexItem>Flex item</FlexItem>
217-
<FlexItem>Flex item</FlexItem>
218-
</Flex>
219-
<Flex>
220-
<FlexItem>Flex item</FlexItem>
221-
<FlexItem>Flex item</FlexItem>
222-
</Flex>
223-
<Flex>
224-
<FlexItem>Flex item</FlexItem>
225-
</Flex>
226-
</Flex>;
22798
```
22899

229100
### Adjusting width
230101

231-
```js
232-
import { Flex, FlexItem } from '@patternfly/react-core';
102+
```ts file="FlexAdjustingWidth.tsx"
233103

234-
<Flex>
235-
<Flex flex={{ default: 'flex_1' }}>
236-
<FlexItem>Flex item</FlexItem>
237-
</Flex>
238-
<Flex flex={{ default: 'flex_1' }}>
239-
<FlexItem>Flex item</FlexItem>
240-
<FlexItem>Flex item</FlexItem>
241-
</Flex>
242-
<Flex flex={{ default: 'flex_1' }}>
243-
<FlexItem>Flex item</FlexItem>
244-
<FlexItem>Flex item</FlexItem>
245-
<FlexItem>Flex item</FlexItem>
246-
</Flex>
247-
</Flex>;
248104
```
249105

250106
### Specifying column widths
251107

252-
```js
253-
import { Flex, FlexItem } from '@patternfly/react-core';
108+
```ts file="FlexColumnWidths.tsx"
254109

255-
<Flex>
256-
<Flex flex={{ default: 'flex_1' }}>
257-
<FlexItem>Flex item</FlexItem>
258-
</Flex>
259-
<Flex flex={{ default: 'flex_2' }}>
260-
<FlexItem>Flex item</FlexItem>
261-
<FlexItem>Flex item</FlexItem>
262-
</Flex>
263-
<Flex flex={{ default: 'flex_3' }}>
264-
<FlexItem>Flex item</FlexItem>
265-
<FlexItem>Flex item</FlexItem>
266-
<FlexItem>Flex item</FlexItem>
267-
</Flex>
268-
</Flex>;
269110
```
270111

271112
## Column layout modifiers
272113

273114
### Column layout
274115

275-
```js
276-
import { Flex, FlexItem } from '@patternfly/react-core';
116+
```ts file="FlexColumnLayout.tsx"
277117

278-
<Flex direction={{ default: 'column' }}>
279-
<FlexItem>Flex item</FlexItem>
280-
<FlexItem>Flex item</FlexItem>
281-
<FlexItem>Flex item</FlexItem>
282-
</Flex>;
283118
```
284119

285120
### Stacking elements
286121

287-
```js
288-
import { Flex, FlexItem } from '@patternfly/react-core';
122+
```ts file="FlexStackingElements.tsx"
289123

290-
<Flex direction={{ default: 'column' }}>
291-
<Flex>
292-
<FlexItem>Flex item</FlexItem>
293-
<FlexItem>Flex item</FlexItem>
294-
<FlexItem>Flex item</FlexItem>
295-
</Flex>
296-
<Flex>
297-
<FlexItem>Flex item</FlexItem>
298-
<FlexItem>Flex item</FlexItem>
299-
</Flex>
300-
<Flex>
301-
<FlexItem>Flex item</FlexItem>
302-
</Flex>
303-
</Flex>;
304124
```
305125

306126
### Nesting elements in columns
307127

308-
```js
309-
import { Flex, FlexItem } from '@patternfly/react-core';
128+
```ts file="FlexNestingInColumns.tsx"
310129

311-
<Flex>
312-
<Flex direction={{ default: 'column' }}>
313-
<FlexItem>Flex item</FlexItem>
314-
<FlexItem>Flex item</FlexItem>
315-
<FlexItem>Flex item</FlexItem>
316-
</Flex>
317-
<Flex direction={{ default: 'column' }}>
318-
<FlexItem>Flex item</FlexItem>
319-
<FlexItem>Flex item</FlexItem>
320-
</Flex>
321-
</Flex>;
322130
```
323131

324132
## Responsive layout modifiers

‎packages/react-core/src/layouts/Flex/examples/FlexAdjustingWidth.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexAdjustingWidth: React.FunctionComponent = () => (
4+
<Flex>
5+
<Flex flex={{ default: 'flex_1' }}>
6+
<FlexItem>Flex item</FlexItem>
7+
</Flex>
8+
<Flex flex={{ default: 'flex_1' }}>
9+
<FlexItem>Flex item</FlexItem>
10+
<FlexItem>Flex item</FlexItem>
11+
</Flex>
12+
<Flex flex={{ default: 'flex_1' }}>
13+
<FlexItem>Flex item</FlexItem>
14+
<FlexItem>Flex item</FlexItem>
15+
<FlexItem>Flex item</FlexItem>
16+
</Flex>
17+
</Flex>
18+
);

‎packages/react-core/src/layouts/Flex/examples/FlexBasic.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexBasic: React.FunctionComponent = () => (
4+
<Flex>
5+
<FlexItem>Flex item</FlexItem>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
<FlexItem>Flex item</FlexItem>
9+
<FlexItem>Flex item</FlexItem>
10+
</Flex>
11+
);

‎packages/react-core/src/layouts/Flex/examples/FlexCanGrow.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexCanGrow: React.FunctionComponent = () => (
4+
<Flex>
5+
<Flex grow={{ default: 'grow' }}>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
<FlexItem>Flex item</FlexItem>
9+
</Flex>
10+
<Flex>
11+
<FlexItem>Flex item</FlexItem>
12+
<FlexItem>Flex item</FlexItem>
13+
</Flex>
14+
<Flex>
15+
<FlexItem>Flex item</FlexItem>
16+
</Flex>
17+
</Flex>
18+
);

‎packages/react-core/src/layouts/Flex/examples/FlexColumnGap.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexColumnGap: React.FunctionComponent = () => (
4+
<Flex columnGap={{ default: 'columnGap2xl' }}>
5+
<FlexItem>Flex item</FlexItem>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
<FlexItem>Flex item</FlexItem>
9+
<FlexItem>Flex item</FlexItem>
10+
<FlexItem>Flex item</FlexItem>
11+
<FlexItem>Flex item</FlexItem>
12+
<FlexItem>Flex item</FlexItem>
13+
<FlexItem>Flex item</FlexItem>
14+
<FlexItem>Flex item</FlexItem>
15+
</Flex>
16+
);

‎packages/react-core/src/layouts/Flex/examples/FlexColumnLayout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Flex, FlexItem } from '@patternfly/react-core';
2+
3+
export const FlexColumnLayout: React.FunctionComponent = () => (
4+
<Flex direction={{ default: 'column' }}>
5+
<FlexItem>Flex item</FlexItem>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
</Flex>
9+
);

0 commit comments

Comments
 (0)