Skip to content

Commit 6d77bbb

Browse files
Mash707Mash707
authored
chore(flex): convert examples to typescript part-2 (#12059)
1 parent 78f4cf8 commit 6d77bbb

19 files changed

+284
-230
lines changed

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

Lines changed: 22 additions & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -133,322 +133,114 @@ The flex layout provides two ways of spacing its direct children.
133133

134134
### Switching between direction column and row
135135

136-
```js
137-
import { Flex, FlexItem } from '@patternfly/react-core';
138-
139-
<Flex direction={{ default: 'column', lg: 'row' }}>
140-
<Flex>
141-
<FlexItem>Flex item</FlexItem>
142-
<FlexItem>Flex item</FlexItem>
143-
<FlexItem>Flex item</FlexItem>
144-
<FlexItem>Flex item</FlexItem>
145-
</Flex>
146-
<Flex direction={{ default: 'column' }}>
147-
<FlexItem>Flex item</FlexItem>
148-
<FlexItem>Flex item</FlexItem>
149-
</Flex>
150-
</Flex>;
136+
```ts file="FlexSwitchingColumnRow.tsx"
137+
151138
```
152139

153140
### Controlling width of text
154141

155-
```js
156-
import { Flex, FlexItem } from '@patternfly/react-core';
142+
```ts file="FlexControlTextWidth.tsx"
157143

158-
<Flex direction={{ default: 'column', lg: 'row' }}>
159-
<Flex flex={{ default: 'flex_1' }}>
160-
<FlexItem>Flex item</FlexItem>
161-
<FlexItem>
162-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam
163-
dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.
164-
</FlexItem>
165-
</Flex>
166-
<Flex direction={{ default: 'column' }}>
167-
<FlexItem>Flex item</FlexItem>
168-
<FlexItem>Flex item</FlexItem>
169-
</Flex>
170-
</Flex>;
171144
```
172145

173146
## Flex alignment
174147

175148
### Aligning right
176149

177-
```js
178-
import { Flex, FlexItem } from '@patternfly/react-core';
150+
```ts file="FlexAligningRight.tsx"
179151

180-
<Flex className="example-border">
181-
<FlexItem>Flex item</FlexItem>
182-
<FlexItem>Flex item</FlexItem>
183-
<FlexItem>Flex item</FlexItem>
184-
<FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
185-
<FlexItem>Flex item</FlexItem>
186-
</Flex>;
187152
```
188153

189154
### Align right on single item
190155

191-
```js
192-
import { Flex, FlexItem } from '@patternfly/react-core';
156+
```ts file="FlexAlignRightSingleItem.tsx"
193157

194-
<Flex className="example-border">
195-
<FlexItem align={{ default: 'alignRight' }}>Flex item</FlexItem>
196-
<FlexItem>Flex item</FlexItem>
197-
</Flex>;
198158
```
199159

200160
### Align right on multiple groups
201161

202-
```js
203-
import { Flex, FlexItem } from '@patternfly/react-core';
204-
205-
<Flex>
206-
<Flex>
207-
<FlexItem>Flex item</FlexItem>
208-
<FlexItem>Flex item</FlexItem>
209-
</Flex>
210-
<Flex align={{ default: 'alignRight' }}>
211-
<FlexItem>Flex item</FlexItem>
212-
<FlexItem>Flex item</FlexItem>
213-
</Flex>
214-
<Flex align={{ default: 'alignRight' }}>
215-
<FlexItem>Flex item</FlexItem>
216-
<FlexItem>Flex item</FlexItem>
217-
</Flex>
218-
</Flex>;
162+
```ts file="FlexAlignRightMultipleGroups.tsx"
163+
219164
```
220165

221166
### Align adjacent content
222167

223-
```js
224-
import { Flex, FlexItem } from '@patternfly/react-core';
168+
```ts file="FlexAlignAdjacentContent.tsx"
225169

226-
<Flex>
227-
<Flex flex={{ default: 'flex_1' }}>
228-
<FlexItem>Flex item</FlexItem>
229-
<FlexItem>Flex item</FlexItem>
230-
<FlexItem>Flex item</FlexItem>
231-
<FlexItem>Flex item</FlexItem>
232-
</Flex>
233-
<Flex>
234-
<FlexItem>Flex item</FlexItem>
235-
<FlexItem>Flex item</FlexItem>
236-
</Flex>
237-
</Flex>;
238170
```
239171

240172
### Align self flex end
241173

242-
```js
243-
import { Flex, FlexItem } from '@patternfly/react-core';
174+
```ts file="FlexAlignSelfFlexEnd.tsx"
244175

245-
<Flex>
246-
<Flex direction={{ default: 'column' }}>
247-
<FlexItem>Flex item</FlexItem>
248-
<FlexItem>Flex item</FlexItem>
249-
<FlexItem>Flex item</FlexItem>
250-
</Flex>
251-
<Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfFlexEnd' }}>
252-
<FlexItem>Flex item</FlexItem>
253-
<FlexItem>Flex item</FlexItem>
254-
</Flex>
255-
</Flex>;
256176
```
257177

258178
### Align self center
259179

260-
```js
261-
import { Flex, FlexItem } from '@patternfly/react-core';
180+
```ts file="FlexAlignSelfCenter.tsx"
262181

263-
<Flex>
264-
<Flex direction={{ default: 'column' }}>
265-
<FlexItem>Flex item</FlexItem>
266-
<FlexItem>Flex item</FlexItem>
267-
<FlexItem>Flex item</FlexItem>
268-
</Flex>
269-
<Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
270-
<FlexItem>Flex item</FlexItem>
271-
<FlexItem>Flex item</FlexItem>
272-
</Flex>
273-
</Flex>;
274182
```
275183

276184
### Align self baseline
277185

278-
```js
279-
import { Flex, FlexItem } from '@patternfly/react-core';
186+
```ts file="FlexAlignSelfBaseline.tsx"
280187

281-
<Flex>
282-
<Flex direction={{ default: 'column' }}>
283-
<FlexItem>Flex item</FlexItem>
284-
<FlexItem>Flex item</FlexItem>
285-
<FlexItem>Flex item</FlexItem>
286-
</Flex>
287-
<Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfBaseline' }}>
288-
<FlexItem>Flex item</FlexItem>
289-
<FlexItem>Flex item</FlexItem>
290-
</Flex>
291-
</Flex>;
292188
```
293189

294190
### Align self stretch
295191

296-
```js
297-
import { Flex, FlexItem } from '@patternfly/react-core';
192+
```ts file="FlexAlignSelfStretch.tsx"
298193

299-
<Flex>
300-
<Flex direction={{ default: 'column' }}>
301-
<FlexItem>Flex item</FlexItem>
302-
<FlexItem>Flex item</FlexItem>
303-
<FlexItem>Flex item</FlexItem>
304-
</Flex>
305-
<Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfStretch' }}>
306-
<FlexItem>Flex item</FlexItem>
307-
<FlexItem>Flex item</FlexItem>
308-
</Flex>
309-
</Flex>;
310194
```
311195

312196
## Flex justification
313197

314198
### Justify content flex end
315199

316-
```js
317-
import { Flex, FlexItem } from '@patternfly/react-core';
200+
```ts file="FlexJustifyContentEnd.tsx"
318201

319-
<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexEnd' }}>
320-
<FlexItem>Flex item</FlexItem>
321-
<FlexItem>Flex item</FlexItem>
322-
<FlexItem>Flex item</FlexItem>
323-
<FlexItem>Flex item</FlexItem>
324-
</Flex>;
325202
```
326203

327204
### Justify content space between
328205

329-
```js
330-
import { Flex, FlexItem } from '@patternfly/react-core';
206+
```ts file="FlexJustifyContentSpaceBetween.tsx"
331207

332-
<Flex className="example-border" justifyContent={{ default: 'justifyContentSpaceBetween' }}>
333-
<FlexItem>Flex item</FlexItem>
334-
<FlexItem>Flex item</FlexItem>
335-
<FlexItem>Flex item</FlexItem>
336-
</Flex>;
337208
```
338209

339210
### Justify content flex start
340211

341-
```js
342-
import { Flex, FlexItem } from '@patternfly/react-core';
212+
```ts file="FlexJustifyContentFlexStart.tsx"
343213

344-
<Flex className="example-border" justifyContent={{ default: 'justifyContentFlexStart' }}>
345-
<FlexItem>Flex item</FlexItem>
346-
<FlexItem>Flex item</FlexItem>
347-
<FlexItem>Flex item</FlexItem>
348-
</Flex>;
349214
```
350215

351216
## Flex item order
352217

353218
### First last ordering
354219

355-
```js
356-
import { Flex, FlexItem } from '@patternfly/react-core';
220+
```ts file="FlexFirstLastOrder.tsx"
357221

358-
<Flex className="example-border">
359-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '2' }}>
360-
Item A
361-
</FlexItem>
362-
<FlexItem>Item B</FlexItem>
363-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '-1' }}>
364-
Item C
365-
</FlexItem>
366-
</Flex>;
367222
```
368223

369224
### Responsive first last ordering
370225

371-
```js
372-
import { Flex, FlexItem } from '@patternfly/react-core';
226+
```ts file="FlexResponsiveFirstLastOrder.tsx"
373227

374-
<Flex className="example-border">
375-
<FlexItem spacer={{ lg: 'spacerNone' }} order={{ lg: '2' }}>
376-
Item A
377-
</FlexItem>
378-
<FlexItem spacer={{ md: 'spacerNone', lg: 'spacerMd' }} order={{ default: '-1', md: '1' }}>
379-
Item B
380-
</FlexItem>
381-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ md: '-1' }}>
382-
Item C
383-
</FlexItem>
384-
</Flex>;
385228
```
386229

387230
### Ordering
388231

389-
```js
390-
import { Flex, FlexItem } from '@patternfly/react-core';
391-
392-
<Flex className="example-border">
393-
<Flex spacer={{ default: 'spacerNone' }} order={{ lg: '1' }} className="example-border">
394-
<FlexItem order={{ md: '2' }}>Set 1, Item A</FlexItem>
395-
<FlexItem order={{ md: '-1' }}>Set 1, Item B</FlexItem>
396-
<FlexItem order={{ xl: '1' }}>Set 1, Item C</FlexItem>
397-
<FlexItem spacer={{ xl: 'spacerNone' }} order={{ xl: '1' }}>
398-
Set 1, Item D
399-
</FlexItem>
400-
</Flex>
401-
<Flex spacer={{ lg: 'spacerMd' }} className="example-border">
402-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
403-
Set 2, Item A
404-
</FlexItem>
405-
<FlexItem order={{ default: '1' }}>Set 2, Item B</FlexItem>
406-
<FlexItem>Set 2, Item C</FlexItem>
407-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
408-
Set 2, Item D
409-
</FlexItem>
410-
</Flex>
411-
</Flex>;
232+
```ts file="FlexOrdering.tsx"
233+
412234
```
413235

