From f8796a3f9dcbce9566986677fe1232b9b33d46a7 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Wed, 15 Mar 2023 08:31:14 -0400
Subject: [PATCH] fix(brand): spread styles when there are no children

---
 .../react-core/src/components/Brand/Brand.tsx    | 13 ++++++-------
 .../components/Brand/__tests__/Brand.test.tsx    | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/Brand/Brand.tsx b/packages/react-core/src/components/Brand/Brand.tsx
index 17b7a2aba43..bef62544ca7 100644
--- a/packages/react-core/src/components/Brand/Brand.tsx
+++ b/packages/react-core/src/components/Brand/Brand.tsx
@@ -42,16 +42,15 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   style,
   ...props
 }: BrandProps) => {
+  let responsiveStyles; 
   if (children !== undefined && widths !== undefined) {
-    style = {
-      ...style,
+    responsiveStyles = {
       ...setBreakpointCssVars(widths, '--pf-c-brand--Width')
     };
   }
 
   if (children !== undefined && heights !== undefined) {
-    style = {
-      ...style,
+    responsiveStyles = {
       ...setBreakpointCssVars(heights, '--pf-c-brand--Height')
     };
   }
@@ -59,12 +58,12 @@ export const Brand: React.FunctionComponent<BrandProps> = ({
   return (
     /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
     children !== undefined ? (
-      <picture className={css(styles.brand, styles.modifiers.picture, className)} style={style} {...props}>
+      <picture className={css(styles.brand, styles.modifiers.picture, className)} style={{...style, ...responsiveStyles}} {...props}>
         {children}
-        <img src={src} alt={alt} />
+        <img src={src} alt={alt}/>
       </picture>
     ) : (
-      <img {...props} className={css(styles.brand, className)} src={src} alt={alt} />
+      <img {...props} className={css(styles.brand, className)} style={style} src={src} alt={alt} />
     )
   );
 };
diff --git a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx
index 102e8510429..08e4fd1051f 100644
--- a/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx
+++ b/packages/react-core/src/components/Brand/__tests__/Brand.test.tsx
@@ -17,4 +17,20 @@ describe('Brand', () => {
     );
     expect(screen.getByText('test')).toBeInTheDocument();
   });
+
+  test('styles get spread when there are children', () => {
+    render(
+      <Brand alt="brand" data-testid="brand" style={{color: "blue"}}>
+        <div>test width</div>
+      </Brand>
+    );
+    expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`);
+  });
+
+  test('styles get spread when there are no children', () => {
+    render(
+      <Brand alt="brand no children" style={{width: "30px"}} />
+    );
+    expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`);
+  });
 });