@patternfly/react-core 4.203.1 → 4.203.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.203.1",
+  "version": "4.203.2",
   "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.54.2",
+    "@patternfly/react-styles": "^4.53.2",
+    "@patternfly/react-tokens": "^4.55.2",
     "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": "ca5c716646e391e92b954b9cb3bbbe52b16834b7"
 }

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/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,