From 3c8460fa2f7aefda72f4dc32ccc844b7d3d1e5f0 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 28 Oct 2025 16:03:47 -0400 Subject: [PATCH 01/13] feat: Added card description component to card. --- .../src/components/Card/CardDescription.tsx | 23 +++++++++++++++++++ .../src/components/Card/examples/Card.md | 3 ++- .../components/Card/examples/CardBasic.tsx | 3 ++- 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 packages/react-core/src/components/Card/CardDescription.tsx diff --git a/packages/react-core/src/components/Card/CardDescription.tsx b/packages/react-core/src/components/Card/CardDescription.tsx new file mode 100644 index 00000000000..485846e361e --- /dev/null +++ b/packages/react-core/src/components/Card/CardDescription.tsx @@ -0,0 +1,23 @@ +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Card/card'; + +export interface CardDescriptionProps { + /** Content rendered inside the description. */ + children?: React.ReactNode; + /** Additional classes added to the description. */ + className?: string; + /** Id of the description. */ + id?: string; +} + +export const CardDescription: React.FunctionComponent = ({ + children = null, + className = '', + id = '', + ...props +}: ModalBoxDescriptionProps) => ( +
+ {children} +
+); +CardDescription.displayName = 'CardDescription'; diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 671249655bf..9315d4cdb2d 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -9,6 +9,7 @@ propComponents: 'CardHeaderActionsObject', 'CardHeaderSelectableActionsObject', 'CardTitle', + 'CardDescription', 'CardBody', 'CardFooter', 'CardExpandableContent' @@ -26,7 +27,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; ### Basic cards -Basic cards typically have a ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. +Basic cards typically have a ``, ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. ```ts file='./CardBasic.tsx' diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx index 142d7e9bbb2..9d7c48ae4ec 100644 --- a/packages/react-core/src/components/Card/examples/CardBasic.tsx +++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx @@ -1,8 +1,9 @@ -import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core'; +import { Card, CardTitle, CardDescription, CardBody, CardFooter } from '@patternfly/react-core'; export const CardBasic: React.FunctionComponent = () => ( Title + Description Body Footer From e8fe86f06006adb18d7f9a6306666d43c98908a0 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 28 Oct 2025 16:07:09 -0400 Subject: [PATCH 02/13] Added tests for card description. --- .../Card/__tests__/CardDescription.test.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx diff --git a/packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx b/packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx new file mode 100644 index 00000000000..2eec3c9b3b1 --- /dev/null +++ b/packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx @@ -0,0 +1,21 @@ +import { render, screen } from '@testing-library/react'; +import { CardDescription } from '../CardDescription'; + +describe('CardDescription', () => { + test('renders with PatternFly Core styles', () => { + const { asFragment } = render(text); + expect(asFragment()).toMatchSnapshot(); + }); + + test('className is added to the root element', () => { + render(text); + expect(screen.getByText('text')).toHaveClass('extra-class'); + }); + + test('extra props are spread to the root element', () => { + const testId = 'card-description'; + + render(); + expect(screen.getByTestId(testId)).toBeInTheDocument(); + }); +}); From 66f6aa9c0558217e270d3cc6d28cd171077f6b56 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 14:19:04 -0500 Subject: [PATCH 03/13] Updated with core changes. --- packages/react-core/package.json | 2 +- .../Card/{CardDescription.tsx => CardSubtitle.tsx} | 10 +++++----- ...ardDescription.test.tsx => CardSubtitle.test.tsx} | 12 ++++++------ .../react-core/src/components/Card/examples/Card.md | 4 ++-- .../src/components/Card/examples/CardBasic.tsx | 4 ++-- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- 9 files changed, 20 insertions(+), 20 deletions(-) rename packages/react-core/src/components/Card/{CardDescription.tsx => CardSubtitle.tsx} (59%) rename packages/react-core/src/components/Card/__tests__/{CardDescription.test.tsx => CardSubtitle.test.tsx} (55%) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 6e797e2f696..252a9cf3446 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.8.1" }, "devDependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.12", + "@patternfly/patternfly": "6.5.0-prerelease.14", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.0" diff --git a/packages/react-core/src/components/Card/CardDescription.tsx b/packages/react-core/src/components/Card/CardSubtitle.tsx similarity index 59% rename from packages/react-core/src/components/Card/CardDescription.tsx rename to packages/react-core/src/components/Card/CardSubtitle.tsx index 485846e361e..7bf468d7e53 100644 --- a/packages/react-core/src/components/Card/CardDescription.tsx +++ b/packages/react-core/src/components/Card/CardSubtitle.tsx @@ -1,7 +1,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Card/card'; -export interface CardDescriptionProps { +export interface CardSubtitleProps { /** Content rendered inside the description. */ children?: React.ReactNode; /** Additional classes added to the description. */ @@ -10,14 +10,14 @@ export interface CardDescriptionProps { id?: string; } -export const CardDescription: React.FunctionComponent = ({ +export const CardSubtitle: React.FunctionComponent = ({ children = null, className = '', id = '', ...props -}: ModalBoxDescriptionProps) => ( -
+}: CardSubtitleProps) => ( +
{children}
); -CardDescription.displayName = 'CardDescription'; +CardSubtitle.displayName = 'CardSubtitle'; diff --git a/packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx b/packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx similarity index 55% rename from packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx rename to packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx index 2eec3c9b3b1..785dec35bc1 100644 --- a/packages/react-core/src/components/Card/__tests__/CardDescription.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx @@ -1,21 +1,21 @@ import { render, screen } from '@testing-library/react'; -import { CardDescription } from '../CardDescription'; +import { CardSubtitle } from '../CardSubtitle'; -describe('CardDescription', () => { +describe('CardSubtitle', () => { test('renders with PatternFly Core styles', () => { - const { asFragment } = render(text); + const { asFragment } = render(text); expect(asFragment()).toMatchSnapshot(); }); test('className is added to the root element', () => { - render(text); + render(text); expect(screen.getByText('text')).toHaveClass('extra-class'); }); test('extra props are spread to the root element', () => { - const testId = 'card-description'; + const testId = 'card-subtitle'; - render(); + render(); expect(screen.getByTestId(testId)).toBeInTheDocument(); }); }); diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 9315d4cdb2d..6b8692a5ea3 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -9,7 +9,7 @@ propComponents: 'CardHeaderActionsObject', 'CardHeaderSelectableActionsObject', 'CardTitle', - 'CardDescription', + 'CardSubtitle', 'CardBody', 'CardFooter', 'CardExpandableContent' @@ -27,7 +27,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; ### Basic cards -Basic cards typically have a ``, ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. +Basic cards typically have a ``, ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. ```ts file='./CardBasic.tsx' diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx index 9d7c48ae4ec..a25c14c81cc 100644 --- a/packages/react-core/src/components/Card/examples/CardBasic.tsx +++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx @@ -1,9 +1,9 @@ -import { Card, CardTitle, CardDescription, CardBody, CardFooter } from '@patternfly/react-core'; +import { Card, CardTitle, CardSubtitle, CardBody, CardFooter } from '@patternfly/react-core'; export const CardBasic: React.FunctionComponent = () => ( Title - Description + Subtitle Body Footer diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 345b9190ed8..5a0b3ee24fc 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -23,7 +23,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.12", + "@patternfly/patternfly": "6.5.0-prerelease.14", "@patternfly/react-charts": "workspace:^", "@patternfly/react-code-editor": "workspace:^", "@patternfly/react-core": "workspace:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 93e54de17d1..5c6a2a7c42e 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -33,7 +33,7 @@ "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@patternfly/patternfly": "6.5.0-prerelease.12", + "@patternfly/patternfly": "6.5.0-prerelease.14", "fs-extra": "^11.3.0", "tslib": "^2.8.1" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 923363024ae..399debeeba0 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.5.0-prerelease.12", + "@patternfly/patternfly": "6.5.0-prerelease.14", "change-case": "^5.4.4", "fs-extra": "^11.3.0" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 80b95955e11..e5e9c60428b 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@adobe/css-tools": "^4.4.4", - "@patternfly/patternfly": "6.5.0-prerelease.12", + "@patternfly/patternfly": "6.5.0-prerelease.14", "fs-extra": "^11.3.0" } } From aab74f24acf0ee26e643f3d7dbb422532f7d4dc0 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 15:34:23 -0500 Subject: [PATCH 04/13] Fixed missing export for CardSubtitle. --- packages/react-core/src/components/Card/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-core/src/components/Card/index.ts b/packages/react-core/src/components/Card/index.ts index 20e90467970..f73d2a9ce1e 100644 --- a/packages/react-core/src/components/Card/index.ts +++ b/packages/react-core/src/components/Card/index.ts @@ -3,4 +3,5 @@ export * from './CardBody'; export * from './CardExpandableContent'; export * from './CardFooter'; export * from './CardTitle'; +export * from './CardSubtitle'; export * from './CardHeader'; From d741b635578cadfc9e28a95f4bd5c16a8b60e838 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 15:37:22 -0500 Subject: [PATCH 05/13] Updated yarn.lock file. --- yarn.lock | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/yarn.lock b/yarn.lock index 909d4f77ea9..4b92c46246d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4516,10 +4516,10 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.5.0-prerelease.12": - version: 6.5.0-prerelease.12 - resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.12" - checksum: 10c0/a07d7ccbde0bdcdfa03877678ee73c741f1dc6774c0fe96db24e308f637e68035684bf3758e6acf3e2c51c46f27d320eff2189e85bfdeb0c9104dd18d33ae771 +"@patternfly/patternfly@npm:6.5.0-prerelease.14": + version: 6.5.0-prerelease.14 + resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.14" + checksum: 10c0/d2bca43a2b4c98767b81dc5569eb5960866c9e7b757276b69aa8eacc06414723e3a58b434c7f1b46e416fe02474dbc333707e6c6a82ca05201900458d74ca548 languageName: node linkType: hard @@ -4617,7 +4617,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-core@workspace:packages/react-core" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.12" + "@patternfly/patternfly": "npm:6.5.0-prerelease.14" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -4638,7 +4638,7 @@ __metadata: resolution: "@patternfly/react-docs@workspace:packages/react-docs" dependencies: "@patternfly/documentation-framework": "npm:^6.28.9" - "@patternfly/patternfly": "npm:6.5.0-prerelease.12" + "@patternfly/patternfly": "npm:6.5.0-prerelease.14" "@patternfly/patternfly-a11y": "npm:5.1.0" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -4678,7 +4678,7 @@ __metadata: "@fortawesome/free-brands-svg-icons": "npm:^5.15.4" "@fortawesome/free-regular-svg-icons": "npm:^5.15.4" "@fortawesome/free-solid-svg-icons": "npm:^5.15.4" - "@patternfly/patternfly": "npm:6.5.0-prerelease.12" + "@patternfly/patternfly": "npm:6.5.0-prerelease.14" fs-extra: "npm:^11.3.0" tslib: "npm:^2.8.1" peerDependencies: @@ -4763,7 +4763,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.12" + "@patternfly/patternfly": "npm:6.5.0-prerelease.14" change-case: "npm:^5.4.4" fs-extra: "npm:^11.3.0" languageName: unknown @@ -4805,7 +4805,7 @@ __metadata: resolution: "@patternfly/react-tokens@workspace:packages/react-tokens" dependencies: "@adobe/css-tools": "npm:^4.4.4" - "@patternfly/patternfly": "npm:6.5.0-prerelease.12" + "@patternfly/patternfly": "npm:6.5.0-prerelease.14" fs-extra: "npm:^11.3.0" languageName: unknown linkType: soft From 45026462c1e32fca401fc50a55173d0655b0bd6b Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 15:58:39 -0500 Subject: [PATCH 06/13] Fixed card demo. --- .../react-core/src/components/Card/examples/CardBasic.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx index a25c14c81cc..d27b422b7ae 100644 --- a/packages/react-core/src/components/Card/examples/CardBasic.tsx +++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx @@ -2,8 +2,10 @@ import { Card, CardTitle, CardSubtitle, CardBody, CardFooter } from '@patternfly export const CardBasic: React.FunctionComponent = () => ( - Title - Subtitle + + Title + Subtitle + Body Footer From ec12c9d70bb055518d4259208469e58452451bd2 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 10:12:30 -0500 Subject: [PATCH 07/13] Updated with review comments. --- packages/react-core/src/components/Card/CardTitle.tsx | 5 +++++ packages/react-core/src/components/Card/examples/Card.md | 7 +++++++ .../src/components/Card/examples/CardBasic.tsx | 7 ++----- .../src/components/Card/examples/CardSubtitle.tsx | 9 +++++++++ packages/react-core/src/components/Card/index.ts | 1 - 5 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 packages/react-core/src/components/Card/examples/CardSubtitle.tsx diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx index 2df2ced37f7..bd6adbe1471 100644 --- a/packages/react-core/src/components/Card/CardTitle.tsx +++ b/packages/react-core/src/components/Card/CardTitle.tsx @@ -2,6 +2,7 @@ import { useContext } from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Card/card'; import { CardContext } from './Card'; +import { CardSubtitle } from './CardSubtitle'; export interface CardTitleProps extends React.HTMLProps { /** Content rendered inside the CardTitle */ @@ -10,12 +11,15 @@ export interface CardTitleProps extends React.HTMLProps { className?: string; /** Sets the base component to render. defaults to div */ component?: keyof React.JSX.IntrinsicElements; + /** @beta Subtitle of the card title */ + subtitle?: string; } export const CardTitle: React.FunctionComponent = ({ children, className, component = 'div', + subtitle, ...props }: CardTitleProps) => { const { cardId } = useContext(CardContext); @@ -27,6 +31,7 @@ export const CardTitle: React.FunctionComponent = ({ {children} + {subtitle && {subtitle}}
); }; diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 6b8692a5ea3..1fed83b2ec7 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -31,6 +31,13 @@ Basic cards typically have a ``, ``, `` and ` ```ts file='./CardBasic.tsx' +``` +### Card with subtitle + +A basic card that also has a subtitle + +```ts file='./CardSubtitle.tsx' + ``` ### Secondary cards diff --git a/packages/react-core/src/components/Card/examples/CardBasic.tsx b/packages/react-core/src/components/Card/examples/CardBasic.tsx index d27b422b7ae..142d7e9bbb2 100644 --- a/packages/react-core/src/components/Card/examples/CardBasic.tsx +++ b/packages/react-core/src/components/Card/examples/CardBasic.tsx @@ -1,11 +1,8 @@ -import { Card, CardTitle, CardSubtitle, CardBody, CardFooter } from '@patternfly/react-core'; +import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core'; export const CardBasic: React.FunctionComponent = () => ( - - Title - Subtitle - + Title Body Footer diff --git a/packages/react-core/src/components/Card/examples/CardSubtitle.tsx b/packages/react-core/src/components/Card/examples/CardSubtitle.tsx new file mode 100644 index 00000000000..71697f493ce --- /dev/null +++ b/packages/react-core/src/components/Card/examples/CardSubtitle.tsx @@ -0,0 +1,9 @@ +import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core'; + +export const CardSubtitle: React.FunctionComponent = () => ( + + Title + Body + Footer + +); diff --git a/packages/react-core/src/components/Card/index.ts b/packages/react-core/src/components/Card/index.ts index f73d2a9ce1e..20e90467970 100644 --- a/packages/react-core/src/components/Card/index.ts +++ b/packages/react-core/src/components/Card/index.ts @@ -3,5 +3,4 @@ export * from './CardBody'; export * from './CardExpandableContent'; export * from './CardFooter'; export * from './CardTitle'; -export * from './CardSubtitle'; export * from './CardHeader'; From 590d1d9ebac1576dfbce14c7dd68882723e5ea03 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 10:27:10 -0500 Subject: [PATCH 08/13] Added snapshot. --- .../__snapshots__/CardSubtitle.test.tsx.snap | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 packages/react-core/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap diff --git a/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap new file mode 100644 index 00000000000..0ff2585ae23 --- /dev/null +++ b/packages/react-core/src/components/Card/__tests__/__snapshots__/CardSubtitle.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CardSubtitle renders with PatternFly Core styles 1`] = ` + +
+ text +
+ +`; From 3be9e8271676e2098430b13a1a4aad389428f105 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 10:41:28 -0500 Subject: [PATCH 09/13] Updated to have a react node instead of a card title. --- packages/react-core/src/components/Card/CardTitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx index bd6adbe1471..48b2222b4e0 100644 --- a/packages/react-core/src/components/Card/CardTitle.tsx +++ b/packages/react-core/src/components/Card/CardTitle.tsx @@ -12,7 +12,7 @@ export interface CardTitleProps extends React.HTMLProps { /** Sets the base component to render. defaults to div */ component?: keyof React.JSX.IntrinsicElements; /** @beta Subtitle of the card title */ - subtitle?: string; + subtitle?: React.ReactNode; } export const CardTitle: React.FunctionComponent = ({ From ab025fb5bffb764b034f050b8a64a95a1a5ac225 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 10:45:17 -0500 Subject: [PATCH 10/13] Updated to have a react node instead of a card title. --- packages/react-core/src/components/Card/examples/Card.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 1fed83b2ec7..40390e90d95 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -9,7 +9,6 @@ propComponents: 'CardHeaderActionsObject', 'CardHeaderSelectableActionsObject', 'CardTitle', - 'CardSubtitle', 'CardBody', 'CardFooter', 'CardExpandableContent' @@ -27,7 +26,7 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; ### Basic cards -Basic cards typically have a ``, ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. +Basic cards typically have a ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. ```ts file='./CardBasic.tsx' From 125d8af7657164d33590d55ed15f4c2fd56ef5de Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 10:48:46 -0500 Subject: [PATCH 11/13] Updated to have a react node instead of a card title. --- packages/react-core/src/components/Card/CardSubtitle.tsx | 5 +---- packages/react-core/src/components/Card/CardTitle.tsx | 3 ++- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react-core/src/components/Card/CardSubtitle.tsx b/packages/react-core/src/components/Card/CardSubtitle.tsx index 7bf468d7e53..63e27ac915a 100644 --- a/packages/react-core/src/components/Card/CardSubtitle.tsx +++ b/packages/react-core/src/components/Card/CardSubtitle.tsx @@ -4,19 +4,16 @@ import styles from '@patternfly/react-styles/css/components/Card/card'; export interface CardSubtitleProps { /** Content rendered inside the description. */ children?: React.ReactNode; - /** Additional classes added to the description. */ - className?: string; /** Id of the description. */ id?: string; } export const CardSubtitle: React.FunctionComponent = ({ children = null, - className = '', id = '', ...props }: CardSubtitleProps) => ( -
+
{children}
); diff --git a/packages/react-core/src/components/Card/CardTitle.tsx b/packages/react-core/src/components/Card/CardTitle.tsx index 48b2222b4e0..17333c150f4 100644 --- a/packages/react-core/src/components/Card/CardTitle.tsx +++ b/packages/react-core/src/components/Card/CardTitle.tsx @@ -25,13 +25,14 @@ export const CardTitle: React.FunctionComponent = ({ const { cardId } = useContext(CardContext); const Component = component as any; const titleId = cardId ? `${cardId}-title` : ''; + const subtitleId = cardId ? `${cardId}-subtitle` : ''; return (
{children} - {subtitle && {subtitle}} + {subtitle && {subtitle}}
); }; From 2df4228f8bb79237eef904f6f47c838984daf1f1 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 11:49:08 -0500 Subject: [PATCH 12/13] Removed Card class test. --- .../Card/__tests__/CardSubtitle.test.tsx | 5 - .../src/components/Card/examples/Card.md | 8 ++ .../Card/examples/CardSubtitleActions.tsx | 107 ++++++++++++++++++ 3 files changed, 115 insertions(+), 5 deletions(-) create mode 100644 packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx diff --git a/packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx b/packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx index 785dec35bc1..26eb5157b78 100644 --- a/packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx +++ b/packages/react-core/src/components/Card/__tests__/CardSubtitle.test.tsx @@ -7,11 +7,6 @@ describe('CardSubtitle', () => { expect(asFragment()).toMatchSnapshot(); }); - test('className is added to the root element', () => { - render(text); - expect(screen.getByText('text')).toHaveClass('extra-class'); - }); - test('extra props are spread to the root element', () => { const testId = 'card-subtitle'; diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 40390e90d95..0b9b24f12a9 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -37,6 +37,12 @@ A basic card that also has a subtitle ```ts file='./CardSubtitle.tsx' +``` +### Card with subtitle and Actions +This card demonstrates having an image, action, and subtitle in a single card. + +```ts file='./CardSubtitleActions.tsx' + ``` ### Secondary cards @@ -78,6 +84,8 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi ``` + + ### Title inline with images and actions Moving `` within the `` will style it inline with any images or actions. diff --git a/packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx b/packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx new file mode 100644 index 00000000000..4277b06834b --- /dev/null +++ b/packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx @@ -0,0 +1,107 @@ +import { useState } from 'react'; +import { + Brand, + Card, + CardHeader, + CardTitle, + CardBody, + CardFooter, + Checkbox, + Dropdown, + DropdownList, + DropdownItem, + MenuToggle, + MenuToggleElement, + Divider +} from '@patternfly/react-core'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg'; + +export const CardWithImageAndActions: React.FunctionComponent = () => { + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [hasNoOffset, setHasNoOffset] = useState(false); + + const onSelect = () => { + setIsOpen(!isOpen); + }; + const onClick = (checked: boolean) => { + setIsChecked(checked); + }; + const toggleOffset = (checked: boolean) => { + setHasNoOffset(checked); + }; + + const dropdownItems = ( + <> + Action + {/* Prevent default onClick functionality for example purposes */} + event.preventDefault()}> + Link + + + Disabled Action + + event.preventDefault()}> + Disabled Link + + + Separated Action + event.preventDefault()}> + Separated Link + + + ); + + const headerActions = ( + <> + ) => ( + setIsOpen(!isOpen)} + variant="plain" + aria-label="Card header images and actions example kebab toggle" + icon={} + /> + )} + isOpen={isOpen} + onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)} + > + {dropdownItems} + + onClick(checked)} + aria-label="card checkbox example" + id="check-1" + name="check1" + /> + + ); + + return ( + <> + toggleOffset(checked)} + aria-label="remove actions offset" + id="toggle-actions-offset" + name="toggle-actions-offset" + /> +
+ + + + + Title + Body + Footer + +
+ + ); +}; From ffce543657ace5709105580b829d2c5d88fce8ad Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 5 Nov 2025 13:37:17 -0500 Subject: [PATCH 13/13] Added isBeta flag. --- packages/react-core/src/components/Card/examples/Card.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 0b9b24f12a9..6f90777fc9b 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -28,20 +28,20 @@ import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; Basic cards typically have a ``, `` and ``. You may omit these components as needed, but it is recommended to at least include a `` to provide details about the card item. -```ts file='./CardBasic.tsx' +```ts file='./CardBasic.tsx' ``` ### Card with subtitle A basic card that also has a subtitle -```ts file='./CardSubtitle.tsx' +```ts file='./CardSubtitle.tsx' isBeta ``` ### Card with subtitle and Actions This card demonstrates having an image, action, and subtitle in a single card. -```ts file='./CardSubtitleActions.tsx' +```ts file='./CardSubtitleActions.tsx' isBeta ```