@patternfly/react-core 5.0.0-alpha.104 → 5.0.0-alpha.106

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

@@ -12,34 +12,42 @@ exports[`With popover opened 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value=""
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Date picker"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            type="button"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
     <div
@@ -95,61 +103,69 @@ exports[`With popover opened 1`] = `
                 class="pf-v5-c-input-group"
               >
                 <div
-                  class="pf-v5-c-calendar-month__header-month"
+                  class="pf-v5-c-input-group__item pf-m-fill"
                 >
-                  <span
-                    hidden=""
-                    id="unique_id_mock"
+                  <div
+                    class="pf-v5-c-calendar-month__header-month"
                   >
-                    Month
-                  </span>
-                  <div>
-                    <button
-                      aria-expanded="false"
-                      class="pf-v5-c-menu-toggle"
-                      style="width: 140px;"
-                      type="button"
+                    <span
+                      hidden=""
+                      id="unique_id_mock"
                     >
-                      <span
-                        class="pf-v5-c-menu-toggle__text"
-                      >
-                        December
-                      </span>
-                      <span
-                        class="pf-v5-c-menu-toggle__controls"
+                      Month
+                    </span>
+                    <div>
+                      <button
+                        aria-expanded="false"
+                        class="pf-v5-c-menu-toggle"
+                        style="width: 140px;"
+                        type="button"
                       >
                         <span
-                          class="pf-v5-c-menu-toggle__toggle-icon"
+                          class="pf-v5-c-menu-toggle__text"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="pf-v5-svg"
-                            fill="currentColor"
-                            role="img"
-                            viewBox="0 0 320 512"
+                          December
+                        </span>
+                        <span
+                          class="pf-v5-c-menu-toggle__controls"
+                        >
+                          <span
+                            class="pf-v5-c-menu-toggle__toggle-icon"
                           >
-                            <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>
+                            <svg
+                              aria-hidden="true"
+                              class="pf-v5-svg"
+                              fill="currentColor"
+                              role="img"
+                              viewBox="0 0 320 512"
+                            >
+                              <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>
                         </span>
-                      </span>
-                    </button>
+                      </button>
+                    </div>
                   </div>
                 </div>
                 <div
-                  class="pf-v5-c-calendar-month__header-year"
+                  class="pf-v5-c-input-group__item"
                 >
-                  <input
-                    aria-invalid="false"
-                    aria-label="Select year"
-                    class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    type="number"
-                    value="1969"
-                  />
+                  <div
+                    class="pf-v5-c-calendar-month__header-year"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="Select year"
+                      class="pf-v5-c-form-control"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      type="number"
+                      value="1969"
+                    />
+                  </div>
                 </div>
               </div>
               <div
@@ -755,36 +771,44 @@ exports[`disabled date picker 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="disabled date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value="2020-11-20"
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          disabled=""
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <input
+            aria-invalid="false"
+            aria-label="disabled date picker"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            disabled=""
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value="2020-11-20"
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            disabled=""
+            type="button"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>

package/src/components/FileUpload/FileUploadField.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 import { css } from '@patternfly/react-styles';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Button, ButtonVariant } from '../Button';
 import { TextArea, TextAreResizeOrientation } from '../TextArea';
@@ -130,31 +130,37 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
     >
       <div className={styles.fileUploadFileSelect}>
         <InputGroup>
-          <TextInput
-            isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
-            isDisabled={isDisabled}
-            id={`${id}-filename`}
-            name={`${id}-filename`}
-            aria-label={filenameAriaLabel}
-            placeholder={filenamePlaceholder}
-            aria-describedby={`${id}-browse-button`}
-            value={filename}
-          />
-          <Button
-            id={`${id}-browse-button`}
-            variant={ButtonVariant.control}
-            onClick={onBrowseButtonClick}
-            isDisabled={isDisabled}
-          >
-            {browseButtonText}
-          </Button>
-          <Button
-            variant={ButtonVariant.control}
-            isDisabled={isDisabled || isClearButtonDisabled}
-            onClick={onClearButtonClick}
-          >
-            {clearButtonText}
-          </Button>
+          <InputGroupItem isFill>
+            <TextInput
+              isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              isDisabled={isDisabled}
+              id={`${id}-filename`}
+              name={`${id}-filename`}
+              aria-label={filenameAriaLabel}
+              placeholder={filenamePlaceholder}
+              aria-describedby={`${id}-browse-button`}
+              value={filename}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              id={`${id}-browse-button`}
+              variant={ButtonVariant.control}
+              onClick={onBrowseButtonClick}
+              isDisabled={isDisabled}
+            >
+              {browseButtonText}
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              variant={ButtonVariant.control}
+              isDisabled={isDisabled || isClearButtonDisabled}
+              onClick={onClearButtonClick}
+            >
+              {clearButtonText}
+            </Button>
+          </InputGroupItem>
         </InputGroup>
       </div>
       <div className={styles.fileUploadFileDetails}>

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

@@ -12,43 +12,55 @@ exports[`simple fileupload 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-describedby="simple-text-file-browse-button"
-          aria-invalid="false"
-          aria-label="Drag a file here or browse to upload"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="simple-text-file-filename"
-          name="simple-text-file-filename"
-          placeholder="Drag a file here or browse to upload"
-          readonly=""
-          type="text"
-          value=""
-        />
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="simple-text-file-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="true"
-          class="pf-v5-c-button pf-m-control pf-m-disabled"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          disabled=""
-          type="button"
+          <input
+            aria-describedby="simple-text-file-browse-button"
+            aria-invalid="false"
+            aria-label="Drag a file here or browse to upload"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="simple-text-file-filename"
+            name="simple-text-file-filename"
+            placeholder="Drag a file here or browse to upload"
+            readonly=""
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            id="simple-text-file-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="true"
+            class="pf-v5-c-button pf-m-control pf-m-disabled"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            disabled=""
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <div

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -11,42 +11,54 @@ exports[`simple fileuploadfield 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-describedby="custom-file-upload-browse-button"
-          aria-invalid="false"
-          aria-label="Do something custom with this!"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          id="custom-file-upload-filename"
-          name="custom-file-upload-filename"
-          placeholder="Do something custom with this!"
-          readonly=""
-          type="text"
-          value=""
-        />
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          id="custom-file-upload-browse-button"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          Browse...
-        </button>
-        <button
-          aria-disabled="false"
-          class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+          <input
+            aria-describedby="custom-file-upload-browse-button"
+            aria-invalid="false"
+            aria-label="Do something custom with this!"
+            class="pf-v5-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            id="custom-file-upload-filename"
+            name="custom-file-upload-filename"
+            placeholder="Do something custom with this!"
+            readonly=""
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
         >
-          Clear
-        </button>
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            id="custom-file-upload-browse-button"
+            type="button"
+          >
+            Browse...
+          </button>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-control"
+            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            Clear
+          </button>
+        </div>
       </div>
     </div>
     <div

package/src/components/InputGroup/InputGroup.tsx

@@ -20,25 +20,61 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
   innerRef,
   ...props
 }: InputGroupProps) => {
-  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
-  const idItem = React.Children.toArray(children).find(
-    (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
-  ) as React.ReactElement<{ id: string }>;
-
+  const getIdItem = () => {
+    const getChildId = (_children: any) =>
+      React.Children.toArray(_children).find(
+        (_child: any) => !formCtrls.includes(_child?.type?.displayName) && _child?.props?.id
+      );
+    let childId = getChildId(children);
+    if (childId) {
+      return childId;
+    }
+    React.Children.toArray(children).find((child: any) => {
+      const _childId = getChildId(child.props.children);
+      if (_childId) {
+        childId = _childId;
+        return true;
+      }
+    });
+    return childId;
+  };
+  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+  const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
+  const childrenWithId = React.Children.map(children, (child: any) => {
+    if (child?.type.displayName === 'InputGroupItem') {
+      const newChildren = React.Children.map(child.props.children, _child => {
+        if (!_child.props) {
+          return _child;
+        }
+        if (_child.props['aria-describedby']) {
+          return _child;
+        }
+        if (!formCtrls.includes(_child.type.displayName)) {
+          return _child;
+        }
+        return React.cloneElement(_child, {
+          'aria-describedby': _child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
+        });
+      });
+      return React.cloneElement(child, {}, newChildren);
+    }
+
+    if (child?.props['aria-describedby']) {
+      return child;
+    }
+    if (!formCtrls.includes(child?.type.displayName)) {
+      return child;
+    }
+    return React.cloneElement(child, {
+      'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem?.props?.id
+    });
+  });
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
-      {idItem
-        ? React.Children.map(children, (child: any) =>
-            !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
-              ? child
-              : React.cloneElement(child, {
-                  'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
-                })
-          )
-        : children}
+      {idItem ? childrenWithId : children}
     </div>
   );
 };

package/src/components/InputGroup/InputGroupItem.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/InputGroup/input-group';
+import { css } from '@patternfly/react-styles';
+
+export interface InputGroupItemProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the input group item. */
+  className?: string;
+  /** Content rendered inside the input group item. */
+  children: React.ReactNode;
+  /** Enables box styling to the input group item */
+  isBox?: boolean;
+  /** Flag to indicate if the input group item is plain. */
+  isPlain?: boolean;
+  /** Flag to indicate if the input group item should fill the available horizontal space */
+  isFill?: boolean;
+  /** Flag to indicate if the input group item is disabled. */
+  isDisabled?: boolean;
+
+}
+
+export const InputGroupItem: React.FunctionComponent<InputGroupItemProps> = ({
+  className = '',
+  children,
+  isFill = false,
+  isBox = false,
+  isPlain,
+  isDisabled,
+  ...props
+}: InputGroupItemProps) => (
+  <div
+    className={css(
+      styles.inputGroupItem,
+      isFill && styles.modifiers.fill,
+      isBox && styles.modifiers.box,
+      isPlain && styles.modifiers.plain,
+      isDisabled && styles.modifiers.disabled,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+InputGroupItem.displayName = 'InputGroupItem';