Skip to content

Commit 0c08332

Browse files
fhlavacfhlavac
committed
Update to the latest PF versions (#224)
* Update PF dependencies * Fix MCC colors * Replace not existing PF Text components * Update snapshots
1 parent 5ee0231 commit 0c08332

File tree

22 files changed

+1522
-1471
lines changed

22 files changed

+1522
-1471
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Please see the [migration guide](./migration.md)
2121
#### Example component:
2222
```
2323
import * as React from 'react';
24-
import { Text } from '@patternfly/react-core';
24+
import { Content } from '@patternfly/react-core';
2525
import { createUseStyles } from 'react-jss';
2626
2727
// do not forget to export your component's interface
@@ -42,9 +42,9 @@ const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
4242
const classes = useStyles();
4343
4444
return (
45-
<Text className={classes.myText}>
45+
<Content className={classes.myText}>
4646
This is my new reusable component
47-
</Text>
47+
</Content>
4848
);
4949
};
5050

‎packages/module/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
"tag": "alpha"
3232
},
3333
"dependencies": {
34-
"@patternfly/react-core": "^6.0.0-alpha.69",
35-
"@patternfly/react-icons": "^6.0.0-alpha.24",
36-
"@patternfly/react-table": "^6.0.0-alpha.70",
34+
"@patternfly/react-core": "^6.0.0-alpha.94",
35+
"@patternfly/react-icons": "^6.0.0-alpha.34",
36+
"@patternfly/react-table": "^6.0.0-alpha.95",
3737
"react-jss": "^10.10.0",
3838
"clsx": "^2.1.1"
3939
},
@@ -43,8 +43,8 @@
4343
},
4444
"devDependencies": {
4545
"@patternfly/patternfly-a11y": "^4.3.1",
46-
"@patternfly/documentation-framework": "^6.0.0-alpha.46",
47-
"@patternfly/patternfly": "6.0.0-alpha.139",
46+
"@patternfly/documentation-framework": "^6.0.0-alpha.69",
47+
"@patternfly/patternfly": "6.0.0-alpha.205",
4848
"@types/react": "^18.2.33",
4949
"@types/react-dom": "^18.2.14",
5050
"@types/react-router-dom": "^5.3.3",

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx‎

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,102 @@
11
import React from 'react';
22
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
3-
import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter } from '@patternfly/react-core';
3+
import { Button, Card, CardHeader, CardBody, Content, ContentVariants, List, ListItem, Icon, CardFooter } from '@patternfly/react-core';
44
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
55
import { createUseStyles } from 'react-jss';
66
import clsx from 'clsx';
77

88
const useStyles = createUseStyles({
99
action: {
10-
color: 'var(--pf-t--color--blue--60)',
10+
color: 'var(--pf-t--global--text--color--brand--default)',
1111
fontSize: 'var(--pf-t--global--font--size--200)',
12-
},
12+
},
13+
actionIcon: {
14+
color: 'var(--pf-t--global--color--brand--default)',
15+
},
1316
bulletPoints: {
1417
color: 'var(--pf-t--global--color--brand--default)',
1518
},
1619
});
17-
1820
export const BasicExample: React.FunctionComponent = () => {
1921
const classes = useStyles();
2022

2123
const cards = [
2224
<Card isFullHeight isPlain key="card-1">
2325
<CardHeader>
24-
<TextContent>
25-
<Text component={TextVariants.h4}>Getting Started</Text>
26-
</TextContent>
26+
<Content component={ContentVariants.h4}>Getting Started</Content>
2727
</CardHeader>
2828
<CardBody>
29-
<TextContent>
30-
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
31-
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
32-
<CogIcon />
33-
</Icon>
29+
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
30+
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
31+
<CogIcon className={classes.actionIcon} />
32+
</Icon>
3433
Configure application
35-
</Text>
36-
<Text className="pf-v6-u-font-size-sm">
34+
</Content>
35+
<Content className="pf-v6-u-font-size-sm">
3736
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
38-
</Text>
39-
</TextContent>
37+
</Content>
4038
</CardBody>
4139
<CardFooter>
42-
<TextContent>
43-
<TextList className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
44-
<TextListItem>
45-
<Button variant="link" isInline>First link</Button>
46-
</TextListItem>
47-
<TextListItem>
48-
<Button variant="link" isInline>Second link</Button>
49-
</TextListItem>
50-
<TextListItem>
51-
<Button variant="link" isInline>Another link</Button>
52-
</TextListItem>
53-
</TextList>
54-
</TextContent>
40+
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
41+
<ListItem>
42+
<Button variant="link" isInline>First link</Button>
43+
</ListItem>
44+
<ListItem>
45+
<Button variant="link" isInline>Second link</Button>
46+
</ListItem>
47+
<ListItem>
48+
<Button variant="link" isInline>Another link</Button>
49+
</ListItem>
50+
</List>
5551
</CardFooter>
5652
</Card>,
5753
<Card isFullHeight isPlain key="card-2">
5854
<CardBody className="pf-v6-u-pt-3xl-on-md">
59-
<TextContent>
60-
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
61-
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
62-
<LockIcon />
63-
</Icon>
55+
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
56+
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
57+
<LockIcon className={classes.actionIcon} />
58+
</Icon>
6459
Configure access
65-
</Text>
66-
<Text>
60+
</Content>
61+
<Content>
6762
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
68-
</Text>
69-
</TextContent>
63+
</Content>
7064
</CardBody>
7165
<CardFooter>
72-
<Text>
66+
<Content>
7367
<Button variant="link" isInline>
7468
Learn more
7569
<Icon className="pf-v6-u-ml-sm" isInline>
7670
<ArrowRightIcon />
7771
</Icon>
7872
</Button>
79-
</Text>
73+
</Content>
8074
</CardFooter>
8175
</Card>,
8276
<Card isFullHeight isPlain key="card-3">
8377
<CardHeader>
84-
<TextContent>
85-
<Text component={TextVariants.h4}>Next Steps</Text>
86-
</TextContent>
78+
<Content component={ContentVariants.h4}>Next Steps</Content>
8779
</CardHeader>
8880
<CardBody>
89-
<TextContent>
90-
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
91-
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
92-
<BellIcon />
93-
</Icon>
81+
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
82+
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
83+
<BellIcon className={classes.actionIcon} />
84+
</Icon>
9485
Configure notifications
95-
</Text>
96-
<Text>
86+
</Content>
87+
<Content>
9788
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
98-
</Text>
99-
</TextContent>
89+
</Content>
10090
</CardBody>
10191
<CardFooter>
102-
<Text>
92+
<Content>
10393
<Button variant="link" isInline>
10494
Learn more
10595
<Icon className="pf-v6-u-ml-sm" isInline>
10696
<ArrowRightIcon />
10797
</Icon>
10898
</Button>
109-
</Text>
99+
</Content>
110100
</CardFooter>
111101
</Card>
112102
];

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx‎

Lines changed: 44 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import React from 'react';
22
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
33
import { EllipsisVIcon } from '@patternfly/react-icons';
4-
import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
4+
import { Button, Card, CardHeader, CardBody, CardFooter, Content, ContentVariants, List, ListItem, Icon, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
55
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
66
import { createUseStyles } from 'react-jss';
77
import clsx from 'clsx';
88

99
const useStyles = createUseStyles({
1010
action: {
11-
color: 'var(--pf-t--color--blue--60)',
11+
color: 'var(--pf-t--global--text--color--brand--default)',
1212
fontSize: 'var(--pf-t--global--font--size--200)',
13-
},
13+
},
14+
actionIcon: {
15+
color: 'var(--pf-t--global--color--brand--default)',
16+
},
1417
bulletPoints: {
1518
color: 'var(--pf-t--global--color--brand--default)',
1619
},
@@ -23,92 +26,80 @@ export const BasicExample: React.FunctionComponent = () => {
2326
const cards = [
2427
<Card isFullHeight isPlain key="card-1">
2528
<CardHeader>
26-
<TextContent>
27-
<Text component={TextVariants.h4}>Getting Started</Text>
28-
</TextContent>
29+
<Content component={ContentVariants.h4}>Getting Started</Content>
2930
</CardHeader>
3031
<CardBody>
31-
<TextContent>
32-
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
33-
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
34-
<CogIcon />
35-
</Icon>
32+
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
33+
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
34+
<CogIcon className={classes.actionIcon} />
35+
</Icon>
3636
Configure application
37-
</Text>
38-
<Text className="pf-v6-u-font-size-sm">
37+
</Content>
38+
<Content className="pf-v6-u-font-size-sm">
3939
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
40-
</Text>
41-
</TextContent>
40+
</Content>
4241
</CardBody>
4342
<CardFooter>
44-
<TextContent>
45-
<TextList className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
46-
<TextListItem>
47-
<Button variant="link" isInline>First link</Button>
48-
</TextListItem>
49-
<TextListItem>
50-
<Button variant="link" isInline>Second link</Button>
51-
</TextListItem>
52-
<TextListItem>
53-
<Button variant="link" isInline>Another link</Button>
54-
</TextListItem>
55-
</TextList>
56-
</TextContent>
43+
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
44+
<ListItem>
45+
<Button variant="link" isInline>First link</Button>
46+
</ListItem>
47+
<ListItem>
48+
<Button variant="link" isInline>Second link</Button>
49+
</ListItem>
50+
<ListItem>
51+
<Button variant="link" isInline>Another link</Button>
52+
</ListItem>
53+
</List>
5754
</CardFooter>
5855
</Card>,
5956
<Card isFullHeight isPlain key="card-2">
6057
<CardBody className="pf-v6-u-pt-3xl-on-md">
61-
<TextContent>
62-
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
63-
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
64-
<LockIcon />
65-
</Icon>
58+
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
59+
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
60+
<LockIcon className={classes.actionIcon} />
61+
</Icon>
6662
Configure access
67-
</Text>
68-
<Text className="pf-v6-u-font-size-sm">
63+
</Content>
64+
<Content className="pf-v6-u-font-size-sm">
6965
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
70-
</Text>
71-
</TextContent>
66+
</Content>
7267
</CardBody>
7368
<CardFooter>
74-
<Text>
69+
<Content>
7570
<Button variant="link" isInline>
7671
Learn more
7772
<Icon className="pf-v6-u-ml-sm" isInline>
7873
<ArrowRightIcon />
7974
</Icon>
8075
</Button>
81-
</Text>
76+
</Content>
8277
</CardFooter>
8378
</Card>,
8479
<Card isFullHeight isPlain key="card-3">
8580
<CardHeader>
86-
<TextContent>
87-
<Text component={TextVariants.h4}>Next Steps</Text>
88-
</TextContent>
81+
<Content component={ContentVariants.h4}>Next Steps</Content>
8982
</CardHeader>
9083
<CardBody>
91-
<TextContent>
92-
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
93-
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
94-
<BellIcon />
95-
</Icon>
84+
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
85+
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
86+
<BellIcon className={classes.actionIcon} />
87+
</Icon>
9688
Configure notifications
97-
</Text>
98-
<Text className="pf-v6-u-font-size-sm">
89+
</Content>
90+
<Content className="pf-v6-u-font-size-sm">
9991
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
100-
</Text>
101-
</TextContent>
92+
</Content>
10293
</CardBody>
10394
<CardFooter>
104-
<Text>
95+
<Content>
10596
<Button variant="link" isInline>
10697
Learn more
10798
<Icon className="pf-v6-u-ml-sm" isInline>
10899
<ArrowRightIcon />
109100
</Icon>
110101
</Button>
111-
</Text>
102+
</Content>
112103
</CardFooter>
113104
</Card>
114105
];

0 commit comments

Comments
 (0)