@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

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

@@ -20,12 +20,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel', () => {
+test('Renders with the class pf-v5-c-panel', () => {
   render(<Panel>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel');
 });
 
-test('Renders with only the class pf-c-panel by default', () => {
+test('Renders with only the class pf-v5-c-panel by default', () => {
   render(<Panel>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel', { exact: true });
 });

package/src/components/Panel/__tests__/PanelFooter.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__footer', () => {
+test('Renders with the class pf-v5-c-panel__footer', () => {
   render(<PanelFooter>Test</PanelFooter>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer');
 });
 
-test('Renders with only the class pf-c-panel__footer by default', () => {
+test('Renders with only the class pf-v5-c-panel__footer by default', () => {
   render(<PanelFooter>Test</PanelFooter>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__footer', { exact: true });
 });

package/src/components/Panel/__tests__/PanelHeader.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__header', () => {
+test('Renders with the class pf-v5-c-panel__header', () => {
   render(<PanelHeader>Test</PanelHeader>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header');
 });
 
-test('Renders with only the class pf-c-panel__header by default', () => {
+test('Renders with only the class pf-v5-c-panel__header by default', () => {
   render(<PanelHeader>Test</PanelHeader>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__header', { exact: true });
 });

package/src/components/Panel/__tests__/PanelMain.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__main', () => {
+test('Renders with the class pf-v5-c-panel__main', () => {
   render(<PanelMain>Test</PanelMain>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main');
 });
 
-test('Renders with only the class pf-c-panel__main by default', () => {
+test('Renders with only the class pf-v5-c-panel__main by default', () => {
   render(<PanelMain>Test</PanelMain>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main', { exact: true });
 });

package/src/components/Panel/__tests__/PanelMainBody.test.tsx

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with the class pf-c-panel__main-body', () => {
+test('Renders with the class pf-v5-c-panel__main-body', () => {
   render(<PanelMainBody>Test</PanelMainBody>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body');
 });
 
-test('Renders with only the class pf-c-panel__main-body by default', () => {
+test('Renders with only the class pf-v5-c-panel__main-body by default', () => {
   render(<PanelMainBody>Test</PanelMainBody>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-panel__main-body', { exact: true });
 });

package/src/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: Panel
 section: components
-cssPrefix: pf-c-panel
+cssPrefix: pf-v5-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 ---
 

package/src/components/Popover/Popover.tsx

@@ -233,7 +233,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   alertSeverityVariant,
   alertSeverityScreenReaderText,
   footerContent = null,
-  appendTo = 'inline',
+  appendTo = () => document.body,
   hideOnOutsideClick = true,
   onHide = (): void => null,
   onHidden = (): void => null,

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
       aria-label="string"
       class="pf-v5-c-button pf-m-plain"
       data-ouia-component-id="OUIA-Generated-Button-plain-1"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe="true"
       style="pointer-events: auto;"
       type="button"
@@ -19,8 +19,10 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 352 512"
+        width="1em"
       >
         <path
           d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"

package/src/components/Popover/examples/Popover.md

@@ -1,7 +1,7 @@
 ---
 id: Popover
 section: components
-cssPrefix: pf-c-popover
+cssPrefix: pf-v5-c-popover
 propComponents: ['Popover']
 ---
 
@@ -14,10 +14,7 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 ## Examples
 
-By default, the `appendTo` prop of the popover will append it to the parent element. However, in some cases, the popover might be too big for the parent and not fully visible. To solve this issue, users have two options:
-
-1. Add the prop `appendTo={() => document.body}` to append the popover to the document body instead of the parent element.
-2. Increase the z-index of the parent element to be higher than the z-index of the element that is hiding the popover.
+By default, the `appendTo` prop of the popover will append to the document body in order to avoid the popover content not being fully visible. Another option is to increase the z-index of the element the popover is appended to to be higher than the z-index of the element that is hiding the popover.
 
 ### Basic
 

package/src/components/Progress/Progress.tsx

@@ -42,7 +42,7 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/ProgressContainer.tsx

@@ -54,7 +54,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap

@@ -25,8 +25,10 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
         aria-hidden="true"
         class="pf-v5-svg"
         fill="currentColor"
+        height="1em"
         role="img"
         viewBox="0 0 512 512"
+        width="1em"
       >
         <path
           d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -17,7 +17,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+test('Renders with class pf-v5-c-progress__helper-text on the div containing the helper text component', () => {
   render(<ProgressHelperText>Test</ProgressHelperText>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress__helper-text');

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

@@ -292,8 +292,10 @@ exports[`Progress variant danger 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -343,8 +345,10 @@ exports[`Progress variant success 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 512 512"
+          width="1em"
         >
           <path
             d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
@@ -394,8 +398,10 @@ exports[`Progress variant warning 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           viewBox="0 0 576 512"
+          width="1em"
         >
           <path
             d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"

package/src/components/Progress/examples/Progress.md

@@ -1,7 +1,7 @@
 ---
 id: Progress
 section: components
-cssPrefix: pf-c-progress
+cssPrefix: pf-v5-c-progress
 propComponents: ['Progress']
 ---
 
@@ -76,5 +76,5 @@ propComponents: ['Progress']
 ```
 
 ### Helper text
-```ts file="./ProgressHelperText.tsx" isBeta
+```ts file="./ProgressHelperText.tsx"
 ```

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

@@ -23,7 +23,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class pf-c-progress-stepper__step on the containing li element', () => {
+test('Renders with class pf-v5-c-progress-stepper__step on the containing li element', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByRole('listitem')).toHaveClass('pf-v5-c-progress-stepper__step');
 });
@@ -77,7 +77,7 @@ test('Renders the element passed via the icon prop', () => {
   expect(screen.getByText('Custom Icon')).toBeVisible();
 });
 
-test('Renders the icon element inside span element with class pf-c-progress-stepper__step-icon', () => {
+test('Renders the icon element inside span element with class pf-v5-c-progress-stepper__step-icon', () => {
   render(<ProgressStep icon="Custom Icon">Test</ProgressStep>);
   expect(screen.getByText('Custom Icon')).toHaveClass('pf-v5-c-progress-stepper__step-icon');
 });
@@ -112,12 +112,12 @@ test('Renders the element passed via the description prop', () => {
   expect(screen.getByRole('button', { name: 'Description' })).toBeVisible();
 });
 
-test('Renders the description element inside div element with class pf-c-progress-stepper__step-description', () => {
+test('Renders the description element inside div element with class pf-v5-c-progress-stepper__step-description', () => {
   render(<ProgressStep description="Description">Test</ProgressStep>);
   expect(screen.getByText('Description')).toHaveClass('pf-v5-c-progress-stepper__step-description');
 });
 
-test('Renders children inside class pf-c-progress-stepper__step-title', () => {
+test('Renders children inside class pf-v5-c-progress-stepper__step-title', () => {
   render(<ProgressStep>Test</ProgressStep>);
   expect(screen.getByText('Test')).toHaveClass('pf-v5-c-progress-stepper__step-title');
 });

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

@@ -16,12 +16,12 @@ test('Renders children', () => {
   expect(screen.getByRole('list')).toBeVisible();
 });
 
-test('Renders with only class name pf-c-progress-stepper by default', () => {
+test('Renders with only class name pf-v5-c-progress-stepper by default', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper', { exact: true });
 });
 
-test('Renders with class name pf-c-progress-stepper', () => {
+test('Renders with class name pf-v5-c-progress-stepper', () => {
   render(<ProgressStepper>Test</ProgressStepper>);
   expect(screen.getByRole('list')).toHaveClass('pf-v5-c-progress-stepper');
 });

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

@@ -1,9 +1,8 @@
 ---
 id: Progress stepper
 section: components
-cssPrefix: pf-c-progress-stepper
+cssPrefix: pf-v5-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
-beta: true
 ---
 
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';

package/src/components/Radio/Radio.tsx

@@ -7,8 +7,12 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
     OUIAProps {
-  /** Additional classes added to the radio. */
+  /** Additional classes added to the radio wrapper.  This will be a div element if
+   * isLabelWrapped is true, otherwise this will be a label element.
+   */
   className?: string;
+  /** Additional classed added to the radio input */
+  inputClassName?: string;
   /** Id of the radio. */
   id: string;
   /** Flag to show if the radio label is wrapped on small screen. */
@@ -70,6 +74,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
       'aria-label': ariaLabel,
       checked,
       className,
+      inputClassName,
       defaultChecked,
       isLabelWrapped,
       isLabelBeforeButton,
@@ -93,7 +98,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
     const inputRendered = (
       <input
         {...props}
-        className={css(styles.radioInput)}
+        className={css(styles.radioInput, inputClassName)}
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}

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

@@ -11,7 +11,7 @@ exports[`Radio controlled 1`] = `
       checked=""
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-1"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -31,7 +31,7 @@ exports[`Radio isDisabled 1`] = `
       aria-label="check"
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-3"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       disabled=""
       id="check"
@@ -57,7 +57,7 @@ exports[`Radio isLabelBeforeButton 1`] = `
       aria-invalid="false"
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-4"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -77,7 +77,7 @@ exports[`Radio isLabelWrapped 1`] = `
       aria-invalid="false"
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-5"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -102,7 +102,7 @@ exports[`Radio label is function 1`] = `
       checked=""
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-7"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -130,7 +130,7 @@ exports[`Radio label is node 1`] = `
       checked=""
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-8"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -158,7 +158,7 @@ exports[`Radio label is string 1`] = `
       checked=""
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-6"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -185,7 +185,7 @@ exports[`Radio passing HTML attribute 1`] = `
       checked=""
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-10"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -211,7 +211,7 @@ exports[`Radio passing class 1`] = `
       checked=""
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-9"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"
@@ -237,7 +237,7 @@ exports[`Radio uncontrolled 1`] = `
       aria-label="check"
       class="pf-v5-c-radio__input"
       data-ouia-component-id="OUIA-Generated-Radio-2"
-      data-ouia-component-type="PF4/Radio"
+      data-ouia-component-type="PF5/Radio"
       data-ouia-safe="true"
       id="check"
       name="check"

package/src/components/Radio/examples/Radio.md

@@ -2,7 +2,7 @@
 id: Radio
 section: components
 subsection: forms
-cssPrefix: pf-c-radio
+cssPrefix: pf-v5-c-radio
 propComponents: ['Radio']
 ouia: true
 ---

package/src/components/SearchInput/SearchInput.tsx

@@ -10,7 +10,7 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
@@ -344,8 +344,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
     <InputGroup {...searchInputProps}>
-      {buildTextInputGroup()}
-      {expandableToggle}
+      <InputGroupItem isFill>{buildTextInputGroup()} </InputGroupItem>
+      <InputGroupItem isPlain>{expandableToggle}</InputGroupItem>
     </InputGroup>
   );
 
@@ -359,31 +359,35 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup ref={triggerRef} {...searchInputProps}>
-      {buildTextInputGroup()}
+      <InputGroupItem isFill>{buildTextInputGroup()}</InputGroupItem>
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
-        <Button
-          className={isSearchMenuOpen && 'pf-m-expanded'}
-          variant={ButtonVariant.control}
-          aria-label={openMenuButtonAriaLabel}
-          onClick={onToggle}
-          isDisabled={isDisabled}
-          aria-expanded={isSearchMenuOpen}
-        >
-          <CaretDownIcon />
-        </Button>
+        <InputGroupItem isPlain>
+          <Button
+            className={isSearchMenuOpen && 'pf-m-expanded'}
+            variant={ButtonVariant.control}
+            aria-label={openMenuButtonAriaLabel}
+            onClick={onToggle}
+            isDisabled={isDisabled}
+            aria-expanded={isSearchMenuOpen}
+          >
+            <CaretDownIcon />
+          </Button>
+        </InputGroupItem>
       )}
       {!!onSearch && (
-        <Button
-          type="submit"
-          variant={ButtonVariant.control}
-          aria-label={submitSearchButtonLabel}
-          onClick={onSearchHandler}
-          isDisabled={isDisabled}
-        >
-          <ArrowRightIcon />
-        </Button>
+        <InputGroupItem isPlain>
+          <Button
+            type="submit"
+            variant={ButtonVariant.control}
+            aria-label={submitSearchButtonLabel}
+            onClick={onSearchHandler}
+            isDisabled={isDisabled}
+          >
+            <ArrowRightIcon />
+          </Button>
+        </InputGroupItem>
       )}
-      {expandableInput && expandableToggle}
+      {expandableInput && <InputGroupItem>{expandableToggle}</InputGroupItem>}
     </InputGroup>
   );
 
@@ -394,7 +398,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   };
 
   if (!!expandableInput && !isExpanded) {
-    return <InputGroup {...searchInputProps}>{expandableToggle}</InputGroup>;
+    return <InputGroup {...searchInputProps}><InputGroupItem>{expandableToggle}</InputGroupItem></InputGroup>;
   }
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {