feat(Hero): added Hero component from compasshero by thatblindgeye · Pull Request #7980 · patternfly/patternfly

thatblindgeye · 2025-11-07T16:04:28Z

Would we want the Hero to be inside a CompassPanel still? If so, would we want to have the border radius (and/or any other styles) live inside CompassPanel when it has a pf-m-hero class? Right now I just moved all hero styles from Compass to the new PF level Hero component, so putting the Hero inside a CompassPanel results in the CompassPanel sticking out like a sore thumb:

patternfly-build · 2025-11-07T16:07:22Z

Preview: https://pf-pr-7980.surge.sh

A11y report: https://pf-pr-7980-a11y.surge.sh

mcoker

Looks awesome! A few add'l updates if you don't mind good sir.

mcoker · 2025-11-07T16:26:24Z

+id: 'Hero'
+beta: true
+section: components
+cssPrefix: pf-v5-c-hero


Suggested change

cssPrefix: pf-v5-c-hero

cssPrefix: pf-v6-c-hero

mcoker · 2025-11-07T16:27:07Z

+
+## Examples
+### Basic
+```hbs


Even though the component is beta, I'd mark the example, too, for extra, heavy duty messaging

Suggested change

```hbs

```hbs isBeta

mcoker · 2025-11-07T16:28:01Z

+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
+| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. **Required** |


Suggested change

| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. **Required** |

| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |

The __body element isn't required. The deal with that is, if you pass a background-image that's attached to the right side, you can put your text in that element and it has a width/max-width by default that keeps the text from going over the right side of the container, and the width/max-width are adjustable if you need to tweak it. If you don't use __body, you'd get the full width of the component for your text content and could manage the way it shows yourself. You wouldn't use __body, for example, if you didn't use a background image or gradient or whatever and wanted the text to span the full width of the container.

mcoker · 2025-11-07T16:28:27Z

+  padding-block-start: 32px;
+  padding-block-end: 32px;
+  padding-inline-start: 72px;


Can you see if we have any semantic spacer tokens that work for these padding values?

mcoker · 2025-11-07T16:29:15Z

+  background-position: right center;
+  background-size: contain;


Having vars for these would be great so people can change the background image properties to fit whatever image they use.

mcoker · 2025-11-07T16:29:52Z

+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: contain;
+  border-radius: 24px 72px;


I would probably create vars for these, too.

mcoker · 2025-11-07T16:32:02Z

+  padding-block-end: 32px;
+  padding-inline-start: 72px;
+  padding-inline-end: 0;
+  background-image: var(--#{$hero}--BackgroundImage, var(--#{$hero}--BackgroundImage--light)),


I would add glass styles to this component - a background-color set to --pf-t--global--background--color--glass--default (sauce and backdrop-filter set to --pf-t--global--background--color--glass--filter (extra sauce). That-a-way if you don't pass a gradient or background image (or if your gradient is semi-transparent), it will have a glass background by default when glass theme is enabled. That matches the pill drawer if you want a reference - exhibit A and exhibit 2

mcoker · 2025-11-07T19:35:54Z

+  background-repeat: var(--#{$hero}--BackgroundRepeat);
+  background-position: var(--#{$hero}--BackgroundPosition);
+  background-size: var(--#{$hero}--BackgroundSize);
+  border-radius: var(--#{$hero}--BorderRadiusTopLeftBottomRight) var(--#{$hero}--BorderRadiusTopRightBottomLeft);


Sorry I missed these in my previous review. The "glass" style, at least for what we've built so far has these properties:

transparent-ish background color (--pf-t--global--background--color--glass--default)

backdrop-filter (blur) (--pf-t--global--background--color--glass--filter)

border-radius (--large, unless it's pill)

box-shadow (--md)

border-color (--alt)

I think this box is going to need shadow in glass theme and a border in both glass theme and non-glass. For now I'd add the default/non-glass border using the normal border token, then write a :root:where(.pf-v6-theme-glass) block where you change it to the --alt token. That way the special curvy border-radiiii(?) are visible in light and dark theme. And for the shadow, I would just add that in the :root:where(.pf-v6-theme-glass) block and not have a box-shadow in non-glass theme.

I imagine in the future once the design sorts, we'll have global glass tokens for the border and box-shadow

mcoker · 2025-11-07T19:44:10Z

+  --#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --#{$hero}--PaddingInlineEnd: 0;


I think we'll want a PaddingInlineEnd, probably set to var(--pf-t--global--spacer--xl) since not everyone will use __body and they may just put title/text content in there.

mcoker · 2025-11-07T19:46:02Z

+  --#{$hero}--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --#{$hero}--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);


You shouldn't need --m-glass in these vars. They're regular vars, and they change at the global level when the glass theme is turned on.

mcoker · 2025-11-07T19:47:19Z

+  --#{$hero}--BorderRadiusTopLeftBottomRight: 24px;
+  --#{$hero}--BorderRadiusTopRightBottomLeft: 72px;


Can you create 4 vars for this? Since these are probably part of the style API, if design decides a third unique radius needs to be used, we'd want to then update the var names but that would be breaking.

Yeah as i typed the vars out I was like "Boy that's an ugly var name" 😆

mcoker · 2025-11-07T21:26:18Z

 | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
 | `.pf-m-pill` | `.pf-v6-c-drawer` | Modifies the drawer for pill styles. |
-| `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel remove glass styling when using glass theme. |
+| `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel to remove glass styling when using glass theme. |


mcoker · 2025-11-07T21:29:45Z

+  border-end-start-radius: var(--#{$hero}--BorderEndStartRadius);
+  border-end-end-radius: var(--#{$hero}--BorderEndEndRadius);
+
+  :root:where(.pf-v6-theme-dark) & {


Suggested change

:root:where(.pf-v6-theme-dark) & {

:root:where(.#{$pf-prefix}theme-dark) & {

mcoker · 2025-11-07T21:30:09Z

+    --#{$hero}--gradient--stop-3: var(--#{$hero}--gradient--stop-3--dark);
+  }
+
+  :root:where(.pf-v6-theme-glass) & {


Suggested change

:root:where(.pf-v6-theme-glass) & {

:root:where(.#{$pf-prefix}theme-glass) & {

patternfly-build · 2025-11-07T22:23:52Z

🎉 This PR is included in version 6.5.0-prerelease.21 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat(Hero): added Hero component from compasshero * Added styles to index * Coker feedback * Additional Coker feedback * Fixed lint errors * Old man yells at Michael * Added missing border style --------- Co-authored-by: Eric Olkowski <[email protected]>

thatblindgeye added 2 commits November 7, 2025 10:53

feat(Hero): added Hero component from compasshero

50e081b

Added styles to index

8e3f3be

mcoker reviewed Nov 7, 2025

View reviewed changes

Coker feedback

45cd1a0

thatblindgeye requested a review from mcoker November 7, 2025 18:50

mcoker reviewed Nov 7, 2025

View reviewed changes

thatblindgeye added 2 commits November 7, 2025 15:47

Additional Coker feedback

1a887c4

Fixed lint errors

c96fe11

mcoker reviewed Nov 7, 2025

View reviewed changes

mcoker approved these changes Nov 7, 2025

View reviewed changes

thatblindgeye added 2 commits November 7, 2025 16:56

Old man yells at Michael

13e5df7

Added missing border style

7c381f8

thatblindgeye merged commit 4a5c66e into patternfly:main Nov 7, 2025
4 checks passed

patternfly-build added the released on @prerelease label Nov 7, 2025

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

	\| `.pf-v6-c-hero__body` \| `<div>` \| Initiates the hero body. Required \|
	\| `.pf-v6-c-hero__body` \| `<div>` \| Initiates the hero body. \|

		--#{$hero}--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
		--#{$hero}--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);

		--#{$hero}--BorderRadiusTopLeftBottomRight: 24px;
		--#{$hero}--BorderRadiusTopRightBottomLeft: 72px;

	:root:where(.pf-v6-theme-dark) & {
	:root:where(.#{$pf-prefix}theme-dark) & {

	:root:where(.pf-v6-theme-glass) & {
	:root:where(.#{$pf-prefix}theme-glass) & {

Conversation

thatblindgeye commented Nov 7, 2025

Uh oh!

patternfly-build commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

patternfly-build commented Nov 7, 2025 •

edited

Loading