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

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

@@ -10,18 +10,18 @@ export const CardSelectableA11yHighlight: 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);
   };
 

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

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithBodySectionFills: React.FunctionComponent = () => (
   <Card style={{ minHeight: '30em' }}>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>
     <CardBody isFilled={false}>Body pf-m-no-fill</CardBody>
     <CardBody>Body</CardBody>

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

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

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

@@ -3,8 +3,6 @@ import {
   Brand,
   Card,
   CardHeader,
-  CardHeaderMain,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -49,32 +47,33 @@ export const CardWithImageAndActions: 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-1"
+        name="check1"
+      />
+    </>
+  );
+
   return (
     <>
       <Card>
-        <CardHeader>
-          <CardHeaderMain>
-            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }} />
-          </CardHeaderMain>
-          <CardActions hasNoOffset={hasNoOffset}>
-            <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-1"
-              name="check1"
-            />
-          </CardActions>
+        <CardHeader actions={{actions: headerActions, hasNoOffset}}>
+          <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
         </CardHeader>
-        <CardTitle>Header</CardTitle>
+        <CardTitle>Title</CardTitle>
         <CardBody>Body</CardBody>
         <CardFooter>Footer</CardFooter>
       </Card>

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

@@ -23,7 +23,7 @@ export const CardWithModifiers: React.FunctionComponent = () => {
       </div>
       <div style={{ height: '15rem' }}>
         <Card {...modifiers}>
-          <CardTitle>Header</CardTitle>
+          <CardTitle>Title</CardTitle>
           <CardBody>Body</CardBody>
           <CardFooter>Footer</CardFooter>
         </Card>

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

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

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

@@ -3,7 +3,7 @@ import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
 export const CardWithNoFooter: React.FunctionComponent = () => (
   <Card>
-    <CardTitle>Header</CardTitle>
+    <CardTitle>Title</CardTitle>
     <CardBody>This card has no footer</CardBody>
   </Card>
 );

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

@@ -3,7 +3,7 @@ import { Card, CardBody, CardFooter } from '@patternfly/react-core';
 
 export const CardWithNoHeader: React.FunctionComponent = () => (
   <Card>
-    <CardBody>This card has no header</CardBody>
+    <CardBody>This card has no title </CardBody>
     <CardFooter>Footer</CardFooter>
   </Card>
 );

package/src/components/Card/index.ts

@@ -1,8 +1,6 @@
 export * from './Card';
-export * from './CardActions';
 export * from './CardBody';
 export * from './CardExpandableContent';
 export * from './CardFooter';
 export * from './CardTitle';
 export * from './CardHeader';
-export * from './CardHeaderMain';

package/src/demos/Card/Card.md

@@ -32,7 +32,6 @@ import {
   Button,
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Checkbox,
@@ -114,7 +113,7 @@ class CardViewBasic extends React.Component {
     };
 
     this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         isLowerToolbarDropdownOpen
       }));
     };
