Skip to content

Commit

Permalink
Update to the latest PF versions (patternfly#224)
Browse files Browse the repository at this point in the history 
* Update PF dependencies

* Fix MCC colors

* Replace not existing PF Text components

* Update snapshots
  • Loading branch information
@fhlavac
fhlavac committed Aug 18, 2024
1 parent f7c40f7 commit 5864b58
Show file tree
Hide file tree
Showing 22 changed files with 1,522 additions and 1,471 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Please see the [migration guide](./migration.md)
#### Example component:
```
import * as React from 'react';
import { Text } from '@patternfly/react-core';
import { Content } from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';
// do not forget to export your component's interface
Expand All @@ -42,9 +42,9 @@ const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
const classes = useStyles();
return (
<Text className={classes.myText}>
<Content className={classes.myText}>
This is my new reusable component
</Text>
</Content>
);
};
Expand Down
10 changes: 5 additions & 5 deletions packages/module/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@
"tag": "alpha"
},
"dependencies": {
"@patternfly/react-core": "^6.0.0-alpha.69",
"@patternfly/react-icons": "^6.0.0-alpha.24",
"@patternfly/react-table": "^6.0.0-alpha.70",
"@patternfly/react-core": "^6.0.0-alpha.94",
"@patternfly/react-icons": "^6.0.0-alpha.34",
"@patternfly/react-table": "^6.0.0-alpha.95",
"react-jss": "^10.10.0",
"clsx": "^2.1.1"
},
Expand All @@ -43,8 +43,8 @@
},
"devDependencies": {
"@patternfly/patternfly-a11y": "^4.3.1",
"@patternfly/documentation-framework": "^6.0.0-alpha.46",
"@patternfly/patternfly": "6.0.0-alpha.139",
"@patternfly/documentation-framework": "^6.0.0-alpha.69",
"@patternfly/patternfly": "6.0.0-alpha.205",
"@types/react": "^18.2.33",
"@types/react-dom": "^18.2.14",
"@types/react-router-dom": "^5.3.3",
Expand Down
98 changes: 44 additions & 54 deletions ...content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,102 @@
import React from 'react';
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { Button, Card, CardHeader, CardBody, Text, TextContent, TextVariants, Icon, TextList, TextListItem, CardFooter } from '@patternfly/react-core';
import { Button, Card, CardHeader, CardBody, Content, ContentVariants, List, ListItem, Icon, CardFooter } from '@patternfly/react-core';
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
import { createUseStyles } from 'react-jss';
import clsx from 'clsx';

const useStyles = createUseStyles({
action: {
color: 'var(--pf-t--color--blue--60)',
color: 'var(--pf-t--global--text--color--brand--default)',
fontSize: 'var(--pf-t--global--font--size--200)',
},
},
actionIcon: {
color: 'var(--pf-t--global--color--brand--default)',
},
bulletPoints: {
color: 'var(--pf-t--global--color--brand--default)',
},
});

export const BasicExample: React.FunctionComponent = () => {
const classes = useStyles();

const cards = [
<Card isFullHeight isPlain key="card-1">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Getting Started</Text>
</TextContent>
<Content component={ContentVariants.h4}>Getting Started</Content>
</CardHeader>
<CardBody>
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<CogIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<CogIcon className={classes.actionIcon} />
</Icon>
Configure application
</Text>
<Text className="pf-v6-u-font-size-sm">
</Content>
<Content className="pf-v6-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<TextContent>
<TextList className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
<TextListItem>
<Button variant="link" isInline>First link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Second link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Another link</Button>
</TextListItem>
</TextList>
</TextContent>
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
<ListItem>
<Button variant="link" isInline>First link</Button>
</ListItem>
<ListItem>
<Button variant="link" isInline>Second link</Button>
</ListItem>
<ListItem>
<Button variant="link" isInline>Another link</Button>
</ListItem>
</List>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-2">
<CardBody className="pf-v6-u-pt-3xl-on-md">
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon className={classes.actionIcon} />
</Icon>
Configure access
</Text>
<Text>
</Content>
<Content>
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.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<Text>
<Content>
<Button variant="link" isInline>
Learn more
<Icon className="pf-v6-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</Content>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-3">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Next Steps</Text>
</TextContent>
<Content component={ContentVariants.h4}>Next Steps</Content>
</CardHeader>
<CardBody>
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<BellIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<BellIcon className={classes.actionIcon} />
</Icon>
Configure notifications
</Text>
<Text>
</Content>
<Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<Text>
<Content>
<Button variant="link" isInline>
Learn more
<Icon className="pf-v6-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</Content>
</CardFooter>
</Card>
];
Expand Down
97 changes: 44 additions & 53 deletions ...s/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import React from 'react';
import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
import { EllipsisVIcon } from '@patternfly/react-icons';
import { Button, Card, CardHeader, CardBody, CardFooter, Text, TextContent, TextVariants, Icon, TextList, TextListItem, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
import { Button, Card, CardHeader, CardBody, CardFooter, Content, ContentVariants, List, ListItem, Icon, Divider, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
import { createUseStyles } from 'react-jss';
import clsx from 'clsx';

const useStyles = createUseStyles({
action: {
color: 'var(--pf-t--color--blue--60)',
color: 'var(--pf-t--global--text--color--brand--default)',
fontSize: 'var(--pf-t--global--font--size--200)',
},
},
actionIcon: {
color: 'var(--pf-t--global--color--brand--default)',
},
bulletPoints: {
color: 'var(--pf-t--global--color--brand--default)',
},
Expand All @@ -23,92 +26,80 @@ export const BasicExample: React.FunctionComponent = () => {
const cards = [
<Card isFullHeight isPlain key="card-1">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Getting Started</Text>
</TextContent>
<Content component={ContentVariants.h4}>Getting Started</Content>
</CardHeader>
<CardBody>
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<CogIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<CogIcon className={classes.actionIcon} />
</Icon>
Configure application
</Text>
<Text className="pf-v6-u-font-size-sm">
</Content>
<Content className="pf-v6-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<TextContent>
<TextList className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
<TextListItem>
<Button variant="link" isInline>First link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Second link</Button>
</TextListItem>
<TextListItem>
<Button variant="link" isInline>Another link</Button>
</TextListItem>
</TextList>
</TextContent>
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
<ListItem>
<Button variant="link" isInline>First link</Button>
</ListItem>
<ListItem>
<Button variant="link" isInline>Second link</Button>
</ListItem>
<ListItem>
<Button variant="link" isInline>Another link</Button>
</ListItem>
</List>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-2">
<CardBody className="pf-v6-u-pt-3xl-on-md">
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon className={classes.actionIcon} />
</Icon>
Configure access
</Text>
<Text className="pf-v6-u-font-size-sm">
</Content>
<Content className="pf-v6-u-font-size-sm">
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.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<Text>
<Content>
<Button variant="link" isInline>
Learn more
<Icon className="pf-v6-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</Content>
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-3">
<CardHeader>
<TextContent>
<Text component={TextVariants.h4}>Next Steps</Text>
</TextContent>
<Content component={ContentVariants.h4}>Next Steps</Content>
</CardHeader>
<CardBody>
<TextContent>
<Text className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<BellIcon />
</Icon>
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<BellIcon className={classes.actionIcon} />
</Icon>
Configure notifications
</Text>
<Text className="pf-v6-u-font-size-sm">
</Content>
<Content className="pf-v6-u-font-size-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</TextContent>
</Content>
</CardBody>
<CardFooter>
<Text>
<Content>
<Button variant="link" isInline>
Learn more
<Icon className="pf-v6-u-ml-sm" isInline>
<ArrowRightIcon />
</Icon>
</Button>
</Text>
</Content>
</CardFooter>
</Card>
];
Expand Down
Loading

0 comments on commit 5864b58

Please sign in to comment.