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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.34",
+  "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": "9a3ab7a6248885619173e33a938ce22749be6c2b"
+  "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`);
+  });
 });

package/src/demos/Card/Card.md

@@ -560,36 +560,6 @@ class CardViewBasic extends React.Component {
       swaggerIcon
     };
 
-    const headerActions = (
-      <>
-        <Dropdown
-          isPlain
-          position="right"
-          onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
-          toggle={
-            <KebabToggle
-              onToggle={(_event, isCardKebabDropdownOpen) =>
-                this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
-              }
-            />
-          }
-          isOpen={this.state[key]}
-          dropdownItems={[
-            <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
-              <TrashIcon />
-              Delete
-            </DropdownItem>
-          ]}
-        />
-        <Checkbox
-          checked={isChecked}
-          value={product.id}
-          isChecked={selectedItems.includes(product.id)}
-          aria-label="card checkbox example"
-          id={`check-${product.id}`}
-        />
-      </>
-    );
     return (
       <React.Fragment>
         <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
@@ -631,7 +601,40 @@ class CardViewBasic extends React.Component {
                   onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
-                  <CardHeader actions={{ actions: headerActions }}>
+                  <CardHeader
+                    actions={{
+                      actions: (
+                        <>
+                          <Dropdown
+                            isPlain
+                            position="right"
+                            onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
+                            toggle={
+                              <KebabToggle
+                                onToggle={(_event, isCardKebabDropdownOpen) =>
+                                  this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
+                                }
+                              />
+                            }
+                            isOpen={this.state[key]}
+                            dropdownItems={[
+                              <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
+                                <TrashIcon />
+                                Delete
+                              </DropdownItem>
+                            ]}
+                          />
+                          <Checkbox
+                            checked={isChecked}
+                            value={product.id}
+                            isChecked={selectedItems.includes(product.id)}
+                            aria-label="card checkbox example"
+                            id={`check-${product.id}`}
+                          />
+                        </>
+                      )
+                    }}
+                  >
                     <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
                   </CardHeader>
                   <CardTitle>{product.name}</CardTitle>