Skip to content

Commit ec9ca43

Browse files
author
Jeff Puzzo
committed
removing all flexbox usages
1 parent 82ee717 commit ec9ca43

13 files changed

Lines changed: 164 additions & 163 deletions

File tree

‎packages/react-core/src/components/Badge/examples/BadgeRead.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import React from 'react';
2-
import { Badge, Flex } from '@patternfly/react-core';
2+
import { Badge } from '@patternfly/react-core';
33

44
export const BadgeRead: React.FunctionComponent = () => (
5-
<Flex>
6-
<Badge isRead>7</Badge>
7-
<Badge isRead>24</Badge>
8-
<Badge isRead>240</Badge>
9-
<Badge isRead>999+</Badge>
10-
</Flex>
5+
<React.Fragment>
6+
<Badge key={1} isRead>
7+
7
8+
</Badge>{' '}
9+
<Badge key={2} isRead>
10+
24
11+
</Badge>{' '}
12+
<Badge key={3} isRead>
13+
240
14+
</Badge>{' '}
15+
<Badge key={4} isRead>
16+
999+
17+
</Badge>
18+
</React.Fragment>
1119
);

‎packages/react-core/src/components/Badge/examples/BadgeUnread.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React from 'react';
2-
import { Badge, Flex } from '@patternfly/react-core';
2+
import { Badge } from '@patternfly/react-core';
33

44
export const BadgeUnread: React.FunctionComponent = () => (
5-
<Flex>
6-
<Badge>7</Badge>
7-
<Badge>24</Badge>
8-
<Badge>240</Badge>
9-
<Badge>999+</Badge>
10-
</Flex>
5+
<React.Fragment>
6+
<Badge key={1}>7</Badge> <Badge key={2}>24</Badge> <Badge key={3}>240</Badge> <Badge key={4}>999+</Badge>
7+
</React.Fragment>
118
);

‎packages/react-core/src/components/Banner/examples/BannerBasic.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React from 'react';
2-
import { Banner, Flex } from '@patternfly/react-core';
2+
import { Banner } from '@patternfly/react-core';
33

44
export const BannerBasic: React.FunctionComponent = () => (
5-
<Flex direction={{ default: 'column' }}>
5+
<React.Fragment>
66
<Banner>Default banner</Banner>
7+
<br />
78
<Banner variant="info">Info banner</Banner>
9+
<br />
810
<Banner variant="danger">Danger banner</Banner>
11+
<br />
912
<Banner variant="success">Success banner</Banner>
13+
<br />
1014
<Banner variant="warning">Warning banner</Banner>
11-
</Flex>
15+
</React.Fragment>
1216
);

‎packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ const dropdownItems: JSX.Element[] = [
2222
];
2323

