@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

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

@@ -2,265 +2,508 @@
 
 exports[`FormSelect Disabled FormSelect input  1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="disabled FormSelect"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-    disabled=""
+  <div
+    class="pf-v5-c-form-control pf-m-disabled"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="disabled FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+      disabled=""
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with aria-label does not generate console error 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="label"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="label"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Mr
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with id does not generate console error 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="label"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-    id="id"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="label"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-5"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+      id="id"
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect FormSelect input with no aria-label or id generates console error 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-6"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Mr
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect Grouped FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="grouped FormSelect"
+  <div
+    class="pf-v5-c-form-control"
+  >
+    <select
+      aria-invalid="false"
+      aria-label="grouped FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <optgroup
+        class=""
+        label="Group1"
+      >
+        <option
+          class=""
+          value="1"
+        >
+          The First Option
+        </option>
+        <option
+          class=""
+          value="2"
+        >
+          Second option is selected by default
+        </option>
+      </optgroup>
+      <optgroup
+        class=""
+        label="Group2"
+      >
+        <option
+          class=""
+          value="3"
+        >
+          The Third Option
+        </option>
+        <option
+          class=""
+          value="4"
+        >
+          The Fourth option
+        </option>
+      </optgroup>
+      <optgroup
+        class=""
+        disabled=""
+        label="Group3"
+      >
+        <option
+          class=""
+          value="5"
+        >
+          The Fifth Option
+        </option>
+        <option
+          class=""
+          value="6"
+        >
+          The Sixth option
+        </option>
+      </optgroup>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`FormSelect Simple FormSelect input 1`] = `
+<DocumentFragment>
+  <div
     class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <optgroup
-      class=""
-      label="Group1"
+    <select
+      aria-invalid="false"
+      aria-label="simple FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
     >
       <option
         class=""
-        value="1"
+        disabled=""
+        value="please choose"
       >
-        The First Option
+        Please Choose
       </option>
       <option
         class=""
-        value="2"
+        value="mr"
       >
-        Second option is selected by default
+        Mr
       </option>
-    </optgroup>
-    <optgroup
-      class=""
-      label="Group2"
-    >
       <option
         class=""
-        value="3"
+        value="miss"
       >
-        The Third Option
+        Miss
       </option>
       <option
         class=""
-        value="4"
+        value="mrs"
       >
-        The Fourth option
+        Mrs
       </option>
-    </optgroup>
-    <optgroup
-      class=""
-      disabled=""
-      label="Group3"
-    >
       <option
         class=""
-        value="5"
+        value="ms"
       >
-        The Fifth Option
+        Ms
       </option>
       <option
         class=""
-        value="6"
+        value="dr"
       >
-        The Sixth option
+        Dr
       </option>
-    </optgroup>
-  </select>
-</DocumentFragment>
-`;
-
-exports[`FormSelect Simple FormSelect input 1`] = `
-<DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="simple FormSelect"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
-  >
-    <option
-      class=""
-      disabled=""
-      value="please choose"
-    >
-      Please Choose
-    </option>
-    <option
-      class=""
-      value="mr"
-    >
-      Mr
-    </option>
-    <option
-      class=""
-      value="miss"
-    >
-      Miss
-    </option>
-    <option
-      class=""
-      value="mrs"
-    >
-      Mrs
-    </option>
-    <option
-      class=""
-      value="ms"
-    >
-      Ms
-    </option>
-    <option
-      class=""
-      value="dr"
-    >
-      Dr
-    </option>
-    <option
-      class=""
-      disabled=""
-      value="other"
+      <option
+        class=""
+        disabled=""
+        value="other"
+      >
+        Other
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Other
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect invalid FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="true"
-    aria-label="invalid FormSelect"
-    class="pf-v5-c-form-control"
-    data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
+  <div
+    class="pf-v5-c-form-control pf-m-error"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="true"
+      aria-label="invalid FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-error-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-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"
+          />
+        </svg>
+      </div>
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated success FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="validated FormSelect"
+  <div
     class="pf-v5-c-form-control pf-m-success"
-    data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="validated FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-success-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
     >
-      Mr
-    </option>
-  </select>
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
+    >
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 512 512"
+        >
+          <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"
+          />
+        </svg>
+      </div>
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`FormSelect validated warning FormSelect input 1`] = `
 <DocumentFragment>
-  <select
-    aria-invalid="false"
-    aria-label="validated FormSelect"
+  <div
     class="pf-v5-c-form-control pf-m-warning"
-    data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
-    data-ouia-component-type="PF4/FormSelect"
-    data-ouia-safe="true"
   >
-    <option
-      class=""
-      value="mr"
+    <select
+      aria-invalid="false"
+      aria-label="validated FormSelect"
+      data-ouia-component-id="OUIA-Generated-FormSelect-warning-1"
+      data-ouia-component-type="PF4/FormSelect"
+      data-ouia-safe="true"
+    >
+      <option
+        class=""
+        value="mr"
+      >
+        Mr
+      </option>
+    </select>
+    <div
+      class="pf-v5-c-form-control__utilities"
     >
-      Mr
-    </option>
-  </select>
+      <div
+        class="pf-v5-c-form-control__icon pf-m-status"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          role="img"
+          viewBox="0 0 576 512"
+        >
+          <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"
+          />
+        </svg>
+      </div>
+      <div
+        class="pf-v5-c-form-control__toggle-icon"
+      >
+        <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>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;