@patternfly/react-core 4.225.0 → 4.225.3

package/src/components/Menu/examples/Menu.md

@@ -309,7 +309,7 @@ class MenuWithTitledGroups extends React.Component {
             </MenuList>
           </MenuGroup>
           <Divider />
-          <MenuGroup label="Group 1">
+          <MenuGroup label="Group 1" labelHeadingLevel="h3">
             <MenuList>
               <MenuItem to="#" itemId={1}>
                 Link 1
@@ -318,7 +318,7 @@ class MenuWithTitledGroups extends React.Component {
             </MenuList>
           </MenuGroup>
           <Divider />
-          <MenuGroup label="Group 2">
+          <MenuGroup label="Group 2" labelHeadingLevel="h3">
             <MenuList>
               <MenuItem to="#" itemId={3}>
                 Link 1
@@ -424,7 +424,7 @@ class MenuWithActions extends React.Component {
         activeItemId={activeItem}
       >
         <MenuContent>
-          <MenuGroup label="Actions">
+          <MenuGroup label="Actions" labelHeadingLevel="h3">
             <MenuList>
               <MenuItem
                 isSelected={selectedItems.indexOf(0) !== -1}
@@ -545,7 +545,7 @@ class MenuWithFavorites extends React.Component {
         <MenuContent>
           {favorites.length > 0 && (
             <React.Fragment>
-              <MenuGroup label="Favorites">
+              <MenuGroup label="Favorites" labelHeadingLevel="h3">
                 <MenuList>
                   {items
                     // map the items into the favorites group that have been favorited
@@ -569,7 +569,7 @@ class MenuWithFavorites extends React.Component {
               <Divider />
             </React.Fragment>
           )}
-          <MenuGroup label="All actions">
+          <MenuGroup label="All actions" labelHeadingLevel="h3">
             <MenuList>
               {items.map(item => {
                 const { text, description, itemId, action, actionId } = item;
@@ -733,7 +733,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
       menuDrilledIn: [],
       drilldownPath: [],
       menuHeights: {},
-      activeMenu: 'rootMenu',
+      activeMenu: 'breadcrumbs-rootMenu',
       breadcrumb: undefined,
       withMaxMenuHeight: false
     };
@@ -793,7 +793,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.startRolloutBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:start_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
@@ -803,7 +803,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
     this.appGroupingBreadcrumb = isOpen => {
       return (
         <Breadcrumb>
-          <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:start_rollout', null)}>
+          <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
             Root
           </BreadcrumbItem>
           <BreadcrumbItem isDropdown>
@@ -820,7 +820,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                   component="button"
                   icon={<AngleLeftIcon />}
                   onClick={() =>
-                    this.drillOut('drilldownMenuStart', 'group:app_grouping_start', this.startRolloutBreadcrumb)
+                    this.drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', this.startRolloutBreadcrumb)
                   }
                 >
                   Start rollout
@@ -835,7 +835,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.labelsBreadcrumb = isOpen => (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:start_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbItem isDropdown>
@@ -851,7 +851,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 key="dropdown-start"
                 component="button"
                 icon={<AngleLeftIcon />}
-                onClick={() => this.drillOut('drilldownMenuStart', 'group:labels_start', this.startRolloutBreadcrumb)}
+                onClick={() => this.drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', this.startRolloutBreadcrumb)}
               >
                 Start rollout
               </DropdownItem>
@@ -864,7 +864,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.pauseRolloutsBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:pause_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
@@ -873,12 +873,12 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.pauseRolloutsAppGrpBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:pause_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbItem
           component="button"
-          onClick={() => this.drillOut('drilldownMenuPause', 'group:app_grouping', this.pauseRolloutsBreadcrumb)}
+          onClick={() => this.drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', this.pauseRolloutsBreadcrumb)}
         >
           Pause rollouts
         </BreadcrumbItem>
@@ -888,12 +888,12 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.pauseRolloutsLabelsBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:pause_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbItem
           component="button"
-          onClick={() => this.drillOut('drilldownMenuPause', 'group:labels', this.pauseRolloutsBreadcrumb)}
+          onClick={() => this.drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', this.pauseRolloutsBreadcrumb)}
         >
           Pause rollouts
         </BreadcrumbItem>
@@ -903,7 +903,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.addStorageBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:storage', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>
@@ -926,7 +926,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
         />
         <br />
         <Menu
-          id="rootMenu"
+          id="breadcrumbs-rootMenu"
           containsDrilldown
           drilldownItemPath={drilldownPath}
           drilledInMenus={menuDrilledIn}
@@ -948,14 +948,14 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 direction="down"
                 onClick={() => this.setState({ breadcrumb: this.startRolloutBreadcrumb })}
                 drilldownMenu={
-                  <DrilldownMenu id="drilldownMenuStart">
+                  <DrilldownMenu id="breadcrumbs-drilldownMenuStart">
                     <MenuItem
                       itemId="group:app_grouping_start"
                       description="Groups A-G"
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.appGroupingBreadcrumb(false) })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuStartGrouping">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuStartGrouping">
                           <MenuItem itemId="group_a">Group A</MenuItem>
                           <MenuItem itemId="group_b">Group B</MenuItem>
                           <MenuItem itemId="group_c">Group C</MenuItem>
@@ -974,7 +974,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.labelsBreadcrumb(false) })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuStartLabels">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuStartLabels">
                           <MenuItem itemId="label_1">Label 1</MenuItem>
                           <MenuItem itemId="label_2">Label 2</MenuItem>
                           <MenuItem itemId="label_3">Label 3</MenuItem>
@@ -994,14 +994,14 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 direction="down"
                 onClick={() => this.setState({ breadcrumb: this.pauseRolloutsBreadcrumb })}
                 drilldownMenu={
-                  <DrilldownMenu id="drilldownMenuPause">
+                  <DrilldownMenu id="breadcrumbs-drilldownMenuPause">
                     <MenuItem
                       itemId="group:app_grouping"
                       description="Groups A-C"
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.pauseRolloutsAppGrpBreadcrumb })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuGrouping">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
                           <MenuItem itemId="group_a">Group A</MenuItem>
                           <MenuItem itemId="group_b">Group B</MenuItem>
                           <MenuItem itemId="group_c">Group C</MenuItem>
@@ -1016,7 +1016,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.pauseRolloutsLabelsBreadcrumb })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuLabels">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
                           <MenuItem itemId="label_1">Label 1</MenuItem>
                           <MenuItem itemId="label_2">Label 2</MenuItem>
                           <MenuItem itemId="label_3">Label 3</MenuItem>
@@ -1037,7 +1037,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 direction="down"
                 onClick={() => this.setState({ breadcrumb: this.addStorageBreadcrumb })}
                 drilldownMenu={
-                  <DrilldownMenu id="drilldownMenuStorage">
+                  <DrilldownMenu id="breadcrumbs-drilldownMenuStorage">
                     <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
                       From git
                     </MenuItem>

package/src/components/Menu/examples/MenuDrilldown.tsx

@@ -9,7 +9,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
+  const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');
 
   const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
@@ -33,7 +33,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
 
   return (
     <Menu
-      id="rootMenu"
+      id="drilldown-rootMenu"
       containsDrilldown
       drilldownItemPath={drilldownPath}
       drilledInMenus={menuDrilledIn}
@@ -48,7 +48,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
             itemId="group:start_rollout"
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuStart">
+              <DrilldownMenu id="drilldown-drilldownMenuStart">
                 <MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
                   Start rollout
                 </MenuItem>
@@ -58,7 +58,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuStartGrouping">
+                    <DrilldownMenu id="drilldown-drilldownMenuStartGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -76,7 +76,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuStartLabels">
+                    <DrilldownMenu id="drilldown-drilldownMenuStartLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -99,7 +99,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
             itemId="group:pause_rollout"
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuPause">
+              <DrilldownMenu id="drilldown-drilldownMenuPause">
                 <MenuItem itemId="group:pause_rollout_breadcrumb" direction="up">
                   Pause rollouts
                 </MenuItem>
@@ -109,7 +109,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuGrouping">
+                    <DrilldownMenu id="drilldown-drilldownMenuGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -127,7 +127,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuLabels">
+                    <DrilldownMenu id="drilldown-drilldownMenuLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -151,7 +151,7 @@ export const MenuDrilldown: React.FunctionComponent = () => {
             icon={<StorageDomainIcon aria-hidden />}
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuStorage">
+              <DrilldownMenu id="drilldown-drilldownMenuStorage">
                 <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
                   Add storage
                 </MenuItem>

package/src/components/Menu/examples/MenuDrilldownInitialState.tsx

@@ -6,10 +6,13 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuDrilldownInitialState: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>(['rootMenu', 'drilldownMenuStart']);
+  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([
+    'initial-state-rootMenu',
+    'initial-state-drilldownMenuStart'
+  ]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>(['group:start_rollout', 'group:app_grouping']);
-  const [menuHeights, setMenuHeights] = React.useState<any>({ rootMenu: 216 }); // The root menu height must be defined when starting from a drilled in state
-  const [activeMenu, setActiveMenu] = React.useState<string>('drilldownMenuStartGrouping');
+  const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
+  const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');
 
   const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
@@ -26,14 +29,14 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
   };
 
   const setHeight = (menuId: string, height: number) => {
-    if (menuHeights[menuId] === undefined || (menuId !== 'rootMenu' && menuHeights[menuId] !== height)) {
+    if (menuHeights[menuId] === undefined || (menuId !== 'initial-state-rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({ ...menuHeights, [menuId]: height });
     }
   };
 
   return (
     <Menu
-      id="rootMenu"
+      id="initial-state-rootMenu"
       containsDrilldown
       drilldownItemPath={drilldownPath}
       drilledInMenus={menuDrilledIn}
@@ -48,7 +51,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
             itemId="group:start_rollout"
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuStart">
+              <DrilldownMenu id="initial-state-drilldownMenuStart">
                 <MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
                   Start rollout
                 </MenuItem>
@@ -58,7 +61,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuStartGrouping">
+                    <DrilldownMenu id="initial-state-drilldownMenuStartGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -76,7 +79,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuStartLabels">
+                    <DrilldownMenu id="initial-state-drilldownMenuStartLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -99,7 +102,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
             itemId="group:pause_rollout"
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuPause">
+              <DrilldownMenu id="initial-state-drilldownMenuPause">
                 <MenuItem itemId="group:pause_rollout_breadcrumb" direction="up">
                   Pause rollouts
                 </MenuItem>
@@ -109,7 +112,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuGrouping">
+                    <DrilldownMenu id="initial-state-drilldownMenuGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -127,7 +130,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuLabels">
+                    <DrilldownMenu id="initial-state-drilldownMenuLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -151,7 +154,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
             icon={<StorageDomainIcon aria-hidden />}
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuStorage">
+              <DrilldownMenu id="initial-state-drilldownMenuStorage">
                 <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
                   Add storage
                 </MenuItem>

package/src/components/Menu/examples/MenuDrilldownSubmenuFunctions.tsx

@@ -9,7 +9,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
+  const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');
 
   const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
@@ -33,7 +33,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
 
   return (
     <Menu
-      id="rootMenu"
+      id="functions-rootMenu"
       containsDrilldown
       drilldownItemPath={drilldownPath}
       drilledInMenus={menuDrilledIn}
@@ -48,7 +48,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
             itemId="group:start_rollout"
             direction="down"
             drilldownMenu={() => (
-              <DrilldownMenu id="drilldownMenuStart">
+              <DrilldownMenu id="functions-drilldownMenuStart">
                 <MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
                   Start rollout
                 </MenuItem>
@@ -58,7 +58,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuStartGrouping">
+                    <DrilldownMenu id="functions-drilldownMenuStartGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -76,7 +76,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuStartLabels">
+                    <DrilldownMenu id="functions-drilldownMenuStartLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -99,7 +99,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
             itemId="group:pause_rollout"
             direction="down"
             drilldownMenu={() => (
-              <DrilldownMenu id="drilldownMenuPause">
+              <DrilldownMenu id="functions-drilldownMenuPause">
                 <MenuItem itemId="group:pause_rollout_breadcrumb" direction="up">
                   Pause rollouts
                 </MenuItem>
@@ -109,7 +109,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuGrouping">
+                    <DrilldownMenu id="functions-drilldownMenuGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -127,7 +127,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuLabels">
+                    <DrilldownMenu id="functions-drilldownMenuLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -151,7 +151,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
             icon={<StorageDomainIcon aria-hidden />}
             direction="down"
             drilldownMenu={() => (
-              <DrilldownMenu id="drilldownMenuStorage">
+              <DrilldownMenu id="functions-drilldownMenuStorage">
                 <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
                   Add storage
                 </MenuItem>

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -3,6 +3,11 @@ import Dropzone, { DropzoneProps, DropFileEventHandler } from 'react-dropzone';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 
+/** Acts as a container for all other MultipleFileUpload sub-components. This sub-component
+ * also provides the functionality for file uploads, and access to the uploaded files via
+ * a callback.
+ */
+
 export interface MultipleFileUploadProps extends Omit<React.HTMLProps<HTMLDivElement>, 'value'> {
   /** Content rendered inside the multi upload field */
   children?: React.ReactNode;

package/src/components/MultipleFileUpload/MultipleFileUploadMain.tsx

@@ -5,6 +5,9 @@ import { MultipleFileUploadTitle } from './MultipleFileUploadTitle';
 import { MultipleFileUploadButton } from './MultipleFileUploadButton';
 import { MultipleFileUploadInfo } from './MultipleFileUploadInfo';
 
+/** Creates the visual upload interface, including the area to drag and drop files,
+ * an optional upload button, and descriptive instructions.
+ */
 export interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElement> {
   /** Class to add to outer div */
   className?: string;

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -6,6 +6,12 @@ import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-i
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
+/** Acts as an expandable container for all uploaded file statuses.
+ * An optional text and/or icon can also be passed into this sub-component.
+ * This sub-component can be conditionally rendered when at least 1 file has been
+ * attempted to be uploaded.
+ */
+
 export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside multi file upload status list */
   children?: React.ReactNode;

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -6,6 +6,11 @@ import { Button } from '../Button';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 
+/** Automatically reads an uploaded file to render a visual representation of it, including
+ * its name, size, and read status. This sub-component also allows custom reading of files
+ * via various callbacks which will override the automatic reading behavior.
+ */
+
 export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Class to add to outer div */
   className?: string;

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -3,12 +3,7 @@ id: File upload - multiple
 section: components
 cssPrefix: pf-c-multiple-file-upload
 propComponents:
-  [
-    'MultipleFileUpload',
-    'MultipleFileUploadMain',
-    'MultipleFileUploadStatus',
-    'MultipleFileUploadStatusItem',
-  ]
+  ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
 beta: true
 ---
 
@@ -31,6 +26,19 @@ As with singular file upload, any [props accepted by react-dropzone's Dropzone c
 
 Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.
 
+## Composable structure
+
+File upload - multiple is designed in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```noLive
+<MultipleFileUpload>
+  <MultipleFileUploadMain />
+  <MultipleFileUploadStatus>
+    <MultipleFileUploadStatusItem />
+  </MultipleFileUploadStatus>
+</MultipleFileUpload>
+```
+
 ## Examples
 
 ### Basic

package/src/components/Nav/Nav.tsx

@@ -30,7 +30,7 @@ export interface NavProps
     isExpanded: boolean;
     event: React.MouseEvent<HTMLButtonElement>;
   }) => void;
-  /** Accessibility label */
+  /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
   /** Indicates which theme color to use */
   theme?: 'dark' | 'light';