@@ -125,7 +124,7 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownSelect = event => {
+    this.onToolbarKebabDropdownSelect = (event) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
@@ -143,11 +142,11 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.deleteItem = item => event => {
-      const filter = getter => val => getter(val) !== item.id;
+    this.deleteItem = (item) => (event) => {
+      const filter = (getter) => (val) => getter(val) !== item.id;
       this.setState({
         res: this.state.res.filter(filter(({ id }) => id)),
-        selectedItems: this.state.selectedItems.filter(filter(id => id))
+        selectedItems: this.state.selectedItems.filter(filter((id) => id))
       });
     };
 
@@ -169,7 +168,7 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onSplitButtonSelect = event => {
+    this.onSplitButtonSelect = (event) => {
       this.setState((prevState, props) => {
         return { splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen };
       });
@@ -177,12 +176,14 @@ class CardViewBasic extends React.Component {
 
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
-      this.setState(prevState => {
+      this.setState((prevState) => {
         const prevSelections = prevState.filters['products'];
         return {
           filters: {
             ...prevState.filters,
-            ['products']: checked ? [...prevSelections, selection] : prevSelections.filter(value => value !== selection)
+            ['products']: checked
+              ? [...prevSelections, selection]
+              : prevSelections.filter((value) => value !== selection)
           }
         };
       });
@@ -190,8 +191,8 @@ class CardViewBasic extends React.Component {
 
     this.onDelete = (type = '', id = '') => {
       if (type) {
-        this.setState(prevState => {
-          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
+        this.setState((prevState) => {
+          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);
           return {
             filters: prevState.filters
           };
@@ -212,10 +213,10 @@ class CardViewBasic extends React.Component {
       }
       if ([' ', 'Enter'].includes(event.key)) {
         event.preventDefault();
-        this.setState(prevState => {
+        this.setState((prevState) => {
           return prevState.selectedItems.includes(productId * 1)
             ? {
-                selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+                selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
                 areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
               }
             : {
@@ -226,11 +227,11 @@ class CardViewBasic extends React.Component {
       }
     };
 
-    this.onClick = productId => {
-      this.setState(prevState => {
+    this.onClick = (productId) => {
+      this.setState((prevState) => {
         return prevState.selectedItems.includes(productId * 1)
           ? {
-              selectedItems: [...prevState.selectedItems.filter(id => productId * 1 != id)],
+              selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
               areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
             }
           : {
@@ -248,7 +249,7 @@ class CardViewBasic extends React.Component {
     if (checked) {
       selectedItems = [...selectedItems, value];
     } else {
-      selectedItems = selectedItems.filter(el => el !== value);
+      selectedItems = selectedItems.filter((el) => el !== value);
       if (this.state.areAllSelected) {
         this.setState({
           areAllSelected: !this.state.areAllSelected
@@ -336,7 +337,7 @@ class CardViewBasic extends React.Component {
 
   updateSelected() {
     const { res, selectedItems } = this.state;
-    let rows = res.map(post => {
+    let rows = res.map((post) => {
       post.selected = selectedItems.includes(post.id);
       return post;
     });
@@ -348,10 +349,10 @@ class CardViewBasic extends React.Component {
 
   fetch(page, perPage) {
     fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page }))
+      .then((resp) => resp.json())
+      .then((resp) => this.setState({ res: resp, perPage, page }))
       .then(() => this.updateSelected())
-      .catch(err => this.setState({ error: err }));
+      .catch((err) => this.setState({ error: err }));
   }
 
   componentDidMount() {
@@ -539,7 +540,7 @@ class CardViewBasic extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter(card => {
+        ? res.filter((card) => {
             return filters.products.length === 0 || filters.products.includes(card.name);
           })
         : res;
@@ -557,6 +558,36 @@ 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}>
@@ -590,41 +621,13 @@ class CardViewBasic extends React.Component {
                   isCompact
                   key={product.name}
                   id={product.name.replace(/ /g, '-')}
-                  onKeyDown={e => this.onKeyDown(e, product.id)}
+                  onKeyDown={(e) => this.onKeyDown(e, product.id)}
                   onClick={() => this.onClick(product.id)}
                   onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
-                  <CardHeader>
+                  <CardHeader actions={{ actions: headerActions }}>
                     <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
-                    <CardActions>
-                      <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}`}
-                      />
-                    </CardActions>
                   </CardHeader>
                   <CardTitle>{product.name}</CardTitle>
                   <CardBody>{product.description}</CardBody>

package/src/demos/CardDemos.md

@@ -25,7 +25,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardExpandableContent,
@@ -62,7 +61,7 @@ class CardGridDemo extends React.Component {
       });
     };
 
-    this.onActionSelect = event => {
+    this.onActionSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -85,9 +84,22 @@ class CardGridDemo extends React.Component {
         Action 4
       </DropdownItem>
     ];
+
+    const headerActions = (
+      <Dropdown
+        onSelect={this.onActionSelect}
+        toggle={<KebabToggle onToggle={this.onActionToggle} />}
+        isOpen={isDropdownOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position="right"
+      />
+    );
+
     return (
       <Card id="horizontal card" isExpanded={isCardExpanded}>
         <CardHeader
+          actions={{ actions: headerActions }}
           onExpand={this.onCardExpand}
           toggleButtonProps={{
             id: 'toggle-button',
@@ -96,16 +108,6 @@ class CardGridDemo extends React.Component {
             'aria-expanded': isCardExpanded
           }}
         >
-          <CardActions>
-            <Dropdown
-              onSelect={this.onActionSelect}
-              toggle={<KebabToggle onToggle={this.onActionToggle} />}
-              isOpen={isDropdownOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position="right"
-            />
-          </CardActions>
           {isCardExpanded && <CardTitle id="titleId">Getting Started</CardTitle>}
           {!isCardExpanded && (
             <Level hasGutter>
@@ -781,7 +783,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </FlexItem>
             <FlexItem>
               <Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px">
-                <a href="#" onClick={e => e.preventDefault()}>
+                <a href="#" onClick={(e) => e.preventDefault()}>
                   Control Panel
                 </a>
               </Popover>
@@ -1238,7 +1240,6 @@ import {
   Card,
   CardTitle,
   CardHeader,
-  CardActions,
   CardBody,
   CardFooter,
   Title,
@@ -1269,6 +1270,19 @@ const UtilizationCard3: React.FunctionComponent = () => {
     <SelectOption value="Last 7 days" key="option4" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={() => setIsOpen(!isOpen)}
+      onToggle={() => setIsOpen(!isOpen)}
+      isOpen={isOpen}
+      placeholderText="Filter"
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -1278,24 +1292,12 @@ const UtilizationCard3: React.FunctionComponent = () => {
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="utilization-card-3-card" component="div">
-            <CardHeader className="pf-u-align-items-flex-start">
+            <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
               <CardTitle>
                 <Title headingLevel="h4" size="lg" style={{ paddingTop: '3px' }}>
                   Recommendations
                 </Title>
               </CardTitle>
-              <CardActions hasNoOffset>
-                <Select
-                  onSelect={() => setIsOpen(!isOpen)}
-                  onToggle={() => setIsOpen(!isOpen)}
-                  isOpen={isOpen}
-                  placeholderText="Filter"
-                  position="right"
-                  isPlain
-                >
-                  {selectItems}
-                </Select>
-              </CardActions>
             </CardHeader>
             <CardBody>
               <Flex direction={{ default: 'column' }}>
@@ -2511,7 +2513,6 @@ import {
   CardTitle,
   CardBody,
   CardHeader,
-  CardActions,
   Title,
   Gallery,
   GalleryItem,
@@ -2532,6 +2533,20 @@ const TrendCard1: React.FunctionComponent = () => {
     <SelectOption value="Last 24 hours" key="option3" />,
     <SelectOption value="Last 7 days" key="option4" />
   ];
+
+  const headerActions = (
+    <Select
+      onSelect={() => setIsOpen(!isOpen)}
+      onToggle={() => setIsOpen(!isOpen)}
+      placeholderText="Filter"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2541,7 +2556,7 @@ const TrendCard1: React.FunctionComponent = () => {
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="trend-card-1-card" component="div">
-            <CardHeader>
+            <CardHeader actions={{ actions: headerActions, hasNoOffset: true }}>
               <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
                 <FlexItem>
                   <CardTitle>
@@ -2554,18 +2569,6 @@ const TrendCard1: React.FunctionComponent = () => {
                   <span className="pf-u-color-200">Workload</span>
                 </FlexItem>
               </Flex>
-              <CardActions hasNoOffset style={{ paddingTop: '1px' }}>
-                <Select
-                  onSelect={() => setIsOpen(!isOpen)}
-                  onToggle={() => setIsOpen(!isOpen)}
-                  placeholderText="Filter"
-                  isOpen={isOpen}
-                  position="right"
-                  isPlain
-                >
-                  {selectItems}
-                </Select>
-              </CardActions>
             </CardHeader>
             <CardBody>
               <ChartGroup
@@ -2685,7 +2688,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -2703,7 +2705,7 @@ import {
 CardLogViewDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onActionSelect = event => {
+  const onActionSelect = (event) => {
     setIsOpen(!isOpen);
   };
 
@@ -2718,6 +2720,19 @@ CardLogViewDemo = () => {
     <SelectOption value="Last 7 days" key="option4" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={onActionSelect}
+      onToggle={onActionToggle}
+      placeholderText="Most recent"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2726,19 +2741,7 @@ CardLogViewDemo = () => {
       <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-log-view-example">
-          <CardHeader className="pf-u-align-items-flex-start">
-            <CardActions hasNoOffset>
-              <Select
-                onSelect={onActionSelect}
-                onToggle={onActionToggle}
-                placeholderText="Most recent"
-                isOpen={isOpen}
-                position="right"
-                isPlain
-              >
-                {selectItems}
-              </Select>
-            </CardActions>
+          <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>
               <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Activity
@@ -2800,7 +2803,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -2823,7 +2825,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 CardEventViewDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onActionSelect = event => {
+  const onActionSelect = (event) => {
     setIsOpen(!isOpen);
   };
 
@@ -2837,6 +2839,18 @@ CardEventViewDemo = () => {
     <SelectOption value="Warning" key="option3" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={onActionSelect}
+      onToggle={onActionToggle}
+      placeholderText="Status"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2845,19 +2859,7 @@ CardEventViewDemo = () => {
       <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-events-view-example">
-          <CardHeader className="pf-u-align-items-flex-start">
-            <CardActions hasNoOffset>
-              <Select
-                onSelect={onActionSelect}
-                onToggle={onActionToggle}
-                placeholderText="Status"
-                isOpen={isOpen}
-                position="right"
-                isPlain
-              >
-                {selectItems}
-              </Select>
-            </CardActions>
+          <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>
               <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Events