@patternfly/react-core 4.203.0 → 4.204.0

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/TimePicker/__tests__/TimePicker.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 

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/components/Dropdown/__tests__/Generated/InternalDropdownItem.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { InternalDropdownItem } from '../../InternalDropdownItem';
-import { DropdownContext } from '../../dropdownConstants';
-
-describe('InternalDropdownItem', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <DropdownContext.Provider value={{}}>
-        {' '}
-        <InternalDropdownItem
-          children={<div>ReactNode</div>}
-          className={"''"}
-          listItemClassName={'string'}
-          component={'a'}
-          role={"'none'"}
-          isDisabled={false}
-          isPlainText={false}
-          isHovered={false}
-          href={'string'}
-          tooltip={<div>ReactNode</div>}
-          tooltipProps={undefined}
-          index={-1}
-          context={{
-            keyHandler: () => {},
-            sendRef: () => {}
-          }}
-          onClick={(event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => undefined as any}
-          id={'string'}
-          componentID={'string'}
-          additionalChild={<div>ReactNode</div>}
-          customChild={<div>ReactNode</div>}
-          enterTriggersArrowDown={false}
-          icon={<div>ReactNode</div>}
-        />
-      </DropdownContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Dropdown/__tests__/Generated/__snapshots__/InternalDropdownItem.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InternalDropdownItem should match snapshot 1`] = `
-<div>
-   
-  <div>
-    ReactNode
-  </div>
-</div>
-`;

package/src/components/Select/__tests__/Generated/SelectGroup.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { SelectGroup } from '../../SelectGroup';
-import { SelectContext } from '../..';
-
-describe('SelectGroup', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <SelectContext.Provider
-        value={{
-          onSelect: jest.fn(),
-          onClose: jest.fn(),
-          onFavorite: jest.fn(),
-          variant: 'default',
-          inputIdPrefix: 'something'
-        }}
-      >
-        <SelectGroup children={[]} className="" label="" titleId="" />
-      </SelectContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Select/__tests__/Generated/SelectMenu.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { SelectMenu } from '../../SelectMenu';
-import { SelectContext } from '../..';
-
-describe('SelectMenu', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <SelectContext.Provider
-        value={{
-          onSelect: jest.fn(),
-          onClose: jest.fn(),
-          onFavorite: jest.fn(),
-          variant: 'default',
-          inputIdPrefix: 'something'
-        }}
-      >
-        <SelectMenu />
-      </SelectContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Select/__tests__/Generated/__snapshots__/SelectGroup.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectGroup should match snapshot 1`] = `
-<div>
-  <div
-    class="pf-c-select__menu-group"
-  >
-    <div
-      aria-hidden="true"
-      class="pf-c-select__menu-group-title"
-      id=""
-    />
-    <ul
-      role="listbox"
-    />
-  </div>
-</div>
-`;

package/src/components/Select/__tests__/Generated/__snapshots__/SelectMenu.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectMenu should match snapshot 1`] = `
-<div>
-  <ul
-    class="pf-c-select__menu"
-    role="listbox"
-  />
-</div>
-`;

package/src/components/Toolbar/__tests__/Generated/ToolbarToggleGroup.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { ToolbarContentContext, ToolbarToggleGroup } from '../..';
-import { PageContext } from '../../../Page/Page';
-
-describe('ToolbarToggleGroup', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <PageContext.Provider
-        value={{ isManagedSidebar: false, onNavToggle: jest.fn(), isNavOpen: true, width: 1, getBreakpoint: jest.fn() }}
-      >
-        <ToolbarContentContext.Provider
-          value={{
-            expandableContentId: 'test',
-            expandableContentRef: { current: ((<></>) as unknown) as HTMLDivElement },
-            chipContainerRef: { current: ((<></>) as unknown) as HTMLDivElement }
-          }}
-        >
-          <ToolbarToggleGroup breakpoint="xl" toggleIcon={<div>ReactNode</div>} />
-        </ToolbarContentContext.Provider>
-      </PageContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarToggleGroup.test.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolbarToggleGroup should match snapshot 1`] = `
-<div>
-  <div
-    class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
-  >
-    <div
-      class="pf-c-toolbar__toggle"
-    >
-      <button
-        aria-controls="test"
-        aria-disabled="false"
-        aria-haspopup="false"
-        aria-label="Show Filters"
-        class="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <div>
-          ReactNode
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;