@patternfly/react-core 5.0.0-alpha.35 → 5.0.0-alpha.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.35",
+  "version": "5.0.0-alpha.36",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "1138b9fba01a2b0ef0d45b2daf11d0fcf6970ee5"
+  "gitHead": "150dae762baafab2bdcdbc8c9860204e9b35d3cc"
 }

package/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} />
     )
   );
 };

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