414236
### Responsive ordering
415237

416-
```js
417-
import { Flex, FlexItem } from '@patternfly/react-core';
418-
419-
<Flex className="example-border">
420-
<Flex spacer={{ default: 'spacerNone' }} order={{ default: '1' }} className="example-border">
421-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
422-
Set 1, Item A
423-
</FlexItem>
424-
<FlexItem order={{ default: '1' }}>Set 1, Item B</FlexItem>
425-
<FlexItem>Set 1, Item C</FlexItem>
426-
<FlexItem spacer={{ default: 'spacerMd' }}>Set 1, Item D</FlexItem>
427-
</Flex>
428-
429-
<Flex spacer={{ default: 'spacerMd' }} className="example-border">
430-
<FlexItem spacer={{ default: 'spacerNone' }} order={{ default: '3' }}>
431-
Set 2, Item A
432-
</FlexItem>
433-
<FlexItem order={{ lg: '1' }}>Set 2, Item B</FlexItem>
434-
<FlexItem>Set 2, Item C</FlexItem>
435-
<FlexItem spacer={{ default: 'spacerMd' }} order={{ default: '2' }}>
436-
Set 2, Item D
437-
</FlexItem>
438-
</Flex>
439-
</Flex>;
238+
```ts file="FlexResponsiveOrdering.tsx"
239+
440240
```
441241

442242
### Alternative components
443243

444-
```js
445-
import { Flex, FlexItem } from '@patternfly/react-core';
244+
```ts file="FlexAlternative.tsx"
446245

447-
<Flex component="ul">
448-
<FlexItem component="li">Flex item</FlexItem>
449-
<FlexItem component="li">Flex item</FlexItem>
450-
<FlexItem component="li">Flex item</FlexItem>
451-
<FlexItem component="li">Flex item</FlexItem>
452-
<FlexItem component="li">Flex item</FlexItem>
453-
</Flex>;
454246
```

