From 24dce6bc135469facc5ee92e393ed630260abdab Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 7 May 2026 10:35:29 -0400 Subject: [PATCH 1/3] feat(Hero): glass styling update --- packages/react-core/package.json | 2 +- .../react-core/src/components/Hero/Hero.tsx | 8 ++++---- .../components/Hero/__tests__/Hero.test.tsx | 20 ++++++++++++++++++- .../demos/Compass/examples/CompassDemo.tsx | 4 +++- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 4 ++-- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 20 +++++++++---------- 9 files changed, 42 insertions(+), 22 deletions(-) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 410eb5ee0c4..d15ce6b1a01 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.79", + "@patternfly/patternfly": "6.5.0-prerelease.82", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.3" diff --git a/packages/react-core/src/components/Hero/Hero.tsx b/packages/react-core/src/components/Hero/Hero.tsx index feec306183e..a1f79e28f96 100644 --- a/packages/react-core/src/components/Hero/Hero.tsx +++ b/packages/react-core/src/components/Hero/Hero.tsx @@ -34,8 +34,8 @@ export interface HeroProps extends Omit, 'conten stop2?: string; stop3?: string; }; - /** Flag indicating whether glass styles are removed from the hero when a glass theme is applied. */ - hasNoGlass?: boolean; + /** Flag indicating the hero has glass styling when glass theme is applied. */ + isGlass?: boolean; /** Modifies the width of the hero body. */ bodyWidth?: string; /** Modifies the max-width of the hero body. */ @@ -49,7 +49,7 @@ export const Hero: React.FunctionComponent = ({ backgroundSrcDark, gradientLight, gradientDark, - hasNoGlass = false, + isGlass = false, bodyWidth, bodyMaxWidth, ...props @@ -90,7 +90,7 @@ export const Hero: React.FunctionComponent = ({ return (
diff --git a/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx b/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx index ee290be3aa8..9ab43f152f1 100644 --- a/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx +++ b/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx @@ -16,12 +16,30 @@ test('Renders with children', () => { expect(screen.getByText('Test content')).toBeVisible(); }); -test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => { +test(`Renders with ${styles.hero} class on wrapper by default`, () => { render(Test); expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true }); }); +test(`Renders with ${styles.modifiers.glass} class when isGlass is true`, () => { + render(Test); + + expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.modifiers.glass}`, { exact: true }); +}); + +test(`Renders without ${styles.modifiers.glass} class when isGlass is false`, () => { + render(Test); + + expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`, { exact: true }); +}); + +test(`Renders without ${styles.modifiers.glass} class by default`, () => { + render(Test); + + expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`, { exact: true }); +}); + test('Renders with custom class name on wrapper when className prop is provided', () => { render(Test); expect(screen.getByText('Test').parentElement).toHaveClass('custom-class'); diff --git a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx index 5b2acfc1ca3..60acc9ab2c6 100644 --- a/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx +++ b/packages/react-core/src/demos/Compass/examples/CompassDemo.tsx @@ -149,7 +149,9 @@ export const CompassBasic: React.FunctionComponent = () => { const mainContent = ( <> - Hero + + Hero + Content title} /> diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 6647f3d96e4..b7197a388d3 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.79", + "@patternfly/patternfly": "6.5.0-prerelease.82", "@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 cd86290b56c..586de2e095b 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -35,8 +35,8 @@ "@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.79", - "@rhds/icons": "^2.1.0", + "@patternfly/patternfly": "6.5.0-prerelease.82", + "@rhds/icons": "^2.2.0", "fs-extra": "^11.3.3", "tslib": "^2.8.1" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 0160ef5cbcf..3c96c7a6253 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.79", + "@patternfly/patternfly": "6.5.0-prerelease.82", "change-case": "^5.4.4", "fs-extra": "^11.3.3" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index d056cd50b25..19da6aef09b 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.79", + "@patternfly/patternfly": "6.5.0-prerelease.82", "fs-extra": "^11.3.3" } } diff --git a/yarn.lock b/yarn.lock index 91c37adcb7a..d2081931878 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5070,10 +5070,10 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.5.0-prerelease.79": - version: 6.5.0-prerelease.79 - resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.79" - checksum: 10c0/0ad407507646fa5e0250b982e8e35fba6ab80285f8440721784199f25fc9ea5fb06db33a57d69380c911de4aeac42218c60fd54923aaa1869fab41dc5f373fb1 +"@patternfly/patternfly@npm:6.5.0-prerelease.82": + version: 6.5.0-prerelease.82 + resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.82" + checksum: 10c0/b7876ba790991c62da57f745699b1cf54c410312fa9eecffb2317fc798c5ce9d71b5e135fc28ec724d5aaf6cff900c3d91a93116bd4b5461e6a0f0fe69391e4f languageName: node linkType: hard @@ -5171,7 +5171,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-core@workspace:packages/react-core" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.79" + "@patternfly/patternfly": "npm:6.5.0-prerelease.82" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -5192,7 +5192,7 @@ __metadata: resolution: "@patternfly/react-docs@workspace:packages/react-docs" dependencies: "@patternfly/documentation-framework": "npm:^6.36.8" - "@patternfly/patternfly": "npm:6.5.0-prerelease.79" + "@patternfly/patternfly": "npm:6.5.0-prerelease.82" "@patternfly/patternfly-a11y": "npm:5.1.0" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -5232,8 +5232,8 @@ __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.79" - "@rhds/icons": "npm:^2.1.0" + "@patternfly/patternfly": "npm:6.5.0-prerelease.82" + "@rhds/icons": "npm:^2.2.0" fs-extra: "npm:^11.3.3" tslib: "npm:^2.8.1" peerDependencies: @@ -5319,7 +5319,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: - "@patternfly/patternfly": "npm:6.5.0-prerelease.79" + "@patternfly/patternfly": "npm:6.5.0-prerelease.82" change-case: "npm:^5.4.4" fs-extra: "npm:^11.3.3" languageName: unknown @@ -5361,7 +5361,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.79" + "@patternfly/patternfly": "npm:6.5.0-prerelease.82" fs-extra: "npm:^11.3.3" languageName: unknown linkType: soft From 5d8b79289ded04a3eb55bb84ba75ed0f253c8a27 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 7 May 2026 10:54:34 -0400 Subject: [PATCH 2/3] fix exact match in test --- .../react-core/src/components/Hero/__tests__/Hero.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx b/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx index 9ab43f152f1..0f8db955f6f 100644 --- a/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx +++ b/packages/react-core/src/components/Hero/__tests__/Hero.test.tsx @@ -25,19 +25,19 @@ test(`Renders with ${styles.hero} class on wrapper by default`, () => { test(`Renders with ${styles.modifiers.glass} class when isGlass is true`, () => { render(Test); - expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.modifiers.glass}`, { exact: true }); + expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.modifiers.glass}`); }); test(`Renders without ${styles.modifiers.glass} class when isGlass is false`, () => { render(Test); - expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`, { exact: true }); + expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`); }); test(`Renders without ${styles.modifiers.glass} class by default`, () => { render(Test); - expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`, { exact: true }); + expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`); }); test('Renders with custom class name on wrapper when className prop is provided', () => { From c45bed8f8fcf078a97d5a3cc242d2beadd6bd1cf Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 7 May 2026 15:24:35 -0400 Subject: [PATCH 3/3] add beta flag, readd 2.2 rhds icons --- packages/react-core/src/components/Hero/Hero.tsx | 2 +- yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Hero/Hero.tsx b/packages/react-core/src/components/Hero/Hero.tsx index a1f79e28f96..88946e29d47 100644 --- a/packages/react-core/src/components/Hero/Hero.tsx +++ b/packages/react-core/src/components/Hero/Hero.tsx @@ -34,7 +34,7 @@ export interface HeroProps extends Omit, 'conten stop2?: string; stop3?: string; }; - /** Flag indicating the hero has glass styling when glass theme is applied. */ + /** @beta Flag indicating the hero has glass styling when glass theme is applied. */ isGlass?: boolean; /** Modifies the width of the hero body. */ bodyWidth?: string; diff --git a/yarn.lock b/yarn.lock index d2081931878..366137d46aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5595,6 +5595,13 @@ __metadata: languageName: node linkType: hard +"@rhds/icons@npm:^2.2.0": + version: 2.2.0 + resolution: "@rhds/icons@npm:2.2.0" + checksum: 10c0/ded19d0056864f284cf1a43b7f4d3959ca9347e3ced78414eb7f6a20901fcb4071a8900d1f1a7840ec7105740c5d1453d1b90c4f2b0355c274fbbba7f52bd50a + languageName: node + linkType: hard + "@rolldown/pluginutils@npm:1.0.0-beta.27": version: 1.0.0-beta.27 resolution: "@rolldown/pluginutils@npm:1.0.0-beta.27"