2424
export const BreadcrumbDropdown: React.FunctionComponent = () => {
25-
const [isOpen, setIsOpen] = React.useState<boolean>(false);
25+
const [isOpen, setIsOpen] = React.useState(false);
2626
const badgeToggleRef = React.useRef<HTMLButtonElement>();
2727

28-
const onToggle = React.useCallback((isOpen: boolean) => setIsOpen(isOpen), []);
28+
const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
2929

30-
const onSelect = React.useCallback(() => {
30+
const onSelect = () => {
3131
setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
3232
badgeToggleRef.current.focus();
33-
}, []);
33+
};
3434

3535
return (
3636
<Breadcrumb>

‎packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,39 @@
11
import React from 'react';
2-
import { Button, Flex } from '@patternfly/react-core';
2+
import { Button } from '@patternfly/react-core';
33
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
44
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
55

66
export const ButtonAriaDisabled: React.FunctionComponent = () => (
7-
<Flex direction={{ default: 'column' }}>
8-
<Flex>
9-
<Button isAriaDisabled>Primary aria disabled</Button>
10-
<Button isAriaDisabled>Secondary aria disabled</Button>
11-
<Button variant="secondary" isDanger isAriaDisabled>
12-
Danger secondary aria disabled
13-
</Button>
14-
<Button isAriaDisabled variant="tertiary">
15-
Tertiary aria disabled
16-
</Button>
17-
<Button isAriaDisabled variant="danger">
18-
Danger disabled
19-
</Button>
20-
<Button isAriaDisabled variant="warning">
21-
Warning disabled
22-
</Button>
23-
</Flex>
24-
25-
<Flex>
26-
<Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
27-
Link aria disabled
28-
</Button>
29-
<Button isAriaDisabled variant="link" isInline>
30-
Inline link aria disabled
31-
</Button>
32-
<Button variant="link" isDanger isAriaDisabled>
33-
Danger link disabled
34-
</Button>
35-
<Button isAriaDisabled variant="plain" aria-label="Action">
36-
<TimesIcon />
37-
</Button>
38-
<Button isAriaDisabled variant="control">
39-
Control aria disabled
40-
</Button>
41-
</Flex>
42-
</Flex>
7+
<React.Fragment>
8+
<Button isAriaDisabled>Primary aria disabled</Button> <Button isAriaDisabled>Secondary aria disabled</Button>{' '}
9+
<Button variant="secondary" isDanger isAriaDisabled>
10+
Danger secondary aria disabled
11+
</Button>{' '}
12+
<Button isAriaDisabled variant="tertiary">
13+
Tertiary aria disabled
14+
</Button>{' '}
15+
<Button isAriaDisabled variant="danger">
16+
Danger disabled
17+
</Button>{' '}
18+
<Button isAriaDisabled variant="warning">
19+
Warning disabled
20+
</Button>
21+
<br />
22+
<br />
23+
<Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
24+
Link aria disabled
25+
</Button>{' '}
26+
<Button isAriaDisabled variant="link" isInline>
27+
Inline link aria disabled
28+
</Button>{' '}
29+
<Button variant="link" isDanger isAriaDisabled>
30+
Danger link disabled
31+
</Button>{' '}
32+
<Button isAriaDisabled variant="plain" aria-label="Action">
33+
<TimesIcon />
34+
</Button>{' '}
35+
<Button isAriaDisabled variant="control">
36+
Control aria disabled
37+
</Button>
38+
</React.Fragment>
4339
);

‎packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import React from 'react';
2-
import { Button, Flex } from '@patternfly/react-core';
2+
import { Button } from '@patternfly/react-core';
33
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
44

55
export const ButtonCallToAction: React.FunctionComponent = () => (
6-
<Flex>
6+
<React.Fragment>
77
<Button variant="primary" isLarge>
88
Call to action
9-
</Button>
9+
</Button>{' '}
1010
<Button variant="secondary" isLarge>
1111
Call to action
12-
</Button>
12+
</Button>{' '}
1313
<Button variant="tertiary" isLarge>
1414
Call to action
15-
</Button>
15+
</Button>{' '}
1616
<Button variant="link" isLarge>
1717
Call to action <ArrowRightIcon />
1818
</Button>
19-
</Flex>
19+
<br />
20+
<br />
21+
</React.Fragment>
2022
);

‎packages/react-core/src/components/Button/examples/ButtonDisabled.tsx‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,39 @@
11
import React from 'react';
2-
import { Button, Flex } from '@patternfly/react-core';
2+
import { Button } from '@patternfly/react-core';
33
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
44
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
55

66
export const ButtonDisabled: React.FunctionComponent = () => (
7-
<Flex direction={{ default: 'column' }}>
8-
<Flex>
9-
<Button isDisabled>Primary disabled</Button>
10-
<Button isDisabled>Secondary disabled</Button>
11-
<Button variant="secondary" isDanger isDisabled>
12-
Danger secondary disabled
13-
</Button>
14-
<Button isDisabled variant="tertiary">
15-
Tertiary disabled
16-
</Button>
17-
<Button isDisabled variant="danger">
18-
Danger disabled
19-
</Button>
20-
<Button isDisabled variant="warning">
21-
Warning disabled
22-
</Button>
23-
</Flex>
24-
25-
<Flex>
26-
<Button isDisabled variant="link" icon={<PlusCircleIcon />}>
27-
Link disabled
28-
</Button>
29-
<Button isDisabled variant="link" isInline>
30-
Inline link disabled
31-
</Button>
32-
<Button variant="link" isDanger isDisabled>
33-
Danger link disabled
34-
</Button>
35-
<Button isDisabled variant="plain" aria-label="Action">
36-
<TimesIcon />
37-
</Button>
38-
<Button isDisabled variant="control">
39-
Control disabled
40-
</Button>
41-
</Flex>
42-
</Flex>
7+
<React.Fragment>
8+
<Button isDisabled>Primary disabled</Button> <Button isDisabled>Secondary disabled</Button>{' '}
9+
<Button variant="secondary" isDanger isDisabled>
10+
Danger secondary disabled
11+
</Button>{' '}
12+
<Button isDisabled variant="tertiary">
13+
Tertiary disabled
14+
</Button>{' '}
15+
<Button isDisabled variant="danger">
16+
Danger disabled
17+
</Button>{' '}
18+
<Button isDisabled variant="warning">
19+
Warning disabled
20+
</Button>
21+
<br />
22+
<br />
23+
<Button isDisabled variant="link" icon={<PlusCircleIcon />}>
24+
Link disabled
25+
</Button>{' '}
26+
<Button isDisabled variant="link" isInline>
27+
Inline link disabled
28+
</Button>{' '}
29+
<Button variant="link" isDanger isDisabled>
30+
Danger link disabled
31+
</Button>{' '}
32+
<Button isDisabled variant="plain" aria-label="Action">
33+
<TimesIcon />
34+
</Button>{' '}
35+
<Button isDisabled variant="control">
36+
Control disabled
37+
</Button>
38+
</React.Fragment>
4339
);

‎packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const handleKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
1313
};
1414

1515
export const ButtonInlineSpanLink: React.FunctionComponent = () => (
16-
<>
16+
<React.Fragment>
1717
<p>
1818
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1919
<Button variant="link" isInline component="span">
@@ -32,5 +32,5 @@ export const ButtonInlineSpanLink: React.FunctionComponent = () => (
3232
</Button>
3333
Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.
3434
</p>
35-
</>
35+
</React.Fragment>
3636
);

‎packages/react-core/src/components/Button/examples/ButtonLinks.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React from 'react';
2-
import { Button, Flex } from '@patternfly/react-core';
2+
import { Button } from '@patternfly/react-core';
33

44
export const ButtonLinks: React.FunctionComponent = () => (
5-
<Flex>
5+
<React.Fragment>
66
<Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="primary">
77
Link to core docs
8-
</Button>
8+
</Button>{' '}
99
<Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="secondary">
1010
Secondary link to core docs
11-
</Button>
11+
</Button>{' '}
1212
<Button isDisabled component="a" href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
1313
Tertiary link to core docs
14-
</Button>
14+
</Button>{' '}
1515
<Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link">
1616
Jump to modifiers in contribution guidelines
1717
</Button>
18-
</Flex>
18+
</React.Fragment>
1919
);

‎packages/react-core/src/components/Button/examples/ButtonProgress.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
11
import React from 'react';
2-
import { Button, Flex } from '@patternfly/react-core';
2+
import { Button } from '@patternfly/react-core';
33

44
export const ButtonProgress: React.FunctionComponent = () => {
55
const [isPrimaryLoading, setIsPrimaryLoading] = React.useState<boolean>(true);
66
const [isSecondaryLoading, setIsSecondaryLoading] = React.useState<boolean>(true);
77

88
return (
9-
<Flex>
9+
<React.Fragment>
1010
<Button
11+
spinnerAriaValueText={isPrimaryLoading ? 'Loading' : undefined}
1112
isLoading={isPrimaryLoading}
1213
variant="primary"
1314
onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
1415
{...(isPrimaryLoading && { spinnerAriaValueText: 'Loading' })}
1516
>
1617
{isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
17-
</Button>
18-
18+
</Button>{' '}
1919
<Button
20+
spinnerAriaValueText={isSecondaryLoading ? 'Loading' : undefined}
2021
isLoading={isSecondaryLoading}
2122
variant="secondary"
2223
onClick={() => setIsSecondaryLoading(!isSecondaryLoading)}
2324
{...(isSecondaryLoading && { spinnerAriaValueText: 'Loading' })}
2425
>
2526
{isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
2627
</Button>
27-
</Flex>
28+
<br />
29+
<br />
30+
</React.Fragment>
2831
);
2932
};

0 commit comments

Comments
 (0)