@patternfly/react-core 4.225.2 → 4.225.5

package/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap

@@ -49,6 +49,7 @@ exports[`optionsMenu expanded 1`] = `
       <section
         class="pf-c-options-menu__group"
         index="0"
+        role="none"
       >
         <h1
           class="pf-c-options-menu__group-title"
@@ -58,6 +59,7 @@ exports[`optionsMenu expanded 1`] = `
         <ul
           aria-label=""
           class=""
+          role="group"
         >
           <li
             id=""
@@ -137,6 +139,7 @@ exports[`optionsMenu expanded 1`] = `
       <section
         class="pf-c-options-menu__group"
         index="2"
+        role="none"
       >
         <h1
           class="pf-c-options-menu__group-title"
@@ -146,6 +149,7 @@ exports[`optionsMenu expanded 1`] = `
         <ul
           aria-label=""
           class=""
+          role="group"
         >
           <li
             id=""
@@ -467,7 +471,7 @@ exports[`optionsMenu text 1`] = `
         aria-haspopup="listbox"
         aria-label="Options menu"
         class="pf-c-options-menu__toggle-button"
-        id="-toggle"
+        id="text-toggle"
       >
         <span
           class="pf-c-options-menu__toggle-button-icon"

package/src/components/OptionsMenu/examples/OptionsMenu.md

@@ -49,7 +49,7 @@ class SingleOption extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-single-option-example" 
+        id="single-option-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         toggle={toggle}/>
@@ -85,7 +85,7 @@ class DisabledOptionsMenu extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-single-disabled-example-toggle" 
+        id="single-disabled-example" 
         isOpen={isOpen} 
         menuItems={menuItems}
         toggle={toggle}/>
@@ -149,7 +149,7 @@ class MultipleOptions extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-multiple-options-example" 
+        id="multiple-options-example" 
         menuItems={menuItems} 
         isOpen={isOpen}
         toggle={toggle}
@@ -220,12 +220,12 @@ class Plain extends React.Component {
 
     return (
       <React.Fragment>
-        <OptionsMenu id="options-menu-plain-disabled-example" 
+        <OptionsMenu id="plain-disabled-example" 
           isPlain
           menuItems={disabledMenuItems}  
           isOpen={isDisabledOpen}
           toggle={disabledToggle}/>
-        <OptionsMenu id="options-menu-plain-example" 
+        <OptionsMenu id="plain-example" 
           isPlain
           menuItems={menuItems}  
           isOpen={isOpen}
@@ -277,7 +277,7 @@ class Top extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-top-example" 
+        id="top-example" 
         direction={OptionsMenuDirection.up} 
         menuItems={menuItems} 
         toggle={toggle} 
@@ -328,7 +328,7 @@ class AlignRight extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-align-right-example" 
+        id="align-right-example" 
         position={OptionsMenuPosition.right} 
         menuItems={menuItems} 
         toggle={toggle} 
@@ -387,7 +387,7 @@ class PlainWithText extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-plain-with-text-example" 
+        id="plain-with-text-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         isPlain
@@ -447,7 +447,7 @@ class PlainWithText extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-plain-with-text-example" 
+        id="plain-with-text-disabled-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         isPlain
@@ -507,7 +507,7 @@ class GroupedItems extends React.Component {
     
     return (
       <OptionsMenu 
-        id="options-menu-align-right-example" 
+        id="grouped-items-example" 
         position={OptionsMenuPosition.right} 
         menuItems={menuGroups} 
         toggle={toggle} 
@@ -559,7 +559,7 @@ class SingleOption extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-single-option-example" 
+        id="document-body-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         toggle={toggle}

package/src/components/Page/PageHeader.tsx

@@ -21,6 +21,8 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   topNav?: React.ReactNode;
   /** True to show the nav toggle button (toggles side nav) */
   showNavToggle?: boolean;
+  /** Id for the nav toggle button */
+  navToggleId?: string;
   /** True if the side nav is shown  */
   isNavOpen?: boolean;
   /** This prop is no longer managed through PageHeader but in the Page component. */
@@ -44,6 +46,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   isManagedSidebar: deprecatedIsManagedSidebar = undefined,
   role = undefined as string,
   showNavToggle = false,
+  navToggleId = 'nav-toggle',
   onNavToggle = () => undefined as any,
   'aria-label': ariaLabel = 'Global navigation',
   'aria-controls': ariaControls = null,
@@ -68,7 +71,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
                 {showNavToggle && (
                   <div className={css(styles.pageHeaderBrandToggle)}>
                     <Button
-                      id="nav-toggle"
+                      id={navToggleId}
                       onClick={navToggle}
                       aria-label={ariaLabel}
                       aria-controls={ariaControls}

package/src/components/Page/PageSidebar.tsx

@@ -17,6 +17,8 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   isNavOpen?: boolean;
   /** Indicates the color scheme of the sidebar */
   theme?: 'dark' | 'light';
+  /** Sidebar id */
+  id?: string;
 }
 
 export interface PageSidebarContextProps {
@@ -32,6 +34,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   nav,
   isNavOpen = true,
   theme = 'dark',
+  id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
@@ -40,7 +43,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
 
       return (
         <div
-          id="page-sidebar"
+          id={id}
           className={css(
             styles.pageSidebar,
             theme === 'light' && styles.modifiers.light,
@@ -51,7 +54,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           aria-hidden={!navOpen}
           {...props}
         >
-          <div className={styles.pageSidebarBody}>
+          <div className={css(styles.pageSidebarBody)}>
             <PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
           </div>
         </div>

package/src/components/Page/PageToggleButton.tsx

@@ -10,12 +10,15 @@ export interface PageToggleButtonProps extends ButtonProps {
   isNavOpen?: boolean;
   /** Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
   onNavToggle?: () => void;
+  /** Button id */
+  id?: string;
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
   children,
   isNavOpen = true,
   onNavToggle = () => undefined as any,
+  id = 'nav-toggle',
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
@@ -25,7 +28,7 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
 
       return (
         <Button
-          id="nav-toggle"
+          id={id}
           onClick={navToggle}
           aria-label="Side navigation toggle"
           aria-expanded={navOpen ? 'true' : 'false'}

package/src/components/Page/examples/Page.md

@@ -19,6 +19,7 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import './page.css';
 
 ## Examples
 
@@ -60,7 +61,7 @@ class VerticalPage extends React.Component {
     const { isNavOpen } = this.state;
 
     const headerToolbar = (
-      <Toolbar id="toolbar">
+      <Toolbar id="vertical-toolbar">
         <ToolbarContent>
           <ToolbarItem>header-tools</ToolbarItem>
         </ToolbarContent>
@@ -75,6 +76,7 @@ class VerticalPage extends React.Component {
             aria-label="Global navigation"
             isNavOpen={isNavOpen}
             onNavToggle={this.onNavToggle}
+            id="vertical-nav-toggle"
           >
             <BarsIcon />
           </PageToggleButton>
@@ -87,7 +89,7 @@ class VerticalPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar"/>;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -119,7 +121,7 @@ import {
 
 HorizontalPage = () => {
   const headerToolbar = (
-    <Toolbar id="toolbar">
+    <Toolbar id="horizontal-toolbar">
       <ToolbarContent>
         <ToolbarItem>Navigation</ToolbarItem>
         <ToolbarItem>header-tools</ToolbarItem>
@@ -167,7 +169,7 @@ import {
 
 TertiaryPage = () => {
   const headerToolbar = (
-    <Toolbar id="toolbar">
+    <Toolbar id="tertiary-toolbar">
       <ToolbarContent>
         <ToolbarItem>header-tools</ToolbarItem>
       </ToolbarContent>
@@ -232,7 +234,7 @@ class FillPage extends React.Component {
     const { isNavOpen } = this.state;
 
     const headerToolbar = (
-      <Toolbar id="toolbar">
+      <Toolbar id="fill-toolbar">
         <ToolbarContent>
           <ToolbarItem>header-tools</ToolbarItem>
         </ToolbarContent>
@@ -247,6 +249,7 @@ class FillPage extends React.Component {
             aria-label="Global navigation"
             isNavOpen={isNavOpen}
             onNavToggle={this.onNavToggle}
+            id="fill-nav-toggle"
           >
             <BarsIcon />
           </PageToggleButton>
@@ -259,7 +262,7 @@ class FillPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar"/>;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -313,7 +316,7 @@ class VerticalPage extends React.Component {
     const { isNavOpen } = this.state;
 
     const headerToolbar = (
-      <Toolbar id="toolbar">
+      <Toolbar id="main-padding-toolbar">
         <ToolbarContent>
           <ToolbarItem>header-tools</ToolbarItem>
         </ToolbarContent>
@@ -328,6 +331,7 @@ class VerticalPage extends React.Component {
             aria-label="Global navigation"
             isNavOpen={isNavOpen}
             onNavToggle={this.onNavToggle}
+            id="main-padding-nav-toggle"
           >
             <BarsIcon />
           </PageToggleButton>
@@ -340,7 +344,7 @@ class VerticalPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar"/>;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -384,7 +388,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 class UncontrolledNavPage extends React.Component {
   render() {
     const headerToolbar = (
-      <Toolbar id="toolbar">
+      <Toolbar id="uncontrolled-toolbar">
         <ToolbarContent>
           <ToolbarItem>header-tools</ToolbarItem>
         </ToolbarContent>
@@ -394,7 +398,7 @@ class UncontrolledNavPage extends React.Component {
     const Header = (
       <Masthead>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
+          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
@@ -406,7 +410,7 @@ class UncontrolledNavPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" />;
+    const Sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar"/>;
 
     return (
       <Page isManagedSidebar header={Header} sidebar={Sidebar}>
@@ -465,7 +469,7 @@ class GroupPage extends React.Component {
     const { isNavOpen } = this.state;
 
     const headerToolbar = (
-      <Toolbar id="toolbar">
+      <Toolbar id="group-section-toolbar">
         <ToolbarContent>
           <ToolbarItem>header-tools</ToolbarItem>
         </ToolbarContent>
@@ -480,6 +484,7 @@ class GroupPage extends React.Component {
             aria-label="Global navigation"
             isNavOpen={isNavOpen}
             onNavToggle={this.onNavToggle}
+            id="group-section-nav-toggle"
           >
             <BarsIcon />
           </PageToggleButton>
@@ -492,13 +497,13 @@ class GroupPage extends React.Component {
         <MastheadContent>{headerToolbar}</MastheadContent>
       </Masthead>
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar"/>;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
         <PageGroup>
           <PageNavigation>
-            <Nav aria-label="Nav" variant="tertiary">
+            <Nav aria-label="Group section navigation" variant="tertiary">
               <NavList>
                 <NavItem itemId={0} isActive>
                   System panel
@@ -574,9 +579,10 @@ class VerticalPage extends React.Component {
         showNavToggle
         isNavOpen={isNavOpen}
         onNavToggle={this.onNavToggle}
+        navToggleId="vertical-pageheader-toggle"
       />
     );
-    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-pageheader-sidebar"/>;
 
     return (
       <Page header={Header} sidebar={Sidebar}>
@@ -614,7 +620,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 CenterAlignedPageSection = () => {
   const headerToolbar = (
-    <Toolbar id="toolbar">
+    <Toolbar id="centered-toolbar">
       <ToolbarContent>
         <ToolbarItem>header-tools</ToolbarItem>
       </ToolbarContent>
@@ -624,7 +630,7 @@ CenterAlignedPageSection = () => {
   const Header = (
     <Masthead>
       <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label="Global navigation" onNavToggle={this.onNavToggle}>
+        <PageToggleButton variant="plain" aria-label="Global navigation" onNavToggle={this.onNavToggle} id="centered-nav-toggle">
           <BarsIcon />
         </PageToggleButton>
       </MastheadToggle>

package/src/components/Page/examples/page.css

@@ -0,0 +1,3 @@
+.pf-c-page__sidebar-body {
+  color: var(--pf-global--Color--light-100)
+}

package/src/components/Select/examples/Select.md

@@ -602,7 +602,7 @@ class CheckboxSelectInputNoBadge extends React.Component {
 
   render() {
     const { isOpen, selected } = this.state;
-    const titleId = 'checkbox-select-id';
+    const titleId = 'checkbox-no-badge-select-id';
     return (
       <div>
         <span id={titleId} hidden>
@@ -928,7 +928,7 @@ class FilteringCheckboxSelectInput extends React.Component {
 
   render() {
     const { isOpen, selected, filteredOptions } = this.state;
-    const titleId = 'checkbox-filtering-select-id';
+    const titleId = 'grouped-checkbox-filtering-select-id';
     return (
       <div>
         <span id={titleId} hidden>
@@ -1033,7 +1033,7 @@ class FilteringCheckboxSelectInputWithPlaceholder extends React.Component {
 
   render() {
     const { isOpen, selected, filteredOptions } = this.state;
-    const titleId = 'checkbox-filtering-select-id';
+    const titleId = 'checkbox-filtering-with-placeholder-select-id';
     return (
       <div>
         <span id={titleId} hidden>
@@ -1157,7 +1157,7 @@ class FilteringCheckboxSelectInputWithBadging extends React.Component {
 
   render() {
     const { isOpen, selected, filteredOptions, customBadgeText } = this.state;
-    const titleId = 'checkbox-filtering-select-id';
+    const titleId = 'checkbox-filtering-custom-badging-select-id';
     return (
       <div>
         <span id={titleId} hidden>
@@ -1494,16 +1494,16 @@ class GroupedTypeaheadSelectInput extends React.Component {
           isChecked={this.state.isCreatable}
           onChange={this.toggleCreatable}
           aria-label="toggle creatable checkbox"
-          id="toggle-creatable-typeahead"
-          name="toggle-creatable-typeahead"
+          id="toggle-creatable-grouped-typeahead"
+          name="toggle-creatable-grouped-typeahead"
         />
         <Checkbox
           label="onCreateOption"
           isChecked={this.state.hasOnCreateOption}
           onChange={this.toggleCreateNew}
           aria-label="toggle new checkbox"
-          id="toggle-new-typeahead"
-          name="toggle-new-typeahead"
+          id="toggle-new-grouped-typeahead"
+          name="toggle-new-grouped-typeahead"
         />
       </div>
     );
@@ -1912,7 +1912,7 @@ class MultiTypeaheadSelectInputWithChipGroupProps extends React.Component {
 
   render() {
     const { isOpen, selected, isCreatable, hasOnCreateOption } = this.state;
-    const titleId = 'multi-typeahead-custom-chip-group-props-id-1';
+    const titleId = 'multi-typeahead-render-chip-group-props-id-1';
 
     return (
       <div>
@@ -2129,7 +2129,7 @@ class PlainSelectInput extends React.Component {
 }
 ```
 
-### Panel
+### Panel as a menu
 
 ```js
 import React from 'react';

package/src/components/Tabs/TabContent.tsx

@@ -35,6 +35,7 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   child,
   children,
   className,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   eventKey,
   innerRef,
   ouiaId,
@@ -46,7 +47,7 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
     if (ariaLabel) {
       labelledBy = null;
     } else {
-      labelledBy = children ? `pf-tab-${eventKey}-${id}` : `pf-tab-${child.props.eventKey}-${id}`;
+      labelledBy = children ? `${id}` : `pf-tab-${child.props.eventKey}-${id}`;
     }
 
     return (