@patternfly/react-core 5.0.0-alpha.27 → 5.0.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.29",
   "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": "e0cd3501320332665d0984291e41fb58ae9c7517"
+  "gitHead": "7c588834378fe2c857485727715af5cc4ecc4ceb"
 }

package/src/components/Card/Card.tsx

@@ -64,9 +64,9 @@ export const CardContext = React.createContext<Partial<CardContextProps>>({
 });
 
 export const Card: React.FunctionComponent<CardProps> = ({
-  children = null,
+  children,
   id = '',
-  className = '',
+  className,
   component = 'div',
   isCompact = false,
   isSelectable = false,

package/src/components/Card/CardActions.tsx

@@ -3,17 +3,17 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardActionsProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the Card Action */
+  /** Content rendered inside the card action */
   children?: React.ReactNode;
-  /** Additional classes added to the Action */
+  /** Additional classes added to the action */
   className?: string;
   /** Flag indicating that the actions have no offset */
   hasNoOffset?: boolean;
 }
 
 export const CardActions: React.FunctionComponent<CardActionsProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   hasNoOffset = false,
   ...props
 }: CardActionsProps) => (

package/src/components/Card/CardBody.tsx

@@ -14,8 +14,8 @@ export interface CardBodyProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardBody: React.FunctionComponent<CardBodyProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   isFilled = true,
   ...props

package/src/components/Card/CardExpandableContent.tsx

@@ -11,8 +11,8 @@ export interface CardExpandableContentProps extends React.HTMLProps<HTMLDivEleme
 }
 
 export const CardExpandableContent: React.FunctionComponent<CardExpandableContentProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardExpandableContentProps) => (
   <CardContext.Consumer>

package/src/components/Card/CardFooter.tsx

@@ -12,8 +12,8 @@ export interface CardFooterProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardFooter: React.FunctionComponent<CardFooterProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardFooterProps) => {

package/src/components/Card/CardHeader.tsx

@@ -2,14 +2,27 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Card/card';
 import { CardContext } from './Card';
+import { CardHeaderMain } from './CardHeaderMain';
+import { CardActions } from './CardActions';
 import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
+export interface CardHeaderActionsObject {
+  /** Actions of the card header */
+  actions: React.ReactNode;
+  /** Flag indicating that the actions have no offset */
+  hasNoOffset?: boolean;
+  /** Additional classes added to the actions wrapper */
+  className?: string;
+}
+
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the CardHeader */
+  /** Content rendered inside the card header */
   children?: React.ReactNode;
-  /** Additional classes added to the CardHeader */
+  /** Additional classes added to the card header */
   className?: string;
+  /** Actions of the card header */
+  actions?: CardHeaderActionsObject;
   /** ID of the card header. */
   id?: string;
   /** Callback expandable card */
@@ -21,8 +34,9 @@ export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
+  actions,
   id,
   onExpand,
   toggleButtonProps,
@@ -36,7 +50,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           <Button
             variant="plain"
             type="button"
-            onClick={evt => {
+            onClick={(evt) => {
               onExpand(evt, cardId);
             }}
             {...toggleButtonProps}
@@ -55,7 +69,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
           {...props}
         >
           {onExpand && !isToggleRightAligned && cardHeaderToggle}
-          {children}
+          {actions && <CardActions className={actions?.className} hasNoOffset={actions?.hasNoOffset}> {actions.actions} </CardActions>}
+          {children && <CardHeaderMain>{children}</CardHeaderMain>}
           {onExpand && isToggleRightAligned && cardHeaderToggle}
         </div>
       );

package/src/components/Card/CardHeaderMain.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Card/card';
 
 export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Card Head Main */
@@ -8,11 +10,11 @@ export interface CardHeaderMainProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardHeaderMain: React.FunctionComponent<CardHeaderMainProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   ...props
 }: CardHeaderMainProps) => (
-  <div className={className} {...props}>
+  <div className={css(styles.cardHeaderMain ,className)} {...props}>
     {children}
   </div>
 );

package/src/components/Card/CardTitle.tsx

