@patternfly/react-core 5.0.0-alpha.52 → 5.0.0-alpha.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.52",
+  "version": "5.0.0-alpha.54",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5eea8522248a6f8caa1d7cb27f5f5b95ca823b7b"
+  "gitHead": "1032b93276f93eb89b6e02893a14223e2fdfe25d"
 }

package/src/components/Nav/examples/Nav.md

@@ -37,11 +37,6 @@ The following example shows two navigation groups, each with a `title` prop pass
 ```ts file="./NavMixed.tsx"
 ```
 
-### Horizontal (only in PageHeader)
-
-```ts file="./NavHorizontalPageHeader.tsx"
-```
-
 ### Horizontal subnav
 
 ```ts file="./NavHorizontalSubNav.tsx"

package/src/components/Page/Page.tsx

@@ -19,7 +19,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <PageHeader />) */
+  /** Header component (e.g. <Masthead />) */
   header?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
@@ -41,7 +41,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   mainTabIndex?: number | null;
   /**
    * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
-   * the sidebar component or add a callback onNavToggle function into the PageHeader component
+   * the sidebar component or add a callback onNavToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Flag indicating if tertiary nav width should be limited */

package/src/components/Page/__tests__/Page.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Page } from '../Page';
-import { PageHeader } from '../PageHeader';
+import { PageHeader } from '../../../deprecated/components/PageHeader';
 import { PageSidebar } from '../PageSidebar';
 import { PageSection } from '../PageSection';
 import { Breadcrumb, BreadcrumbItem } from '../../Breadcrumb';

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

@@ -5,20 +5,20 @@ cssPrefix: pf-c-page
 propComponents:
   [
     'Page',
-    'PageHeader',
-    'PageHeaderTools',
-    'PageHeaderToolsGroup',
-    'PageHeaderToolsItem',
     'PageSidebar',
     'PageSection',
     'PageGroup',
     'PageBreadcrumb',
     'PageNavigation',
-    'PageToggleButton',
+    'PageToggleButton'
   ]
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import {
+  PageHeader,
+  PageHeaderTools
+} from '@patternfly/react-core/deprecated';
 import './page.css';
 
 ## Examples
@@ -41,13 +41,6 @@ The `isNavOpen` property helps facilitate the opening and closing of the sidebar
 ```ts file="./PageVerticalNav.tsx"
 ```
 
-### Legacy page header
-
-This example shows the legacy implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
-
-```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
-```
-
 ### Horizontal navigation
 
 To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
@@ -66,7 +59,7 @@ Tertiary navigation allows you to add an additional navigation menu alongside ve
 
 ### Uncontrolled navigation
 
-When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageHeader>`.
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageToggleButton>`.
 
 ```ts file="./PageUncontrolledNav.tsx"
 ```

package/src/components/Page/index.ts

@@ -1,12 +1,8 @@
 export * from './Page';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
-export * from './PageHeader';
 export * from './PageSidebar';
 export * from './PageSection';
-export * from './PageHeaderTools';
-export * from './PageHeaderToolsGroup';
-export * from './PageHeaderToolsItem';
 export * from './PageNavigation';
 export * from './PageToggleButton';
 export * from './PageContext';

package/src/demos/CardDemos.md

@@ -8,7 +8,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-ic
 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';
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
 import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
 import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
@@ -655,7 +655,7 @@ import {
   Popover,
   Title
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -723,7 +723,7 @@ const StatusPlain: React.FunctionComponent = () => {
       <div>
         Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
       </div>
-      <TableComposable variant="compact">
+      <Table variant="compact">
         <Thead>
           <Tr>
             <Th />
@@ -762,7 +762,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     </>
   );
 

package/src/demos/Filters/FilterDemos.md

@@ -32,7 +32,7 @@ ToolbarToggleGroup
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 ## Filtering demos
 

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -25,7 +25,7 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -649,7 +649,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -701,7 +701,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -15,7 +15,7 @@ import {
   Badge,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -375,7 +375,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -419,7 +419,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -24,7 +24,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -465,7 +465,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -517,7 +517,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -23,7 +23,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -515,7 +515,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -567,7 +567,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -488,7 +488,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -540,7 +540,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Repository {
@@ -296,7 +296,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -348,7 +348,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -12,7 +12,7 @@ import {
   ToolbarItem,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -360,7 +360,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -404,7 +404,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };

package/src/demos/Nav.md

@@ -2,14 +2,18 @@
 id: Navigation
 section: components
 ---
-
 import {
-Dropdown as DropdownDeprecated,
-DropdownGroup as DropdownGroupDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated,
-KebabToggle
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core/deprecated';
+
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -372,17 +376,18 @@ import {
   NavItem,
   NavList,
   Page,
-  PageHeader,
   PageSection,
   PageSectionVariants,
   SkipToContent,
   TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+  Text
 } from '@patternfly/react-core';
+
 import {
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem,
   Dropdown as DropdownDeprecated,
   DropdownGroup as DropdownGroupDeprecated,
   DropdownToggle,
@@ -730,23 +735,23 @@ import {
   NavItem,
   NavList,
   Page,
-  PageHeader,
   PageSection,
   PageSectionVariants,
   PageSectionTypes,
   SkipToContent,
   TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+  Text
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
   DropdownGroup as DropdownGroupDeprecated,
   DropdownToggle,
   DropdownItem as DropdownItemDeprecated,
-  KebabToggle
+  KebabToggle,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsItem,
+  PageHeaderToolsGroup
 } from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -1196,23 +1201,23 @@ import {
   NavItem,
   NavList,
   Page,
-  PageHeader,
   PageSection,
   PageSectionVariants,
   PageSidebar,
   SkipToContent,
   TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+  Text
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
   DropdownGroup as DropdownGroupDeprecated,
   DropdownToggle,
   DropdownItem as DropdownItemDeprecated,
-  KebabToggle
+  KebabToggle,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsItem,
+  PageHeaderToolsGroup
 } from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -1433,8 +1438,6 @@ import {
   Nav,
   NavList,
   NavItem,
-  PageHeader,
-  PageHeaderTools,
   PageSidebar,
   PageSection,
   PageSectionVariants,
@@ -1443,6 +1446,10 @@ import {
   MenuList,
   MenuItem
 } from '@patternfly/react-core';
+import {
+  PageHeader,
+  PageHeaderTools,
+}from '@patternfly/react-core';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 
 class VerticalPage extends React.Component {
@@ -1452,7 +1459,7 @@ class VerticalPage extends React.Component {
       isNavOpen: true,
       activeItem: 0
     };
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (e, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1493,17 +1500,17 @@ class VerticalPage extends React.Component {
     const { activeItem } = this.state;
 
     const Sidebar = (
-      <PageSidebar
+      <PageSidebar style={{"overflow": "visible"}}
         nav={
           <Nav onSelect={this.onNavSelect}>
             <NavList>
-              <NavItem id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
+              <NavItem preventDefault id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
                 System Panel
               </NavItem>
-              <NavItem flyout={curFlyout} id="flyout-link2" to="#flyout-link2" itemId={1} isActive={activeItem === 1}>
+              <NavItem preventDefault flyout={curFlyout} id="flyout-link2" itemId={1} isActive={activeItem === 1}>
                 Settings
               </NavItem>
-              <NavItem id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
+              <NavItem preventDefault id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
                 Authentication
               </NavItem>
             </NavList>

package/src/demos/Page.md

@@ -43,14 +43,6 @@ This demonstrates a variety of navigation patterns in the context of a full page
 
 ```
 
-### Sticky section group (using PageHeader)
-
-This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
-
-```ts file='./examples/Page/PageStickySectionGroupUsingPageHeader.tsx' isFullscreen
-
-```
-
 ### Sticky section breadcrumb (with breakpoints)
 
 ```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen