feat(Hero): glass styling update (#12412)

* feat(Hero): glass styling update

* fix exact match in test

* add beta flag, readd 2.2 rhds icons

Author: kmcfaul

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.80",
+    "@patternfly/patternfly": "6.5.0-prerelease.82",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"

packages/react-core/src/components/Hero/Hero.tsx

@@ -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. */
@@ -49,7 +49,7 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
   backgroundSrcDark,
   gradientLight,
   gradientDark,
-  hasNoGlass = false,
+  isGlass = false,
   bodyWidth,
   bodyMaxWidth,
   ...props
@@ -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}
     >

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(<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}`);
+});
+
 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');

packages/react-core/src/demos/Compass/examples/CompassDemo.tsx

@@ -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>

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.80",
+    "@patternfly/patternfly": "6.5.0-prerelease.82",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -35,7 +35,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.80",
+    "@patternfly/patternfly": "6.5.0-prerelease.82",
     "@rhds/icons": "^2.2.0",
     "fs-extra": "^11.3.3",
     "tslib": "^2.8.1"

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.80",
+    "@patternfly/patternfly": "6.5.0-prerelease.82",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.3"
   },

packages/react-tokens/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.4",
-    "@patternfly/patternfly": "6.5.0-prerelease.80",
+    "@patternfly/patternfly": "6.5.0-prerelease.82",
     "fs-extra": "^11.3.3"
   }
 }

yarn.lock

@@ -5070,10 +5070,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.5.0-prerelease.80":
-  version: 6.5.0-prerelease.80
-  resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.80"
-  checksum: 10c0/18b3fa8eead7edd9e235d7d9f99af71dbd3dff2637cddbb9f3f10be2b2ef41918a9ed6484a6f4637d73f4b687921e7c04b21341af5e97df0e3d58bf0b2200cd2
+"@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.80"
+    "@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.80"
+    "@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,7 +5232,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.80"
+    "@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"
@@ -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.80"
+    "@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.80"
+    "@patternfly/patternfly": "npm:6.5.0-prerelease.82"
     fs-extra: "npm:^11.3.3"
   languageName: unknown
   linkType: soft