@patternfly/react-core 4.225.1 → 4.225.4

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 (