@patternfly/react-core 5.0.0-alpha.53 → 5.0.0-alpha.55

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/components/TextArea/examples/TextAreaValidated.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';
 
 export const TextAreaValidated: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  const [invalidText, setInvalidText] = React.useState('You must have something to say');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
   const simulateNetworkCall = (callback: Function) => {
@@ -21,7 +20,7 @@ export const TextAreaValidated: React.FunctionComponent = () => {
           setHelperText('Thanks for your comments!');
         } else {
           setValidated('error');
-          setInvalidText("You're being too brief, please enter at least 10 characters.");
+          setHelperText("You're being too brief, please enter at least 10 characters.");
         }
       } else {
         setValidated('warning');
@@ -31,21 +30,19 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   };
   return (
     <Form>
-      <FormGroup
-        label="Comments:"
-        type="string"
-        helperText={helperText}
-        helperTextInvalid={invalidText}
-        fieldId="selection"
-        validated={validated}
-      >
+      <FormGroup label="Comments:" type="string" fieldId="selection">
         <TextArea
           value={value}
-          onChange={value => handleTextAreaChange(value)}
+          onChange={(value) => handleTextAreaChange(value)}
           isRequired
           validated={validated}
           aria-label="invalid text area example"
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Form, FormGroup, TextInput, Wizard, WizardStep } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
 interface PrevStepInfo {
   prevId?: string | number;
   prevName: React.ReactNode;
@@ -26,14 +35,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -41,6 +43,13 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -14,7 +14,10 @@ import {
   WizardFooter,
   WizardContextConsumer,
   Alert,
-  EmptyStateIcon
+  EmptyStateIcon,
+  HelperText,
+  HelperTextItem,
+  FormHelperText
 } from '@patternfly/react-core';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -94,14 +97,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -109,6 +105,13 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );

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

package/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx

@@ -40,7 +40,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
     setValue(inputValue);
   };
 
-  const filterValidations = () => Object.keys(inputValidation).filter(item => inputValidation[item] !== 'success');
+  const filterValidations = () => Object.keys(inputValidation).filter((item) => inputValidation[item] !== 'success');
 
   return (
     <Form>
@@ -55,7 +55,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
           aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText component="ul">
             <HelperTextItem component="li" id="ruleLength" isDynamic variant={ruleLength as any}>
               Must be at least 5 characters in length

package/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx

@@ -32,7 +32,7 @@ export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () =>
           aria-invalid={inputValidation === 'error'}
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText id="helper-text2" aria-live="polite">
             {inputValidation !== 'success' && (
               <HelperTextItem variant={inputValidation as any} hasIcon={inputValidation === 'error'}>

package/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx

@@ -19,7 +19,7 @@ export const HelperTextStaticVariantStaticText: React.FunctionComponent = () =>
           aria-describedby="helper-text1"
           value={value}
         />
-        <FormHelperText isHidden={false} component="div">
+        <FormHelperText>
           <HelperText id="helper-text1">
             <HelperTextItem variant={'default'}>Enter your middle name or your middle initial</HelperTextItem>
           </HelperText>