fix(brand): spread styles when there are no children

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

@@ -42,29 +42,28 @@ 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')
     };
   }
 
   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} />
     )
   );
 };

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