@patternfly/react-core 4.202.30 → 4.202.33

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

@@ -1,156 +1,249 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`advanced search 1`] = `
-<input
-  aria-label="Search input"
-  className="pf-c-search-input__text-input"
-  disabled={false}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  value="username:player firstname:john"
-/>
-`;
-
-exports[`advanced search with custom attributes 1`] = `
-<input
-  aria-label="Search input"
-  className="pf-c-search-input__text-input"
-  disabled={false}
-  onChange={[Function]}
-  onKeyDown={[Function]}
-  value="username:player firstname:john"
-/>
-`;
-
-exports[`navigable search results 1`] = `
-<span
-  className="pf-c-search-input__nav"
->
-  <Button
-    aria-label="Previous"
-    isDisabled={false}
-    onClick={[MockFunction]}
-    variant="plain"
+exports[`SearchInput advanced search 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-search-input"
   >
-    <ButtonBase
-      aria-label="Previous"
-      innerRef={null}
-      isDisabled={false}
-      onClick={[MockFunction]}
-      variant="plain"
+    <div
+      class="pf-c-input-group"
     >
+      <div
+        class="pf-c-search-input__bar"
+      >
+        <span
+          class="pf-c-search-input__text"
+        >
+          <span
+            class="pf-c-search-input__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-search-input__text-input"
+            value="username:player firstname:john"
+          />
+        </span>
+        <span
+          class="pf-c-search-input__utilities"
+        >
+          <span
+            class="pf-c-search-input__clear"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-15"
+              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 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>
+          </span>
+        </span>
+      </div>
       <button
-        aria-disabled={false}
-        aria-label="Previous"
-        className="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-10"
+        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-6"
         data-ouia-component-type="PF4/Button"
-        data-ouia-safe={true}
-        disabled={false}
-        onClick={[MockFunction]}
-        role={null}
+        data-ouia-safe="true"
         type="button"
       >
-        <AngleUpIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-            />
-          </svg>
-        </AngleUpIcon>
+          <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>
-    </ButtonBase>
-  </Button>
-  <Button
-    aria-label="Next"
-    isDisabled={false}
-    onClick={[MockFunction]}
-    variant="plain"
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SearchInput advanced search with custom attributes 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-search-input"
   >
-    <ButtonBase
-      aria-label="Next"
-      innerRef={null}
-      isDisabled={false}
-      onClick={[MockFunction]}
-      variant="plain"
+    <div
+      class="pf-c-input-group"
     >
+      <div
+        class="pf-c-search-input__bar"
+      >
+        <span
+          class="pf-c-search-input__text"
+        >
+          <span
+            class="pf-c-search-input__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-search-input__text-input"
+            value="username:player firstname:john"
+          />
+        </span>
+        <span
+          class="pf-c-search-input__utilities"
+        >
+          <span
+            class="pf-c-search-input__clear"
+          >
+            <button
+              aria-disabled="false"
+              aria-label="Reset"
+              class="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-16"
+              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 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>
+          </span>
+        </span>
+      </div>
       <button
-        aria-disabled={false}
-        aria-label="Next"
-        className="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-11"
+        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-8"
         data-ouia-component-type="PF4/Button"
-        data-ouia-safe={true}
-        disabled={false}
-        onClick={[MockFunction]}
-        role={null}
+        data-ouia-safe="true"
         type="button"
       >
-        <AngleDownIcon
-          color="currentColor"
-          noVerticalAlign={false}
-          size="sm"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="currentColor"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-            />
-          </svg>
-        </AngleDownIcon>
+          <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>
-    </ButtonBase>
-  </Button>
-</span>
-`;
-
-exports[`navigable search results 2`] = `
-<span
-  className="pf-c-badge pf-m-read"
->
-  3 / 7
-</span>
-`;
-
-exports[`result count 1`] = `
-<span
-  className="pf-c-badge pf-m-read"
->
-  3
-</span>
+      <button
+        aria-disabled="false"
+        aria-label="Search"
+        class="pf-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-9"
+        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>
 `;
 
-exports[`search input with hint 1`] = `
-<div>
+exports[`SearchInput search input with hint 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-search-input"
   >
@@ -300,11 +393,11 @@ exports[`search input with hint 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`simple search input 1`] = `
-<div>
+exports[`SearchInput simple search input 1`] = `
+<DocumentFragment>
   <div
     class="pf-c-search-input"
   >
@@ -447,5 +540,5 @@ exports[`simple search input 1`] = `
       </button>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;