@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

package/src/components/TreeView/examples/TreeView.md

@@ -5,6 +5,11 @@ cssPrefix: pf-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
 
 ## Examples
@@ -30,7 +35,7 @@ class DefaultTreeView extends React.Component {
       }
     };
 
-    this.onToggle = evt => {
+    this.onToggle = (evt) => {
       const { allExpanded } = this.state;
       this.setState({
         allExpanded: allExpanded !== undefined ? !allExpanded : true
@@ -298,12 +303,14 @@ class SearchTreeView extends React.Component {
       }
     };
 
-    this.onSearch = evt => {
+    this.onSearch = (evt) => {
       const input = evt.target.value;
       if (input === '') {
         this.setState({ filteredItems: this.options, isFiltered: false });
       } else {
-        const filtered = this.options.map(opt => Object.assign({}, opt)).filter(item => this.filterItems(item, input));
+        const filtered = this.options
+          .map((opt) => Object.assign({}, opt))
+          .filter((item) => this.filterItems(item, input));
         this.setState({ filteredItems: filtered, isFiltered: true });
       }
     };
@@ -316,8 +323,8 @@ class SearchTreeView extends React.Component {
       if (item.children) {
         return (
           (item.children = item.children
-            .map(opt => Object.assign({}, opt))
-            .filter(child => this.filterItems(child, input))).length > 0
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => this.filterItems(child, input))).length > 0
         );
       }
     };
@@ -483,18 +490,18 @@ class CheckboxTreeView extends React.Component {
       console.log(checked);
 
       const checkedItemTree = this.options
-        .map(opt => Object.assign({}, opt))
-        .filter(item => this.filterItems(item, treeViewItem));
+        .map((opt) => Object.assign({}, opt))
+        .filter((item) => this.filterItems(item, treeViewItem));
       const flatCheckedItems = this.flattenTree(checkedItemTree);
       console.log('flat', flatCheckedItems);
 
       this.setState(
-        prevState => ({
+        (prevState) => ({
           checkedItems: checked
             ? prevState.checkedItems.concat(
-                flatCheckedItems.filter(item => !prevState.checkedItems.some(i => i.id === item.id))
+                flatCheckedItems.filter((item) => !prevState.checkedItems.some((i) => i.id === item.id))
               )
-            : prevState.checkedItems.filter(item => !flatCheckedItems.some(i => i.id === item.id))
+            : prevState.checkedItems.filter((item) => !flatCheckedItems.some((i) => i.id === item.id))
         }),
         () => {
           console.log('Checked items: ', this.state.checkedItems);
@@ -503,15 +510,15 @@ class CheckboxTreeView extends React.Component {
     };
 
     // Helper functions
-    const isChecked = dataItem => this.state.checkedItems.some(item => item.id === dataItem.id);
-    const areAllDescendantsChecked = dataItem =>
-      dataItem.children ? dataItem.children.every(child => areAllDescendantsChecked(child)) : isChecked(dataItem);
-    const areSomeDescendantsChecked = dataItem =>
-      dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);
+    const isChecked = (dataItem) => this.state.checkedItems.some((item) => item.id === dataItem.id);
+    const areAllDescendantsChecked = (dataItem) =>
+      dataItem.children ? dataItem.children.every((child) => areAllDescendantsChecked(child)) : isChecked(dataItem);
+    const areSomeDescendantsChecked = (dataItem) =>
+      dataItem.children ? dataItem.children.some((child) => areSomeDescendantsChecked(child)) : isChecked(dataItem);
 
-    this.flattenTree = tree => {
+    this.flattenTree = (tree) => {
       var result = [];
-      tree.forEach(item => {
+      tree.forEach((item) => {
         result.push(item);
         if (item.children) {
           result = result.concat(this.flattenTree(item.children));
@@ -520,7 +527,7 @@ class CheckboxTreeView extends React.Component {
       return result;
     };
 
-    this.mapTree = item => {
+    this.mapTree = (item) => {
       const hasCheck = areAllDescendantsChecked(item);
       // Reset checked properties to be updated
       item.checkProps.checked = false;
@@ -537,7 +544,7 @@ class CheckboxTreeView extends React.Component {
       if (item.children) {
         return {
           ...item,
-          children: item.children.map(child => this.mapTree(child))
+          children: item.children.map((child) => this.mapTree(child))
         };
       }
       return item;
@@ -551,15 +558,15 @@ class CheckboxTreeView extends React.Component {
       if (item.children) {
         return (
           (item.children = item.children
-            .map(opt => Object.assign({}, opt))
-            .filter(child => this.filterItems(child, checkedItem))).length > 0
+            .map((opt) => Object.assign({}, opt))
+            .filter((child) => this.filterItems(child, checkedItem))).length > 0
         );
       }
     };
   }
 
   render() {
-    const mapped = this.options.map(item => this.mapTree(item));
+    const mapped = this.options.map((item) => this.mapTree(item));
     return <TreeView data={mapped} onCheck={this.onCheck} hasCheckboxes />;
   }
 }
@@ -856,7 +863,12 @@ class CustomBadgesTreeView extends React.Component {
 
 ```js
 import React from 'react';
-import { TreeView, Button, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { TreeView, Button } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon';
 
@@ -881,7 +893,7 @@ class IconTreeView extends React.Component {
       });
     };
 
-    this.onAppLaunchSelect = event => {
+    this.onAppLaunchSelect = (event) => {
       this.setState({
         isOpen: !this.state.isOpen
       });
@@ -891,23 +903,23 @@ class IconTreeView extends React.Component {
   render() {
     const { activeItems, isOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
+      <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action" component="button">
         Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled href="www.google.com">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled link" isDisabled href="www.google.com">
         Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action" isDisabled component="button">
         Disabled Action
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
     const options = [
       {
         name: 'Application launcher',
         id: 'example7-AppLaunch',
         action: (
-          <Dropdown
+          <DropdownDeprecated
             onSelect={this.onAppLaunchSelect}
             toggle={<KebabToggle onToggle={this.onToggle} />}
             isOpen={isOpen}
@@ -1067,14 +1079,12 @@ import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 const CompactTreeView: React.FunctionComponent = () => {
   const options: TreeViewDataItem[] = [
     {
-      name:
-        'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
+      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
       title: 'apiVersion',
       id: 'example9-apiVersion'
     },
     {
-      name:
-        'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
+      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
       title: 'kind',
       id: 'example9-kind'
     },
@@ -1089,8 +1099,7 @@ const CompactTreeView: React.FunctionComponent = () => {
       id: 'example9-spec',
       children: [
         {
-          name:
-            'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
+          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
           title: 'minReadySeconds',
           id: 'example9-minReadySeconds'
         },
@@ -1100,20 +1109,17 @@ const CompactTreeView: React.FunctionComponent = () => {
           id: 'example9-paused'
         },
         {
-          name:
-            'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
+          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
           title: 'progressDeadlineSeconds',
           id: 'example9-progressDeadlineSeconds',
           children: [
             {
-              name:
-                'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
+              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
               title: 'revisionHistoryLimit',
               id: 'example9-revisionHistoryLimit',
               children: [
                 {
-                  name:
-                    'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
+                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
                   title: 'matchLabels',
                   id: 'example9-matchLabels'
                 }
@@ -1137,14 +1143,12 @@ import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
 const CompactNoBackgroundTreeView: React.FunctionComponent = () => {
   const options: TreeViewDataItem[] = [
     {
-      name:
-        'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
+      name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.',
       title: 'apiVersion',
       id: 'example10-apiVersion'
     },
     {
-      name:
-        'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
+      name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:',
       title: 'kind',
       id: 'example10-kind'
     },
@@ -1159,8 +1163,7 @@ const CompactNoBackgroundTreeView: React.FunctionComponent = () => {
       id: 'example10-spec',
       children: [
         {
-          name:
-            'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
+          name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).',
           title: 'minReadySeconds',
           id: 'example10-minReadySeconds'
         },
@@ -1170,20 +1173,17 @@ const CompactNoBackgroundTreeView: React.FunctionComponent = () => {
           id: 'example10-paused'
         },
         {
-          name:
-            'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
+          name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.',
           title: 'progressDeadlineSeconds',
           id: 'example10-progressDeadlineSeconds',
           children: [
             {
-              name:
-                'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
+              name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.',
               title: 'revisionHistoryLimit',
               id: 'example10-revisionHistoryLimit',
               children: [
                 {
-                  name:
-                    'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
+                  name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.',
                   title: 'matchLabels',
                   id: 'example10-matchLabels'
                 }
@@ -1214,13 +1214,13 @@ class MemoTreeView extends React.Component {
 
     this.onSelect = (evt, treeViewItem) => {
       let filtered = [];
-      this.options.forEach(item => this.filterItems(item, treeViewItem.id, filtered));
+      this.options.forEach((item) => this.filterItems(item, treeViewItem.id, filtered));
       this.setState({
         activeItems: filtered
       });
     };
 
-    this.onToggle = evt => {
+    this.onToggle = (evt) => {
       const { allExpanded } = this.state;
       this.setState({
         allExpanded: allExpanded !== undefined ? !allExpanded : true
@@ -1230,7 +1230,7 @@ class MemoTreeView extends React.Component {
     this.filterItems = (item, input, list) => {
       if (item.children) {
         let childContained = false;
-        item.children.forEach(child => {
+        item.children.forEach((child) => {
           if (childContained) {
             this.filterItems(child, input, list);
           } else {

package/src/demos/AlertGroup.md

@@ -7,7 +7,12 @@ import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import DashboardWrapper from './examples/DashboardWrapper';
 import DashboardHeader from './examples/DashboardHeader';
-
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle,
+DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -16,4 +21,5 @@ This demonstrates how you can assemble a full page view including the use of ale
 ### Alert group toast with notification drawer
 
 ```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen
-```
+
+```

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';
@@ -20,7 +20,15 @@ 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';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+DropdownToggleCheckbox,
+KebabToggle,
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -39,11 +47,7 @@ import {
   CardBody,
   Checkbox,
   Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownToggleCheckbox,
+  DropdownList,
   EmptyState,
   EmptyStateHeader,
   EmptyStateIcon,
@@ -51,7 +55,6 @@ import {
   EmptyStateVariant,
   EmptyStateActions,
   Gallery,
-  KebabToggle,
   MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
@@ -71,7 +74,15 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+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';
 
@@ -411,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={
@@ -501,7 +512,9 @@ class CardViewBasic extends React.Component {
     } = this.state;
 
     const toolbarKebabDropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="link">Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={0} key="link">
+        Link
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem itemId={1} key="action" component="button">
         Action
       </OverflowMenuDropdownItem>,
@@ -512,7 +525,9 @@ class CardViewBasic extends React.Component {
         Disabled Action
       </OverflowMenuDropdownItem>,
       <DropdownSeparator itemId={4} key="separator" />,
-      <OverflowMenuDropdownItem itemId={5} key="separated link">Separated Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={5} key="separated link">
+        Separated Link
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
         Separated Action
       </OverflowMenuDropdownItem>
@@ -528,9 +543,9 @@ class CardViewBasic extends React.Component {
               <Button variant="primary">Create a project</Button>
             </OverflowMenuItem>
             <OverflowMenuControl hasAdditionalOptions>
-              <DropdownNext
+              <Dropdown
                 onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={toggleRef => (
+                toggle={(toggleRef) => (
                   <MenuToggle
                     ref={toggleRef}
                     aria-label="Toolbar kebab overflow menu"
@@ -544,7 +559,7 @@ class CardViewBasic extends React.Component {
                 isOpen={isLowerToolbarKebabDropdownOpen}
               >
                 <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
-              </DropdownNext>
+              </Dropdown>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
@@ -619,7 +634,7 @@ class CardViewBasic extends React.Component {
                     actions={{
                       actions: (
                         <>
-                          <Dropdown
+                          <DropdownDeprecated
                             isPlain
                             position="right"
                             onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
@@ -632,10 +647,10 @@ class CardViewBasic extends React.Component {
                             }
                             isOpen={this.state[key]}
                             dropdownItems={[
-                              <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
+                              <DropdownItemDeprecated key="trash" onClick={this.deleteItem(product)} position="right">
                                 <TrashIcon />
                                 Delete
-                              </DropdownItem>
+                              </DropdownItemDeprecated>
                             ]}
                           />
                           <Checkbox

package/src/demos/CardDemos.md

@@ -3,6 +3,7 @@ id: Card
 section: components
 ---
 
+import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, KebabToggle } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
@@ -31,15 +32,17 @@ import {
   Level,
   LabelGroup,
   Label,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Grid,
   Flex,
   List,
   ListItem,
   Button
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
@@ -71,22 +74,22 @@ class CardGridDemo extends React.Component {
   render() {
     const { isCardExpanded, isDropdownOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="action1" component="button">
+      <DropdownItemDeprecated key="action1" component="button">
         Action 1
-      </DropdownItem>,
-      <DropdownItem key="action2" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action2" component="button">
         Action 2
-      </DropdownItem>,
-      <DropdownItem key="disabled action3" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action3" isDisabled component="button">
         Disabled Action 3
-      </DropdownItem>,
-      <DropdownItem key="action4" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action4" component="button">
         Action 4
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const headerActions = (
-      <Dropdown
+      <DropdownDeprecated
         onSelect={this.onActionSelect}
         toggle={<KebabToggle onToggle={this.onActionToggle} />}
         isOpen={isDropdownOpen}

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -1,6 +1,7 @@
 ---
-id: Composable menu
-section: demos
+id: Custom menus
+section: components
+subsection: menus
 ---
 
 import { Link } from '@reach/router';
@@ -26,7 +27,7 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
 ## Demos
 
-Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
+Custom menus can be constructed using a composable approach by combining the [Menu](/components/menus/menu) and [Menu toggle](/components/menus/menu-toggle) components in unique ways. Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
 
 ### Composable simple dropdown