Skip to content

feat(Hero): glass styling update #12412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kmcfaul wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat(Hero): glass styling update #12412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24dce6b
feat(Hero): glass styling update
kmcfaul May 7, 2026
5d8b792
fix exact match in test
kmcfaul May 7, 2026
c45bed8
add beta flag, readd 2.2 rhds icons
kmcfaul May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Hero/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'conten
stop2?: string;
stop3?: string;
};
/** Flag indicating whether glass styles are removed from the hero when a glass theme is applied. */
hasNoGlass?: boolean;
/** @beta 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. */
Expand All @@ -49,7 +49,7 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
backgroundSrcDark,
gradientLight,
gradientDark,
hasNoGlass = false,
isGlass = false,
bodyWidth,
bodyMaxWidth,
...props
Expand Down Expand Up @@ -90,7 +90,7 @@ export const Hero: React.FunctionComponent<HeroProps> = ({

return (
<div
className={css(styles.hero, hasNoGlass && styles.modifiers.noGlass, className)}
className={css(styles.hero, isGlass && styles.modifiers.glass, className)}
style={{ ...props.style, ...customStyles }}
{...props}
>
Expand Down
20 changes: 19 additions & 1 deletion packages/react-core/src/components/Hero/__tests__/Hero.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<Hero>Test</Hero>);

expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
});

test(`Renders with ${styles.modifiers.glass} class when isGlass is true`, () => {
render(<Hero isGlass>Test</Hero>);

expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.modifiers.glass}`);
});

test(`Renders without ${styles.modifiers.glass} class when isGlass is false`, () => {
render(<Hero isGlass={false}>Test</Hero>);

expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`);
});

test(`Renders without ${styles.modifiers.glass} class by default`, () => {
render(<Hero>Test</Hero>);

expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`);
});
Comment thread
coderabbitai[bot] marked this conversation as resolved.

test('Renders with custom class name on wrapper when className prop is provided', () => {
render(<Hero className="custom-class">Test</Hero>);
expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
Expand Down
4 changes: 3 additions & 1 deletion packages/react-core/src/demos/Compass/examples/CompassDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,9 @@ export const CompassBasic: React.FunctionComponent = () => {
const mainContent = (
<>
<CompassHero>
<Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
<Hero isGlass gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
Hero
</Hero>
</CompassHero>
<CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
<CompassContent>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:^",
Expand Down
4 changes: 2 additions & 2 deletions packages/react-icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
27 changes: 17 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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:^"
Expand All @@ -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:^"
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down
Loading