@patternfly/react-core 5.0.0-alpha.14 → 5.0.0-alpha.16

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

@@ -6,56 +6,19 @@ exports[`SearchInput advanced search 1`] = `
     class=""
   >
     <div
-      style="display: contents;"
+      class="pf-c-input-group"
     >
       <div
-        class="pf-c-input-group"
+        class="pf-c-text-input-group"
       >
         <div
-          class="pf-c-text-input-group"
+          class="pf-c-text-input-group__main pf-m-icon"
         >
-          <div
-            class="pf-c-text-input-group__main pf-m-icon"
+          <span
+            class="pf-c-text-input-group__text"
           >
             <span
-              class="pf-c-text-input-group__text"
-            >
-              <span
-                class="pf-c-text-input-group__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-              </span>
-              <input
-                aria-label="Search input"
-                class="pf-c-text-input-group__text-input"
-                type="text"
-                value="username:player firstname:john"
-              />
-            </span>
-          </div>
-          <div
-            class="pf-c-text-input-group__utilities"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Reset"
-              class="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-17"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="button"
+              class="pf-c-text-input-group__icon"
             >
               <svg
                 aria-hidden="true"
@@ -63,64 +26,97 @@ exports[`SearchInput advanced search 1`] = `
                 height="1em"
                 role="img"
                 style="vertical-align: -0.125em;"
-                viewBox="0 0 352 512"
+                viewBox="0 0 512 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"
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                 />
               </svg>
-            </button>
-          </div>
-        </div>
-        <button
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-label="Open advanced search"
-          class="pf-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-10"
-          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 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"
+            </span>
+            <input
+              aria-label="Search input"
+              class="pf-c-text-input-group__text-input"
+              type="text"
+              value="username:player firstname:john"
             />
-          </svg>
-        </button>
-        <button
-          aria-disabled="false"
-          aria-label="Search"
-          class="pf-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-11"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
+          </span>
+        </div>
+        <div
+          class="pf-c-text-input-group__utilities"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
+          <button
+            aria-disabled="false"
+            aria-label="Reset"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-17"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-label="Open advanced search"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-10"
+        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 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>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-11"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="submit"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 448 512"
+          width="1em"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </DocumentFragment>
@@ -133,56 +129,19 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
     data-testid="test-id"
   >
     <div
-      style="display: contents;"
+      class="pf-c-input-group"
     >
       <div
-        class="pf-c-input-group"
+        class="pf-c-text-input-group"
       >
         <div
-          class="pf-c-text-input-group"
+          class="pf-c-text-input-group__main pf-m-icon"
         >
-          <div
-            class="pf-c-text-input-group__main pf-m-icon"
+          <span
+            class="pf-c-text-input-group__text"
           >
             <span
-              class="pf-c-text-input-group__text"
-            >
-              <span
-                class="pf-c-text-input-group__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-              </span>
-              <input
-                aria-label="Search input"
-                class="pf-c-text-input-group__text-input"
-                type="text"
-                value="username:player firstname:john"
-              />
-            </span>
-          </div>
-          <div
-            class="pf-c-text-input-group__utilities"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Reset"
-              class="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-18"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="button"
+              class="pf-c-text-input-group__icon"
             >
               <svg
                 aria-hidden="true"
@@ -190,256 +149,285 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 height="1em"
                 role="img"
                 style="vertical-align: -0.125em;"
-                viewBox="0 0 352 512"
+                viewBox="0 0 512 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"
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                 />
               </svg>
-            </button>
-          </div>
-        </div>
-        <button
-          aria-disabled="false"
-          aria-expanded="true"
-          aria-label="Open advanced search"
-          class="pf-c-button pf-m-control pf-m-expanded"
-          data-ouia-component-id="OUIA-Generated-Button-control-12"
-          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 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"
+            </span>
+            <input
+              aria-label="Search input"
+              class="pf-c-text-input-group__text-input"
+              type="text"
+              value="username:player firstname:john"
             />
-          </svg>
-        </button>
-        <button
-          aria-disabled="false"
-          aria-label="Search"
-          class="pf-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-13"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
+          </span>
+        </div>
+        <div
+          class="pf-c-text-input-group__utilities"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
+          <button
+            aria-disabled="false"
+            aria-label="Reset"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-18"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
+      <button
+        aria-disabled="false"
+        aria-expanded="true"
+        aria-label="Open advanced search"
+        class="pf-c-button pf-m-control pf-m-expanded"
+        data-ouia-component-id="OUIA-Generated-Button-control-12"
+        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 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>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-13"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="submit"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 448 512"
+          width="1em"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
+      </button>
     </div>
     <div
