Skip to content

Commit 6246c61

Browse files
logonofflogonoff
committed
chore(deps): replace clsx with @patternfly/react-styles
1 parent 1ee5173 commit 6246c61

24 files changed

Lines changed: 116 additions & 151 deletions

File tree

‎cypress/component/MultiContentCard.cy.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '@patternfly/react-core';
1515
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
1616
import { createUseStyles } from 'react-jss';
17-
import clsx from 'clsx';
17+
import { css } from '@patternfly/react-styles';
1818

1919
const useStyles = createUseStyles({
2020
action: {
@@ -35,7 +35,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
3535
<Content component={ContentVariants.h4}>Getting Started</Content>
3636
</CardHeader>
3737
<CardBody>
38-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
38+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
3939
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
4040
<CogIcon />
4141
</Icon>
@@ -47,7 +47,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
4747
</Content>
4848
</CardBody>
4949
<CardFooter>
50-
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
50+
<List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
5151
<ListItem>
5252
<Button variant="link" isInline>
5353
First link
@@ -68,7 +68,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
6868
</Card>,
6969
<Card isFullHeight isPlain key="card-2">
7070
<CardBody>
71-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
71+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
7272
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
7373
<LockIcon />
7474
</Icon>
@@ -101,7 +101,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
101101
<Content component={ContentVariants.h4}>Next Steps</Content>
102102
</CardHeader>
103103
<CardBody>
104-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
104+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
105105
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
106106
<BellIcon />
107107
</Icon>

‎package-lock.json‎

Lines changed: 52 additions & 39 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/module/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@
3333
"dependencies": {
3434
"@patternfly/react-core": "^6.0.0",
3535
"@patternfly/react-icons": "^6.0.0",
36+
"@patternfly/react-styles": "^6.0.0",
3637
"@patternfly/react-table": "^6.0.0",
37-
"react-jss": "^10.10.0",
38-
"clsx": "^2.1.1"
38+
"react-jss": "^10.10.0"
3939
},
4040
"peerDependencies": {
4141
"react": "^17 || ^18 || ^19",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
1010
import MultiContentCard, { MultiContentCardDividerVariant } from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
1111
import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons';
1212
import { createUseStyles } from 'react-jss';
13-
import clsx from 'clsx';
13+
import { css } from '@patternfly/react-styles';
1414
import { FunctionComponent, useState } from 'react';
1515

1616
A **multi-content card** component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the [card component](/components/card), with the exception of `children` and `title`.

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '@patternfly/react-core';
1515
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
1616
import { createUseStyles } from 'react-jss';
17-
import clsx from 'clsx';
17+
import { css } from '@patternfly/react-styles';
1818

1919
const useStyles = createUseStyles({
2020
action: {
@@ -37,7 +37,7 @@ export const BasicExample: FunctionComponent = () => {
3737
<Content component={ContentVariants.h4}>Getting Started</Content>
3838
</CardHeader>
3939
<CardBody>
40-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
40+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
4141
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
4242
<CogIcon className={classes.actionIcon} />
4343
</Icon>
@@ -49,7 +49,7 @@ export const BasicExample: FunctionComponent = () => {
4949
</Content>
5050
</CardBody>
5151
<CardFooter>
52-
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
52+
<List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
5353
<ListItem>
5454
<Button variant="link" isInline>
5555
First link
@@ -71,7 +71,7 @@ export const BasicExample: FunctionComponent = () => {
7171
<Card isFullHeight isPlain key="card-2">
7272
<CardHeader style={{ visibility: 'hidden' }}>-</CardHeader>
7373
<CardBody>
74-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
74+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
7575
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
7676
<LockIcon className={classes.actionIcon} />
7777
</Icon>
@@ -104,7 +104,7 @@ export const BasicExample: FunctionComponent = () => {
104104
<Content component={ContentVariants.h4}>Next Steps</Content>
105105
</CardHeader>
106106
<CardBody>
107-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
107+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
108108
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
109109
<BellIcon className={classes.actionIcon} />
110110
</Icon>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
} from '@patternfly/react-core';
2323
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
2424
import { createUseStyles } from 'react-jss';
25-
import clsx from 'clsx';
25+
import { css } from '@patternfly/react-styles';
2626

2727
const useStyles = createUseStyles({
2828
bulletPoints: {
@@ -49,7 +49,7 @@ export const BasicExample: FunctionComponent = () => {
4949
</Content>
5050
</CardBody>
5151
<CardFooter>
52-
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
52+
<List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
5353
<ListItem>
5454
<Button variant="link" isInline>
5555
First link

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '@patternfly/react-core';
1515
import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
1616
import { createUseStyles } from 'react-jss';
17-
import clsx from 'clsx';
17+
import { css } from '@patternfly/react-styles';
1818

1919
const useStyles = createUseStyles({
2020
action: {
@@ -38,7 +38,7 @@ export const BasicExample: FunctionComponent = () => {
3838
<Content component={ContentVariants.h4}>Getting Started</Content>
3939
</CardHeader>
4040
<CardBody>
41-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
41+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
4242
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
4343
<CogIcon className={classes.actionIcon} />
4444
</Icon>
@@ -50,7 +50,7 @@ export const BasicExample: FunctionComponent = () => {
5050
</Content>
5151
</CardBody>
5252
<CardFooter>
53-
<List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
53+
<List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
5454
<ListItem>
5555
<Button variant="link" isInline>
5656
First link
@@ -74,7 +74,7 @@ export const BasicExample: FunctionComponent = () => {
7474
-
7575
</CardHeader>
7676
<CardBody>
77-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
77+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
7878
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
7979
<LockIcon className={classes.actionIcon} />
8080
</Icon>
@@ -107,7 +107,7 @@ export const BasicExample: FunctionComponent = () => {
107107
<Content component={ContentVariants.h4}>Next Steps</Content>
108108
</CardHeader>
109109
<CardBody>
110-
<Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
110+
<Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
111111
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
112112
<BellIcon className={classes.actionIcon} />
113113
</Icon>

0 commit comments

Comments
 (0)