Austin and Erin feedback

Author: thatblindgeye

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

@@ -9,7 +9,7 @@ import heroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_hero_grad
 import heroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_dark';
 import heroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_dark';
 
-/** The main Hero component that allowws adjusting of its background images and gradients in different color modes (such as light and dark). */
+/** The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark). */
 
 export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
   /** Content of the hero */
@@ -54,27 +54,23 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
     backgroundImageStyles[heroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
   }
 
-  if (gradientLight) {
-    if (gradientLight.stop1) {
-      backgroundImageStyles[heroGradientStop1Light.name] = gradientLight.stop1;
-    }
-    if (gradientLight.stop2) {
-      backgroundImageStyles[heroGradientStop2Light.name] = gradientLight.stop2;
-    }
-    if (gradientLight.stop3) {
-      backgroundImageStyles[heroGradientStop3Light.name] = gradientLight.stop3;
-    }
+  if (gradientLight?.stop1) {
+    backgroundImageStyles[heroGradientStop1Light.name] = gradientLight.stop1;
   }
-  if (gradientDark) {
-    if (gradientDark.stop1) {
-      backgroundImageStyles[heroGradientStop1Dark.name] = gradientDark.stop1;
-    }
-    if (gradientDark.stop2) {
-      backgroundImageStyles[heroGradientStop2Dark.name] = gradientDark.stop2;
-    }
-    if (gradientDark.stop3) {
-      backgroundImageStyles[heroGradientStop3Dark.name] = gradientDark.stop3;
-    }
+  if (gradientLight?.stop2) {
+    backgroundImageStyles[heroGradientStop2Light.name] = gradientLight.stop2;
+  }
+  if (gradientLight?.stop3) {
+    backgroundImageStyles[heroGradientStop3Light.name] = gradientLight.stop3;
+  }
+  if (gradientDark?.stop1) {
+    backgroundImageStyles[heroGradientStop1Dark.name] = gradientDark.stop1;
+  }
+  if (gradientDark?.stop2) {
+    backgroundImageStyles[heroGradientStop2Dark.name] = gradientDark.stop2;
+  }
+  if (gradientDark?.stop3) {
+    backgroundImageStyles[heroGradientStop3Dark.name] = gradientDark.stop3;
   }
 
   return (

packages/react-core/src/components/Hero/examples/Hero.md

@@ -10,9 +10,9 @@ propComponents: ['Hero', 'HeroBody']
 
 ### Basic
 
-When using a `<Hero>` with a background image, you can use the `<HeroBody>` to prevent text content from overlapping the background image, which helps ensure the text is more easily readable. Keep in mind that you should still check the color contrast when using the `gradientLight` or `gradientDark` properties.
+To ensure readability and prevent text from overlapping with the background image, use the `<HeroBody>` component. The `<HeroBody>` is optional and can be omitted if there's no background image or if you'd like finer control over text placement.
 
-You can omit the `<HeroBody>` for finer control over the text placement, or if no background image is applied to the `<Hero>`.
+When using `gradientLight` or `gradientDark`, regardless of the presence of a `<HeroBody>`, check the color contrast to ensure proper accessibility.
 
 ```ts file="HeroBasic.tsx"