-      style="display: contents;"
+      class=""
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
     >
       <div
-        class=""
-        data-popper-escaped="true"
-        data-popper-placement="bottom-start"
-        data-popper-reference-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
+        class="pf-c-panel pf-m-raised"
       >
         <div
-          class="pf-c-panel pf-m-raised"
+          class="pf-c-panel__main"
         >
           <div
-            class="pf-c-panel__main"
+            class="pf-c-panel__main-body"
           >
-            <div
-              class="pf-c-panel__main-body"
+            <form
+              class="pf-c-form"
+              novalidate=""
             >
-              <form
-                class="pf-c-form"
-                novalidate=""
+              <div
+                class="pf-c-form__group"
               >
                 <div
-                  class="pf-c-form__group"
+                  class="pf-c-form__group-label"
                 >
-                  <div
-                    class="pf-c-form__group-label"
+                  <label
+                    class="pf-c-form__label"
+                    for="username_0"
                   >
-                    <label
-                      class="pf-c-form__label"
-                      for="username_0"
+                    <span
+                      class="pf-c-form__label-text"
                     >
-                      <span
-                        class="pf-c-form__label-text"
-                      >
-                        Username
-                      </span>
-                    </label>
-                     
-                  </div>
-                  <div
-                    class="pf-c-form__group-control"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="pf-c-form-control"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                      data-ouia-component-type="PF4/TextInput"
-                      data-ouia-safe="true"
-                      id="username_0"
-                      type="text"
-                      value="player"
-                    />
-                  </div>
+                      Username
+                    </span>
+                  </label>
+                   
                 </div>
                 <div
-                  class="pf-c-form__group"
+                  class="pf-c-form__group-control"
                 >
-                  <div
-                    class="pf-c-form__group-label"
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="username_0"
+                    type="text"
+                    value="player"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="firstname_1"
                   >
-                    <label
-                      class="pf-c-form__label"
-                      for="firstname_1"
+                    <span
+                      class="pf-c-form__label-text"
                     >
-                      <span
-                        class="pf-c-form__label-text"
-                      >
-                        First name
-                      </span>
-                    </label>
-                     
-                  </div>
-                  <div
-                    class="pf-c-form__group-control"
+                      First name
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="firstname_1"
+                    type="text"
+                    value="john"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="pf-random-id-2"
                   >
-                    <input
-                      aria-invalid="false"
-                      class="pf-c-form-control"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                      data-ouia-component-type="PF4/TextInput"
-                      data-ouia-safe="true"
-                      id="firstname_1"
-                      type="text"
-                      value="john"
-                    />
-                  </div>
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Has words
+                    </span>
+                  </label>
+                   
                 </div>
                 <div
-                  class="pf-c-form__group"
+                  class="pf-c-form__group-control"
                 >
-                  <div
-                    class="pf-c-form__group-label"
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="pf-random-id-2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="pf-c-button pf-m-link pf-m-inline"
+                    data-ouia-component-id="OUIA-Generated-Button-link-1"
+                    data-ouia-component-type="PF4/Button"
+                    data-ouia-safe="true"
+                    type="button"
                   >
-                    <label
-                      class="pf-c-form__label"
-                      for="pf-random-id-2"
+                    Link
+                    <span
+                      class="pf-c-button__icon pf-m-end"
                     >
-                      <span
-                        class="pf-c-form__label-text"
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 448 512"
+                        width="1em"
                       >
-                        Has words
-                      </span>
-                    </label>
-                     
-                  </div>
-                  <div
-                    class="pf-c-form__group-control"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="pf-c-form-control"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                      data-ouia-component-type="PF4/TextInput"
-                      data-ouia-safe="true"
-                      id="pf-random-id-2"
-                      type="text"
-                      value=""
-                    />
-                  </div>
+                        <path
+                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
                 </div>
+              </div>
+              <div
+                class="pf-c-form__group pf-m-action"
+              >
                 <div
-                  class="pf-c-form__group"
+                  class="pf-c-form__group-control"
                 >
                   <div