@@ -13,8 +13,8 @@ export interface CardTitleProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const CardTitle: React.FunctionComponent<CardTitleProps> = ({
-  children = null,
-  className = '',
+  children,
+  className,
   component = 'div',
   ...props
 }: CardTitleProps) => {

package/src/components/Card/__tests__/CardHeader.test.tsx

@@ -7,4 +7,9 @@ describe('CardHeader', () => {
     const { asFragment } = render(<CardHeader onExpand={jest.fn()} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('actions are rendered', () => {
+    const { asFragment } = render(<CardHeader actions="test" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CardHeader actions are rendered 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-card__header"
+  >
+    <div
+      class="pf-c-card__actions"
+    >
+        
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`CardHeader onExpand adds the toggle button 1`] = `
 <DocumentFragment>
   <div

package/src/components/Card/__tests__/__snapshots__/CardHeaderMain.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CardHeaderMain renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
-    class=""
+    class="pf-c-card__header-main"
   >
     text
   </div>

package/src/components/Card/examples/Card.md

@@ -2,7 +2,7 @@
 id: Card
 section: components
 cssPrefix: pf-c-card
-propComponents: ['Card', 'CardActions', 'CardHeader', 'CardHeaderMain', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+propComponents: ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
 ouia: true
 ---
 
@@ -40,11 +40,11 @@ Most modifiers can be used in combination with each other, except for `isCompact
 
 ### Header images and actions
 
-You can include header images within `<CardHeaderMain>` and header actions within `<CardActions>`. The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardActions>`.
+You can include header actions with the `actions` property of `<CardHeader>` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardHeader>` actions.
 
-`<CardActions>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with `<CardActions>`. 
+The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. 
 
-You may use `hasNoOffset` to remove this negative margin, which better aligns `<CardActions>` in implementations that use large card titles or tall header images, for example. 
+You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. 
 
 Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
@@ -60,9 +60,9 @@ Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any ima
 
 ### Card header without title
 
-`<CardActions>` can be placed in the card header even without a `<CardTitle>`.
+Card actions can be placed in the card header even without a `<CardTitle>`.
 
-Images can also be placed in the card header within `<CardHeaderMain>` without a `<CardTitle>`.
+Images can also be placed in the card header without a `<CardTitle>`.
 
 ```ts file='./CardOnlyActionsInCardHead.tsx'
 ```

package/src/components/Card/examples/CardBasic.tsx

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardBasic: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>Body</CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>

package/src/components/Card/examples/CardExpandable.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -56,6 +55,26 @@ export const CardExpandable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-4"
+        name="check4"
+      />
+    </>
+  );
+
   return (
     <React.Fragment>
       <div style={{ marginBottom: '12px' }}>
@@ -69,6 +88,7 @@ export const CardExpandable: React.FunctionComponent = () => {
       </div>
       <Card id="expandable-card" isExpanded={isExpanded}>
         <CardHeader
+          actions={{actions: headerActions}}
           onExpand={onExpand}
           isToggleRightAligned={isToggleRightAligned}
           toggleButtonProps={{
@@ -78,24 +98,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             'aria-expanded': isExpanded
           }}
         >
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-              isOpen={isOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-            <Checkbox
-              isChecked={isChecked}
-              onChange={(_event, checked) => onClick(checked)}
-              aria-label="card checkbox example"
-              id="check-4"
-              name="check4"
-            />
-          </CardActions>
-          <CardTitle id="expandable-card-title">Header</CardTitle>
+          <CardTitle id="expandable-card-title">Title</CardTitle>
         </CardHeader>
         <CardExpandableContent>
           <CardBody>Body</CardBody>

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardBody,
   CardFooter,
   CardExpandableContent,
@@ -51,9 +50,30 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-5"
+        name="check5"
+      />
+    </>
+  );
+
   return (
     <Card id="expandable-card-icon" isExpanded={isExpanded}>
       <CardHeader
+        actions={{actions: headerActions}}
         onExpand={onExpand}
         toggleButtonProps={{
           id: 'toggle-button2',
@@ -62,23 +82,6 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
         }}
       >
         <img src={pfLogoSmall} alt="PatternFly logo" width="27px" />
-        <CardActions>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-            isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position={'right'}
-          />
-          <Checkbox
-            isChecked={isChecked}
-            onChange={(_event, checked) => onClick(checked)}
-            aria-label="card checkbox example"
-            id="check-5"
-            name="check5"
-          />
-        </CardActions>
       </CardHeader>
       <CardExpandableContent>
         <CardBody>Body</CardBody>

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -42,26 +41,29 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-2"
+        name="check2"
+      />
+    </>
+  );
+
   return (
     <Card>
-      <CardHeader>
-        <CardActions>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-            isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position={'right'}
-          />
-          <Checkbox
-            isChecked={isChecked}
-            onChange={(_event, checked) => onClick(checked)}
-            aria-label="card checkbox example"
-            id="check-2"
-            name="check2"
-          />
-        </CardActions>
+      <CardHeader actions={{actions: headerActions}}>
         <CardTitle>
           This is a really really really really really really really really really really long header
         </CardTitle>

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Dropdown,
@@ -21,18 +20,18 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     }
     if (['Enter', ' '].includes(event.key)) {
       event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
       setSelected(newSelected);
     }
   };
 
   const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
     setSelected(newSelected);
   };
 
   const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? null : labelledById;
+    const newSelected = labelledById === selected ? '' : labelledById;
     setSelected(newSelected);
   };
 
@@ -41,8 +40,8 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setIsKebabOpen(isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement> | undefined) => {
+    event?.stopPropagation();
     setIsKebabOpen(!isKebabOpen);
   };
 
@@ -64,6 +63,19 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={onToggle} />}
+        isOpen={isKebabOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+    </>
+  );
+
   return (
     <>
       <Card
@@ -75,18 +87,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         isSelected={selected === 'legacy-first-card'}
         hasSelectableInput
       >
-        <CardHeader>
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={onToggle} />}
-              isOpen={isKebabOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-          </CardActions>
-        </CardHeader>
+        <CardHeader actions={{actions: headerActions}}/>
         <CardTitle>First legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -7,7 +7,6 @@ import {
   KebabToggle,
   Card,
   CardHeader,
-  CardActions,
   CardBody
 } from '@patternfly/react-core';
 
@@ -40,27 +39,29 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        isOpen={isOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+      <Checkbox
+        isChecked={isChecked}
+        onChange={(_event, checked) => onClick(checked)}
+        aria-label="card checkbox example"
+        id="check-3"
+        name="check3"
+      />
+    </>
+  );
+
   return (
     <Card>
-      <CardHeader>
-        <CardActions>
-          <Dropdown
-            onSelect={onSelect}
-            toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
-            isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position={'right'}
-          />
-          <Checkbox
-            isChecked={isChecked}
-            onChange={(_event, checked) => onClick(checked)}
-            aria-label="card checkbox example"
-            id="check-3"
-            name="check3"
-          />
-        </CardActions>
-      </CardHeader>
+      <CardHeader actions={{actions: headerActions}}/>
       <CardBody>This is the card body. There are only actions in the card head.</CardBody>
     </Card>
   );

package/src/components/Card/examples/CardSelectable.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Dropdown,
@@ -21,18 +20,18 @@ export const CardSelectable: React.FunctionComponent = () => {
     }
     if ([' ', 'Enter'].includes(event.key)) {
       event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
       setSelected(newSelected);
     }
   };
 
   const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? null : event.currentTarget.id;
+    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
     setSelected(newSelected);
   };
 
   const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? null : labelledById;
+    const newSelected = labelledById === selected ? '' : labelledById;
     setSelected(newSelected);
   };
 
@@ -44,8 +43,8 @@ export const CardSelectable: React.FunctionComponent = () => {
     setIsKebabOpen(isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.SyntheticEvent<HTMLDivElement> | undefined) => {
+    event?.stopPropagation();
     setIsKebabOpen(false);
   };
 
@@ -67,6 +66,19 @@ export const CardSelectable: React.FunctionComponent = () => {
     </DropdownItem>
   ];
 
+  const headerActions = (
+    <>
+      <Dropdown
+        onSelect={onSelect}
+        toggle={<KebabToggle onToggle={onToggle} />}
+        isOpen={isKebabOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position={'right'}
+      />
+    </>
+  );
+
   return (
     <React.Fragment>
       <Card
@@ -78,18 +90,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
-        <CardHeader>
-          <CardActions>
-            <Dropdown
-              onSelect={onSelect}
-              toggle={<KebabToggle onToggle={onToggle} />}
-              isOpen={isKebabOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position={'right'}
-            />
-          </CardActions>
-        </CardHeader>
+        <CardHeader actions={{actions: headerActions}}/>
         <CardTitle>First card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>