@patternfly/react-core 5.0.0-alpha.4 → 5.0.0-alpha.41

package/src/demos/Card/Card.md

@@ -18,6 +18,9 @@ import sparkIcon from './camel-spark_200x150.png';
 import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Demos
 
@@ -32,7 +35,6 @@ import {
   Button,
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Checkbox,
@@ -43,11 +45,14 @@ import {
   DropdownPosition,
   DropdownToggleCheckbox,
   EmptyState,
+  EmptyStateHeader,
   EmptyStateIcon,
+  EmptyStateFooter,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
   Gallery,
   KebabToggle,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
@@ -66,6 +71,8 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
+import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
@@ -113,19 +120,19 @@ class CardViewBasic extends React.Component {
       return selected === total;
     };
 
-    this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
-      this.setState(prevState => ({
+    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
+      this.setState((prevState) => ({
         isLowerToolbarDropdownOpen
       }));
     };
 
-    this.onToolbarKebabDropdownToggle = isLowerToolbarKebabDropdownOpen => {
+    this.onToolbarKebabDropdownToggle = () => {
       this.setState({
-        isLowerToolbarKebabDropdownOpen
+        isOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
     };
 
-    this.onToolbarKebabDropdownSelect = event => {
+    this.onToolbarKebabDropdownSelect = (event) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
@@ -143,11 +150,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))
       });
     };
 
@@ -163,13 +170,13 @@ class CardViewBasic extends React.Component {
       });
     };
 
-    this.onSplitButtonToggle = isOpen => {
+    this.onSplitButtonToggle = (_event, isOpen) => {
       this.setState({
         splitButtonDropdownIsOpen: isOpen
       });
     };
 
-    this.onSplitButtonSelect = event => {
+    this.onSplitButtonSelect = (event) => {
       this.setState((prevState, props) => {
         return { splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen };
       });
@@ -177,12 +184,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 +199,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 +221,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 +235,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 +257,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 +345,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 +357,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() {
@@ -431,8 +440,7 @@ class CardViewBasic extends React.Component {
               </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
-          >
-          </DropdownToggle>
+          ></DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}
         dropdownItems={splitButtonDropdownItems}
@@ -493,19 +501,19 @@ class CardViewBasic extends React.Component {
     } = this.state;
 
     const toolbarKebabDropdownItems = [
-      <OverflowMenuDropdownItem key="link">Link</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action" component="button">
+      <OverflowMenuDropdownItem itemId={0} key="link">Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={1} key="action" component="button">
         Action
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="disabled link" isDisabled>
+      <OverflowMenuDropdownItem itemId={2} key="disabled link" isDisabled>
         Disabled Link
       </OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="disabled action" isDisabled component="button">
+      <OverflowMenuDropdownItem itemId={3} key="disabled action" isDisabled component="button">
         Disabled Action
       </OverflowMenuDropdownItem>,
-      <DropdownSeparator key="separator" />,
-      <OverflowMenuDropdownItem key="separated link">Separated Link</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="separated action" component="button">
+      <DropdownSeparator itemId={4} key="separator" />,
+      <OverflowMenuDropdownItem itemId={5} key="separated link">Separated Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
         Separated Action
       </OverflowMenuDropdownItem>
     ];
@@ -520,19 +528,27 @@ class CardViewBasic extends React.Component {
               <Button variant="primary">Create a project</Button>
             </OverflowMenuItem>
             <OverflowMenuControl hasAdditionalOptions>
-              <Dropdown
+              <DropdownNext
                 onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="toggle-id-6" />}
+                toggle={toggleRef => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    aria-label="Toolbar kebab overflow menu"
+                    variant="plain"
+                    onClick={this.onToolbarKebabDropdownToggle}
+                    isExpanded={isLowerToolbarKebabDropdownOpen}
+                  >
+                    <EllipsisVIcon />
+                  </MenuToggle>
+                )}
                 isOpen={isLowerToolbarKebabDropdownOpen}
-                isPlain
-                dropdownItems={toolbarKebabDropdownItems}
-                isFlipEnabled
-                menuAppendTo="parent"
-              />
+              >
+                <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
+              </DropdownNext>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
-        <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+        <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
           {this.renderPagination()}
         </ToolbarItem>
       </React.Fragment>
@@ -540,7 +556,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;
@@ -575,13 +591,16 @@ class CardViewBasic extends React.Component {
               <Card isCompact>
                 <Bullseye>
                   <EmptyState variant={EmptyStateVariant.xs}>
-                    <EmptyStateIcon icon={PlusCircleIcon} />
-                    <Title headingLevel="h2" size="md">
-                      Add a new card to your page
-                    </Title>
-                    <EmptyStateSecondaryActions>
-                      <Button variant="link">Add card</Button>
-                    </EmptyStateSecondaryActions>
+                    <EmptyStateHeader
+                      headingLevel="h2"
+                      titleText="Add a new card to your page"
+                      icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                    />
+                    <EmptyStateFooter>
+                      <EmptyStateActions>
+                        <Button variant="link">Add card</Button>
+                      </EmptyStateActions>
+                    </EmptyStateFooter>
                   </EmptyState>
                 </Bullseye>
               </Card>
@@ -591,41 +610,46 @@ 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>
-                    <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={isCardKebabDropdownOpen =>
-                              this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
+                  <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>
+                            ]}
                           />
-                        }
-                        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>
+                          <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>
                   <CardBody>{product.description}</CardBody>