‎packages/react-core/src/layouts/Flex/examples/FlexAlignAdjacentContent.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 FlexAlignAdjacentContent: React.FunctionComponent = () => (
4+
<Flex>
5+
<Flex flex={{ default: 'flex_1' }}>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
<FlexItem>Flex item</FlexItem>
9+
<FlexItem>Flex item</FlexItem>
10+
</Flex>
11+
<Flex>
12+
<FlexItem>Flex item</FlexItem>
13+
<FlexItem>Flex item</FlexItem>
14+
</Flex>
15+
</Flex>
16+
);

‎packages/react-core/src/layouts/Flex/examples/FlexAlignRightMultipleGroups.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 FlexAlignRightMultipleGroups: React.FunctionComponent = () => (
4+
<Flex>
5+
<Flex>
6+
<FlexItem>Flex item</FlexItem>
7+
<FlexItem>Flex item</FlexItem>
8+
</Flex>
9+
<Flex align={{ default: 'alignRight' }}>
10+
<FlexItem>Flex item</FlexItem>
11+
<FlexItem>Flex item</FlexItem>
12+
</Flex>
13+
<Flex align={{ default: 'alignRight' }}>
14+
<FlexItem>Flex item</FlexItem>
15+
<FlexItem>Flex item</FlexItem>
16+
</Flex>
17+
</Flex>
18+
);

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

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

0 commit comments

Comments
 (0)