npm - @patternfly/react-core - Versions diffs - 4.206.4 → 4.207.0 - Mend

@patternfly/react-core 4.206.4 → 4.207.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (496) hide show

package/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap CHANGED Viewed

@@ -1,31 +1,836 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Dropdown alignment breakpoints 1`] = `"<div aria-label=\\"Dropdown button\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Dropdown-3\\"><button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-3\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button><ul aria-labelledby=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__menu pf-m-align-left-on-sm pf-m-align-right-on-md pf-m-align-left-on-lg pf-m-align-right-on-xl pf-m-align-left-on-2xl\\" role=\\"menu\\"><li role=\\"none\\"><a class=\\"pf-c-dropdown__menu-item\\">Link</a></li><li role=\\"none\\"><button type=\\"button\\" class=\\"pf-c-dropdown__menu-item\\">Action</button></li><li role=\\"none\\"><a aria-disabled=\\"true\\" class=\\"pf-m-disabled pf-c-dropdown__menu-item\\">Disabled Link</a></li><li role=\\"none\\"><button aria-disabled=\\"true\\" type=\\"button\\" class=\\"pf-m-disabled pf-c-dropdown__menu-item\\">Disabled Action</button></li><li role=\\"separator\\"><div class=\\"pf-c-divider\\" role=\\"separator\\"></div></li><li role=\\"none\\"><a class=\\"pf-c-dropdown__menu-item\\">Separated Link</a></li><li role=\\"none\\"><button type=\\"button\\" class=\\"pf-c-dropdown__menu-item\\">Separated Action</button></li></ul></div>"`;
+exports[`Dropdown alignment breakpoints 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-3"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu pf-m-align-left-on-sm pf-m-align-right-on-md pf-m-align-left-on-lg pf-m-align-right-on-xl pf-m-align-left-on-2xl"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="separator"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown basic 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-8\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"false\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button>"`;
+exports[`Dropdown basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-8"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="false"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+    <div
+      class="pf-c-dropdown__menu"
+    >
+      <div>
+        BASIC
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown dropup + right aligned 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-5\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button>"`;
+exports[`Dropdown dropup + right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-5"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown dropup 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-4\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button>"`;
+exports[`Dropdown dropup 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top"
+    data-ouia-component-id="OUIA-Generated-Dropdown-4"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown expanded 1`] = `"<div aria-label=\\"Dropdown button\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Dropdown-6\\"><button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-6\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button><ul aria-labelledby=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"none\\"><a class=\\"pf-c-dropdown__menu-item\\">Link</a></li><li role=\\"none\\"><button type=\\"button\\" class=\\"pf-c-dropdown__menu-item\\">Action</button></li><li role=\\"none\\"><a aria-disabled=\\"true\\" class=\\"pf-m-disabled pf-c-dropdown__menu-item\\">Disabled Link</a></li><li role=\\"none\\"><button aria-disabled=\\"true\\" type=\\"button\\" class=\\"pf-m-disabled pf-c-dropdown__menu-item\\">Disabled Action</button></li><li role=\\"separator\\"><div class=\\"pf-c-divider\\" role=\\"separator\\"></div></li><li role=\\"none\\"><a class=\\"pf-c-dropdown__menu-item\\">Separated Link</a></li><li role=\\"none\\"><button type=\\"button\\" class=\\"pf-c-dropdown__menu-item\\">Separated Action</button></li></ul></div>"`;
+exports[`Dropdown expanded 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-6"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="separator"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown primary 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-7\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle pf-m-primary\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button>"`;
+exports[`Dropdown primary 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-7"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown regular 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-1\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button>"`;
+exports[`Dropdown regular 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-1"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`Dropdown right aligned 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-2\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">Dropdown</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><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\\"></path></svg></span></button>"`;
+exports[`Dropdown right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-2"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="pf-c-dropdown__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-dropdown__toggle-text"
+      >
+        Dropdown
+      </span>
+      <span
+        class="pf-c-dropdown__toggle-icon"
+      >
+        <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>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle basic 1`] = `"<button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"false\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button>"`;
+exports[`KebabToggle basic 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-15"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="false"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+    <div
+      class="pf-c-dropdown__menu"
+    >
+      <div>
+        BASIC
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle dropup + right aligned 1`] = `"<button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button>"`;
+exports[`KebabToggle dropup + right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-12"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle dropup 1`] = `"<button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button>"`;
+exports[`KebabToggle dropup 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-top"
+    data-ouia-component-id="OUIA-Generated-Dropdown-11"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle expanded 1`] = `"<div aria-label=\\"Dropdown button\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Dropdown-13\\"><button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button><ul aria-labelledby=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"none\\"><a class=\\"pf-c-dropdown__menu-item\\">Link</a></li><li role=\\"none\\"><button type=\\"button\\" class=\\"pf-c-dropdown__menu-item\\">Action</button></li><li role=\\"none\\"><a aria-disabled=\\"true\\" class=\\"pf-m-disabled pf-c-dropdown__menu-item\\">Disabled Link</a></li><li role=\\"none\\"><button aria-disabled=\\"true\\" type=\\"button\\" class=\\"pf-m-disabled pf-c-dropdown__menu-item\\">Disabled Action</button></li><li role=\\"separator\\"><div class=\\"pf-c-divider\\" role=\\"separator\\"></div></li><li role=\\"none\\"><a class=\\"pf-c-dropdown__menu-item\\">Separated Link</a></li><li role=\\"none\\"><button type=\\"button\\" class=\\"pf-c-dropdown__menu-item\\">Separated Action</button></li></ul></div>"`;
+exports[`KebabToggle expanded 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-Dropdown-13"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+    <ul
+      aria-labelledby="Dropdown Toggle"
+      class="pf-c-dropdown__menu"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="separator"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          class="pf-c-dropdown__menu-item"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          class="pf-c-dropdown__menu-item"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle plain 1`] = `"<button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle pf-m-plain\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button>"`;
+exports[`KebabToggle plain 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-14"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle pf-m-plain"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle regular 1`] = `"<div aria-label=\\"Dropdown button\\" class=\\"pf-c-dropdown\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-Dropdown-9\\"><button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button></div>"`;
+exports[`KebabToggle regular 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Dropdown button"
+    class="pf-c-dropdown"
+    data-ouia-component-id="OUIA-Generated-Dropdown-9"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;
-exports[`KebabToggle right aligned 1`] = `"<button aria-label=\\"Actions\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 192 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z\\"></path></svg></button>"`;
+exports[`KebabToggle right aligned 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown pf-m-align-right"
+    data-ouia-component-id="OUIA-Generated-Dropdown-10"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Actions"
+      class="pf-c-dropdown__toggle"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 192 512"
+        width="1em"
+      >
+        <path
+          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;