-                    class="pf-c-form__group-control"
+                    class="pf-c-form__actions"
                   >
                     <button
                       aria-disabled="false"
-                      class="pf-c-button pf-m-link pf-m-inline"
-                      data-ouia-component-id="OUIA-Generated-Button-link-1"
+                      class="pf-c-button pf-m-primary"
+                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
                       data-ouia-component-type="PF4/Button"
                       data-ouia-safe="true"
-                      type="button"
+                      type="submit"
                     >
-                      Link
-                      <span
-                        class="pf-c-button__icon pf-m-end"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          style="vertical-align: -0.125em;"
-                          viewBox="0 0 448 512"
-                          width="1em"
-                        >
-                          <path
-                            d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
-                          />
-                        </svg>
-                      </span>
+                      Search
                     </button>
-                  </div>
-                </div>
-                <div
-                  class="pf-c-form__group pf-m-action"
-                >
-                  <div
-                    class="pf-c-form__group-control"
-                  >
-                    <div
-                      class="pf-c-form__actions"
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-link"
+                      data-ouia-component-id="OUIA-Generated-Button-link-2"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="reset"
                     >
-                      <button
-                        aria-disabled="false"
-                        class="pf-c-button pf-m-primary"
-                        data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                        data-ouia-component-type="PF4/Button"
-                        data-ouia-safe="true"
-                        type="submit"
-                      >
-                        Search
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        class="pf-c-button pf-m-link"
-                        data-ouia-component-id="OUIA-Generated-Button-link-2"
-                        data-ouia-component-type="PF4/Button"
-                        data-ouia-safe="true"
-                        type="reset"
-                      >
-                        Reset
-                      </button>
-                    </div>
+                      Reset
+                    </button>
                   </div>
                 </div>
-              </form>
-            </div>
+              </div>
+            </form>
           </div>
         </div>
       </div>
@@ -454,56 +442,19 @@ exports[`SearchInput renders search input in strict mode 1`] = `
     class=""
   >
     <div
-      style="display: contents;"
+      class="pf-c-input-group"
     >
       <div
-        class="pf-c-input-group"
+        class="pf-c-text-input-group"
       >
         <div
-          class="pf-c-text-input-group"
+          class="pf-c-text-input-group__main pf-m-icon"
         >
-          <div
-            class="pf-c-text-input-group__main pf-m-icon"
+          <span
+            class="pf-c-text-input-group__text"
           >
             <span
-              class="pf-c-text-input-group__text"
-            >
-              <span
-                class="pf-c-text-input-group__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style="vertical-align: -0.125em;"
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-              </span>
-              <input
-                aria-label="Search input"
-                class="pf-c-text-input-group__text-input"
-                type="text"
-                value="username:player firstname:john"
-              />
-            </span>
-          </div>
-          <div
-            class="pf-c-text-input-group__utilities"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Reset"
-              class="pf-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-11"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="button"
+              class="pf-c-text-input-group__icon"
             >
               <svg
                 aria-hidden="true"
@@ -511,64 +462,97 @@ exports[`SearchInput renders search input in strict mode 1`] = `
                 height="1em"
                 role="img"
                 style="vertical-align: -0.125em;"
-                viewBox="0 0 352 512"
+                viewBox="0 0 512 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"
+                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
                 />
               </svg>
-            </button>
-          </div>
-        </div>
-        <button
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-label="Open advanced search"
-          class="pf-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-5"
-          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 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"
+            </span>
+            <input
+              aria-label="Search input"
+              class="pf-c-text-input-group__text-input"
+              type="text"
+              value="username:player firstname:john"
             />
-          </svg>
-        </button>
-        <button
-          aria-disabled="false"
-          aria-label="Search"
-          class="pf-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-7"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
+          </span>
+        </div>
+        <div
+          class="pf-c-text-input-group__utilities"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style="vertical-align: -0.125em;"
-            viewBox="0 0 448 512"
-            width="1em"
+          <button
+            aria-disabled="false"
+            aria-label="Reset"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-11"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
           >
-            <path
-              d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-            />
-          </svg>
-        </button>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              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"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-label="Open advanced search"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-5"
+        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 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>
+      </button>
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-7"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="submit"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 448 512"
+          width="1em"
+        >
+          <path
+            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </DocumentFragment>