@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.51

package/src/demos/Card/Card.md

@@ -1,6 +1,6 @@
 ---
 id: Card view
-section: demos
+section: patterns
 ---
 
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
@@ -18,6 +18,17 @@ 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 DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+DropdownToggleCheckbox,
+KebabToggle,
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -32,22 +43,19 @@ import {
   Button,
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   Checkbox,
   Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownToggleCheckbox,
+  DropdownList,
   EmptyState,
+  EmptyStateHeader,
   EmptyStateIcon,
+  EmptyStateFooter,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
   Gallery,
-  KebabToggle,
+  MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
@@ -66,6 +74,16 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  DropdownPosition,
+  DropdownToggleCheckbox,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
+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 +131,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 +161,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 +181,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 +195,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 +210,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 +232,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 +246,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 +268,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 +356,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 +368,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() {
@@ -402,19 +422,19 @@ class CardViewBasic extends React.Component {
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
     const splitButtonDropdownItems = [
-      <DropdownItem key="item-1" onClick={this.selectNone.bind(this)}>
+      <DropdownItemDeprecated key="item-1" onClick={this.selectNone.bind(this)}>
         Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={this.selectPage.bind(this)}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-2" onClick={this.selectPage.bind(this)}>
         Select page ({this.state.perPage} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={this.selectAll.bind(this)}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-3" onClick={this.selectAll.bind(this)}>
         Select all ({this.state.totalItemCount} items)
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
-      <Dropdown
+      <DropdownDeprecated
         position={DropdownPosition.left}
         onSelect={this.onSplitButtonSelect}
         toggle={
@@ -431,8 +451,7 @@ class CardViewBasic extends React.Component {
               </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
-          >
-          </DropdownToggle>
+          ></DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}
         dropdownItems={splitButtonDropdownItems}
@@ -493,19 +512,23 @@ 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>
     ];
@@ -522,17 +545,25 @@ class CardViewBasic extends React.Component {
             <OverflowMenuControl hasAdditionalOptions>
               <Dropdown
                 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>
+              </Dropdown>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
-        <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+        <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
           {this.renderPagination()}
         </ToolbarItem>
       </React.Fragment>
@@ -540,7 +571,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 +606,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 +625,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: (
+                        <>
+                          <DropdownDeprecated
+                            isPlain
+                            position="right"
+                            onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
+                            toggle={
+                              <KebabToggle
+                                onToggle={(_event, isCardKebabDropdownOpen) =>
+                                  this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
+                                }
+                              />
                             }
+                            isOpen={this.state[key]}
+                            dropdownItems={[
+                              <DropdownItemDeprecated key="trash" onClick={this.deleteItem(product)} position="right">
+                                <TrashIcon />
+                                Delete
+                              </DropdownItemDeprecated>
+                            ]}
                           />
-                        }
-                        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>