@patternfly/react-core 4.203.1 → 4.205.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.203.1",
+  "version": "4.205.0",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.54.1",
-    "@patternfly/react-styles": "^4.53.1",
-    "@patternfly/react-tokens": "^4.55.1",
+    "@patternfly/react-icons": "^4.56.0",
+    "@patternfly/react-styles": "^4.55.0",
+    "@patternfly/react-tokens": "^4.57.0",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.187.0",
+    "@patternfly/patternfly": "4.190.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "2f16e9b81a8ab2c54d9ef945e50c1e4aa7510c49"
+  "gitHead": "aad64697166a03d35c3e711df51f25ec0d517623"
 }

package/src/components/Form/Form.tsx

@@ -9,8 +9,10 @@ export interface FormProps extends React.HTMLProps<HTMLFormElement> {
   className?: string;
   /** Sets the Form to horizontal. */
   isHorizontal?: boolean;
-  /** Flag to limit the max-width to 500px. */
+  /** Limits the max-width of the form. */
   isWidthLimited?: boolean;
+  /** Sets a custom max-width for the form. */
+  maxWidth?: string;
 }
 
 export const Form: React.FunctionComponent<FormProps> = ({
@@ -18,15 +20,22 @@ export const Form: React.FunctionComponent<FormProps> = ({
   className = '',
   isHorizontal = false,
   isWidthLimited = false,
+  maxWidth = '',
   ...props
 }: FormProps) => (
   <form
     noValidate
+    {...(maxWidth && {
+      style: {
+        '--pf-c-form--m-limit-width--MaxWidth': maxWidth,
+        ...props.style
+      } as React.CSSProperties
+    })}
     {...props}
     className={css(
       styles.form,
       isHorizontal && styles.modifiers.horizontal,
-      isWidthLimited && styles.modifiers.limitWidth,
+      (isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
       className
     )}
   >

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -22,13 +22,11 @@ export interface ProgressStepProps
   description?: string;
   /** ID of the title of the progress step. */
   titleId?: string;
-  /** Popover for a progress step. */
-  popover?: React.ReactNode;
-  /** @hide Forwarded reference to title container */
-  innerRef?: React.Ref<any>;
   /** Accessible label for the progress step. Should communicate all information being communicated by the progress
    * step's icon, including the variant and the completed status. */
   'aria-label'?: string;
+  /** Forwards the step ref to rendered function.  Use this prop to add a popover to the step.*/
+  popoverRender?: (stepRef: React.RefObject<any>) => React.ReactNode;
 }
 
 const variantIcons = {
@@ -49,7 +47,7 @@ const variantStyle = {
   danger: styles.modifiers.danger
 };
 
-const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
+export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
   children,
   className,
   variant,
@@ -57,13 +55,13 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   description,
   icon,
   titleId,
-  popover,
-  innerRef,
   'aria-label': ariaLabel,
+  popoverRender,
   ...props
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
-  const Component = popover !== undefined ? 'span' : 'div';
+  const Component = popoverRender !== undefined ? 'span' : 'div';
+  const stepRef = React.useRef();
 
   if (props.id === undefined || titleId === undefined) {
     /* eslint-disable no-console */
@@ -89,14 +87,14 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
       </div>
       <div className={css(styles.progressStepperStepMain)}>
         <Component
-          className={css(styles.progressStepperStepTitle, popover && styles.modifiers.helpText)}
+          className={css(styles.progressStepperStepTitle, popoverRender && styles.modifiers.helpText)}
           id={titleId}
-          ref={innerRef}
-          {...(popover && { tabIndex: 0, role: 'button', type: 'button' })}
+          ref={stepRef}
+          {...(popoverRender && { tabIndex: 0, role: 'button', type: 'button' })}
           {...(props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })}
         >
           {children}
-          {popover}
+          {popoverRender && popoverRender(stepRef)}
         </Component>
         {description && <div className={css(styles.progressStepperStepDescription)}>{description}</div>}
       </div>
@@ -104,7 +102,4 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   );
 };
 
-export const ProgressStep = React.forwardRef((props: ProgressStepProps, ref: React.Ref<HTMLSpanElement>) => (
-  <ProgressStepBase innerRef={ref} {...props} />
-));
 ProgressStep.displayName = 'ProgressStep';

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

@@ -87,7 +87,7 @@ describe('ProgressStep', () => {
   });
 
   test('renders help text styling', () => {
-    const view = render(<ProgressStep popover={<div></div>}>Title</ProgressStep>);
+    const view = render(<ProgressStep popoverRender={({ stepRef }) => (<div></div>)}>Title</ProgressStep>);
     expect(view.container).toMatchSnapshot();
   });
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -331,17 +331,13 @@ import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 
 ### With help popover
 
-To add a popover to a progress step, set the `popover` and `ref` properties on the `ProgressStep` component and the `reference` property on the `Popover` component.
+To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
 
 ```js
 import React from 'react';
 import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
 
 PopoverProgressStep = () => {
-  const firstStepRef = React.useRef();
-  const secondStepRef = React.useRef();
-  const thirdStepRef = React.useRef();
-
   return (
     <ProgressStepper>
       <ProgressStep
@@ -349,55 +345,52 @@ PopoverProgressStep = () => {
         id="popover-step1"
         titleId="popover-step1-title"
         aria-label="completed step with popover, step with success"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="First step help"
             headerContent={<div>First step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={firstStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={firstStepRef}
+           )}
       >
-        First Step
+        First step
       </ProgressStep>
       <ProgressStep
         variant="danger"
         id="popover-step2"
         titleId="popover-step2-title"
         aria-label="completed step with popover, step with danger"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="Second step help"
             headerContent={<div>Second step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={secondStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={secondStepRef}
+        )}
       >
-        Second Step
+        Second step
       </ProgressStep>
       <ProgressStep
         variant="info"
         id="popover-step3"
         titleId="popover-step3-title"
         aria-label="step with popover"
-        popover={
+        popoverRender={(stepRef) => (
           <Popover
             aria-label="Third step help"
             headerContent={<div>Third step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={thirdStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
+        )}
         isCurrent
-        ref={thirdStepRef}
       >
-        Third Step
+        Third step
       </ProgressStep>
       <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
         Fourth step

package/src/components/Switch/Switch.tsx

@@ -10,19 +10,21 @@ export interface SwitchProps
     OUIAProps {
   /** id for the label. */
   id?: string;
-  /** Additional classes added to the Switch */
+  /** Additional classes added to the switch */
   className?: string;
   /** Text value for the label when on */
   label?: React.ReactNode;
   /** Text value for the label when off */
   labelOff?: React.ReactNode;
-  /** Flag to show if the Switch is checked. */
+  /** Flag to show if the switch is checked. */
   isChecked?: boolean;
-  /** Flag to show if the Switch is disabled. */
+  /** Flag to show if the switch has a check icon. */
+  hasCheckIcon?: boolean;
+  /** Flag to show if the switch is disabled. */
   isDisabled?: boolean;
-  /** A callback for when the Switch selection changes. (isChecked, event) => {} */
+  /** A callback for when the switch selection changes. (isChecked, event) => {} */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Adds accessible text to the Switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
+  /** Adds accessible text to the switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
   'aria-label'?: string;
   /** Flag to reverse the layout of toggle and label (toggle on right). */
   isReversed?: boolean;
@@ -61,6 +63,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
       label,
       labelOff,
       isChecked,
+      hasCheckIcon,
       isDisabled,
       onChange,
       isReversed,
@@ -96,6 +99,11 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             >
               {label}
             </span>
+            {hasCheckIcon && (
+              <div className={css(styles.switchToggleIcon)} aria-hidden="true">
+                <CheckIcon noVerticalAlign />
+              </div>
+            )}
             <span
               className={css(styles.switchLabel, styles.modifiers.off)}
               id={isAriaLabelledBy ? `${this.id}-off` : null}

package/src/components/Switch/examples/Switch.md

@@ -7,7 +7,9 @@ ouia: true
 ---
 
 ## Examples
+
 ### Basic
+
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
@@ -39,6 +41,7 @@ class SimpleSwitch extends React.Component {
 ```
 
 ### Reversed Layout
+
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
@@ -71,6 +74,7 @@ class ReversedSwitch extends React.Component {
 ```
 
 ### Without label
+
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
@@ -95,13 +99,55 @@ class NoLabelSwitch extends React.Component {
 }
 ```
 
+### Checked with label
+
+```js
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+class CheckedWithLabelSwitch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: true
+    };
+    this.handleChange = isChecked => {
+      this.setState({ isChecked });
+    };
+  }
+
+  render() {
+    const { isChecked } = this.state;
+    return (
+      <Switch
+        label="Message when on"
+        labelOff="Message when off"
+        id="checked-with-label-switch-on"
+        aria-label="Message when on"
+        isChecked={isChecked}
+        hasCheckIcon
+        onChange={this.handleChange}
+      />
+    );
+  }
+}
+```
+
 ### Disabled
+
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Switch id="disabled-switch-on" aria-label="Message when on" label="Message when on" labelOff="Message when off" isChecked isDisabled />
+  <Switch
+    id="disabled-switch-on"
+    aria-label="Message when on"
+    label="Message when on"
+    labelOff="Message when off"
+    isChecked
+    isDisabled
+  />
   <br />
   <Switch
     id="disabled-switch-off"
@@ -115,21 +161,34 @@ import { Switch } from '@patternfly/react-core';
   <Switch id="disabled-no-label-switch-on" aria-label="Message when on" isChecked isDisabled />
   <br />
   <Switch id="disabled-no-label-switch-off" aria-label="Message when on" isChecked={false} isDisabled />
-</React.Fragment>
+</React.Fragment>;
 ```
 
 ### Uncontrolled
+
 ```js
 import React from 'react';
 import { Switch } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Switch id="uncontrolled-switch-on" aria-label="Message when on" label="Message when on" labelOff="Message when off" isChecked />
+  <Switch
+    id="uncontrolled-switch-on"
+    aria-label="Message when on"
+    label="Message when on"
+    labelOff="Message when off"
+    isChecked
+  />
   <br />
-  <Switch id="uncontrolled-switch-off" aria-label="Message when on" label="Message when on" labelOff="Message when off" isChecked={false} />
+  <Switch
+    id="uncontrolled-switch-off"
+    aria-label="Message when on"
+    label="Message when on"
+    labelOff="Message when off"
+    isChecked={false}
+  />
   <br />
   <Switch id="uncontrolled-no-label-switch-on" aria-label="Message when on" isChecked />
   <br />
   <Switch id="uncontrolled-no-label-switch-off" aria-label="Message when on" isChecked={false} />
-</React.Fragment>
+</React.Fragment>;
 ```

package/src/components/Toolbar/examples/Toolbar.md

@@ -20,7 +20,7 @@ Toolbar items are individual components that can be placed inside of a toolbar.
 ```js
 import React from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
-import { Button, ButtonVariant, InputGroup, SearchInput } from '@patternfly/react-core';
+import { Button, SearchInput } from '@patternfly/react-core';
 
 class ToolbarItems extends React.Component {
   constructor(props) {
@@ -133,7 +133,7 @@ class ToolbarSpacers extends React.Component {
 
 ```js
 import React from 'react';
-import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core';
 
 class ToolbarWidths extends React.Component {
@@ -237,16 +237,7 @@ class ToolbarSpacers extends React.Component {
 
 ```js
 import React from 'react';
-import {
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  Button,
-  ButtonVariant,
-  InputGroup,
-  TextInput,
-  Checkbox
-} from '@patternfly/react-core';
+import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 const ToolbarItems = () => {
@@ -261,12 +252,7 @@ const ToolbarItems = () => {
         <Toolbar id="toolbar-spacers" inset={{ default: 'insetNone' }} isSticky={isSticky}>
           <ToolbarContent>
             <ToolbarItem>
-              <InputGroup>
-                <TextInput name="textInput1" id="textInput1" type="search" aria-label="search input example" />
-                <Button variant={ButtonVariant.control} aria-label="search button for search input">
-                  <SearchIcon />
-                </Button>
-              </InputGroup>
+              <SearchInput aria-label="search input example" />
             </ToolbarItem>
             <ToolbarItem>
               <Checkbox
@@ -500,15 +486,7 @@ A toggle group can be used when you want to collapse a set of items into an over
 ```js
 import React from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, ToolbarToggleGroup, ToolbarGroup } from '@patternfly/react-core';
-import {
-  Button,
-  ButtonVariant,
-  InputGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-  SearchInput
-} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 class ToolbarComponentMangedToggleGroup extends React.Component {
@@ -659,18 +637,10 @@ If the consumer would prefer to manage the expanded state of the toggle group fo
 ```js
 import React from 'react';
 import { Toolbar, ToolbarItem, ToolbarContent, ToolbarToggleGroup, ToolbarGroup } from '@patternfly/react-core';
-import {
-  Button,
-  ButtonVariant,
-  InputGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-  SearchInput
-} from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
-class ToolbarConsumerMangedToggleGroup extends React.Component {
+class ToolbarConsumerManagedToggleGroup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -835,8 +805,6 @@ import {
 } from '@patternfly/react-core';
 import {
   Button,
-  ButtonVariant,
-  InputGroup,
   Select,
   SelectOption,
   SelectVariant,

package/src/demos/Tabs.md

@@ -445,7 +445,12 @@ TabsOpenWithSecondaryTabsDemo = () => {
 
 ### Nested tabs
 
-```js isFullscreen file="./Tabs/NestedTabsDemo.js"
+```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+```
+
+### Nested, unindented tabs
+
+```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
 ```
 
 ### Tables and tabs

package/src/demos/examples/DashboardWrapper.js

@@ -6,8 +6,11 @@ import {
   NavItem,
   NavList,
   Page,
+  PageSection,
   PageSidebar,
-  SkipToContent
+  SkipToContent,
+  Text,
+  TextContent
 } from '@patternfly/react-core';
 import DashboardHeader from './DashboardHeader';
 
@@ -21,6 +24,15 @@ export const DashboardBreadcrumb = (
     </BreadcrumbItem>
   </Breadcrumb>
 );
+
+export const PageTemplateTitle = (
+  <PageSection variant="light">
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
 export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
@@ -45,7 +57,8 @@ export default class DashboardWrapper extends React.Component {
       sidebar,
       sidebarNavOpen,
       onPageResize,
-      hasNoBreadcrumb
+      hasNoBreadcrumb,
+      hasPageTemplateTitle
     } = this.props;
 
     let renderedBreadcrumb;
@@ -92,6 +105,7 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         onPageResize={onPageResize}
       >
+        {hasPageTemplateTitle && PageTemplateTitle}
         {children}
       </Page>
     );

package/src/demos/examples/Tabs/GrayTabs.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   Tabs,
   Tab,
   TabContent,
@@ -16,7 +15,7 @@ import {
   CardBody,
   CardHeader
 } from '@patternfly/react-core';
-import DashboardWrapper from '../../examples/DashboardWrapper';
+import DashboardWrapper from '../DashboardWrapper';
 
 export const GrayTabsDemo: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
@@ -126,12 +125,7 @@ export const GrayTabsDemo: React.FunctionComponent = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="2xl">
-          Overview
-        </Title>
-      </PageSection>
+    <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited>
         <Tabs
           activeKey={activeTabKey}

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -81,7 +81,7 @@ export const ModalTabs: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
+      <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
         <PageSection variant={PageSectionVariants.light}>
           <TextContent>
             <Text component="h1">Projects</Text>

package/src/demos/{Tabs/NestedTabsDemo.js → examples/Tabs/NestedTabs.tsx}

@@ -6,7 +6,6 @@ import {
   Grid,
   GridItem,
   PageSection,
-  PageSectionVariants,
   Tabs,
   Tab,
   TabContent,
@@ -16,17 +15,17 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '../examples/DashboardWrapper';
+import DashboardWrapper from '../DashboardWrapper';
 
-export const NestedTabsDemo = () => {
+export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
   const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
 
   // Toggle currently active tab
-  const handleTabClick = (_, tabIndex) => setActiveTabKey(tabIndex);
+  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
 
   // Toggle currently active nested tab
-  const handleNestedTabClick = (_, tabIndex) => setActiveNestedTabKey(tabIndex);
+  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);
 
   const tabContent = (
     <Grid hasGutter>
@@ -41,7 +40,7 @@ export const NestedTabsDemo = () => {
                 <Tabs
                   activeKey={activeNestedTabKey}
                   isSecondary
-                  onSelect={handleNestedTabClick}
+                  onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
                   id="nested-tabs-example-nested-tabs-list"
                 >
                   <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
@@ -126,14 +125,14 @@ export const NestedTabsDemo = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="2xl">
-          Overview
-        </Title>
-      </PageSection>
+    <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited>
-        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="nested-tabs-example-tabs-list">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
+          usePageInsets
+          id="nested-tabs-example-tabs-list"
+        >
           <Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
         </Tabs>