@patternfly/react-core 4.202.37 → 4.203.2

package/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -30,6 +30,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
@@ -242,6 +243,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
@@ -454,6 +456,7 @@ exports[`Pagination component render custom start end 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
@@ -835,6 +838,7 @@ exports[`Pagination component render last page 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
@@ -1047,6 +1051,7 @@ exports[`Pagination component render limited number of pages 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
@@ -1250,6 +1255,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
@@ -1450,6 +1456,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
@@ -1618,6 +1625,215 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 </DocumentFragment>
 `;
 
+exports[`Pagination component render should render correctly button variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-pagination"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-17"
+    data-ouia-component-type="PF4/Pagination"
+    data-ouia-safe="true"
+    id="pagination-options-menu-18"
+    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+  >
+    <div
+      class="pf-c-pagination__total-items"
+    >
+      <b>
+        -9 - 10
+      </b>
+       of 
+      <b>
+        20
+      </b>
+       
+    </div>
+    <div
+      class="pf-c-options-menu"
+      data-ouia-component-type="PF4/PaginationOptionsMenu"
+      data-ouia-safe="true"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label=""
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-17"
+        type="button"
+      >
+        <span
+          class="pf-c-options-menu__toggle-text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-c-options-menu__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <nav
+      aria-label="Pagination"
+      class="pf-c-pagination__nav"
+    >
+      <div
+        class="pf-c-pagination__nav-control pf-m-first"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to first page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="first"
+          data-ouia-component-id="OUIA-Generated-Button-plain-71"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to previous page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="previous"
+          data-ouia-component-id="OUIA-Generated-Button-plain-72"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-page-select"
+      >
+        <input
+          aria-label="Current page"
+          class="pf-c-form-control"
+          max="2"
+          min="1"
+          type="number"
+          value="1"
+        />
+        <span
+          aria-hidden="true"
+        >
+          of 2
+        </span>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to next page"
+          class="pf-c-button pf-m-plain"
+          data-action="next"
+          data-ouia-component-id="OUIA-Generated-Button-plain-73"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control pf-m-last"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to last page"
+          class="pf-c-button pf-m-plain"
+          data-action="last"
+          data-ouia-component-id="OUIA-Generated-Button-plain-74"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+    </nav>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
@@ -1662,6 +1878,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
@@ -1800,6 +2017,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
@@ -2016,6 +2234,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
@@ -2228,6 +2447,7 @@ exports[`Pagination component render should render correctly top 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
@@ -2440,6 +2660,7 @@ exports[`Pagination component render titles 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
@@ -2652,6 +2873,7 @@ exports[`Pagination component render up drop direction 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
@@ -2864,6 +3086,7 @@ exports[`Pagination component render zero results 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"

package/src/components/Pagination/examples/Pagination.md

@@ -38,6 +38,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -77,6 +78,7 @@ class PaginationBottom extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={333}
         widgetId="pagination-options-menu-bottom"
         perPage={this.state.perPage}
@@ -89,6 +91,7 @@ class PaginationBottom extends React.Component {
   }
 }
 ```
+
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
@@ -106,6 +109,7 @@ PaginationIndeterminate = () => {
 
   return (
     <Pagination
+      perPageComponent="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>
@@ -122,7 +126,7 @@ PaginationIndeterminate = () => {
       onPerPageSelect={onPerPageSelect}
     />
   );
-}
+};
 ```
 
 ### Disabled
@@ -155,6 +159,7 @@ class PaginationDisabled extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -198,6 +203,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={0}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -240,6 +246,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={15}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -282,6 +289,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -335,6 +343,7 @@ class PaginationSticky extends React.Component {
         {this.state.isTopSticky && (
           <React.Fragment>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
@@ -368,6 +377,7 @@ class PaginationSticky extends React.Component {
               ))}
             </Gallery>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}

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