@patternfly/react-core 4.206.3 → 4.206.6

package/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`dropdown groups basic render 1`] = `
-<div>
+<DocumentFragment>
   <section
     class=""
   >
@@ -17,5 +17,5 @@ exports[`dropdown groups basic render 1`] = `
       Something
     </ul>
   </section>
-</div>
+</DocumentFragment>
 `;

package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggle.test.tsx.snap

@@ -1,9 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropdownToggleCheckbox state action split button - renders primary variant 1`] = `"<div class=\\"pf-c-dropdown__toggle pf-m-split-button pf-m-action pf-m-primary\\"><div>test</div><button data-testid=\\"test-id\\" data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-11\\" aria-label=\\"Select\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle-button pf-m-primary\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"\\">Dropdown</span><span class=\\"\\"><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></div>"`;
+exports[`DropdownToggle state action split button - renders primary variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown__toggle pf-m-split-button pf-m-action pf-m-primary"
+  >
+    <div>
+      test
+    </div>
+    <button
+      aria-expanded="false"
+      aria-label="Select"
+      class="pf-c-dropdown__toggle-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class=""
+      >
+        Dropdown
+      </span>
+      <span
+        class=""
+      >
+        <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[`DropdownToggleCheckbox state active 1`] = `
-<div>
+exports[`DropdownToggle state active 1`] = `
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle pf-m-active"
@@ -36,17 +79,122 @@ exports[`DropdownToggleCheckbox state active 1`] = `
       </svg>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
-exports[`DropdownToggleCheckbox state button variant - plain with text 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-10\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle pf-m-plain pf-m-text\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"\\">Dropdown</span><span class=\\"\\"><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[`DropdownToggle state button variant - plain with text 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-c-dropdown__toggle pf-m-plain pf-m-text"
+    data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
+    data-ouia-component-type="PF4/DropdownToggle"
+    data-ouia-safe="true"
+    id="Dropdown Toggle"
+    type="button"
+  >
+    <span
+      class=""
+    >
+      Dropdown
+    </span>
+    <span
+      class=""
+    >
+      <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>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox state button variant - primary 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 pf-m-primary\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"\\">Dropdown</span><span class=\\"\\"><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[`DropdownToggle state button variant - primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-c-dropdown__toggle pf-m-primary"
+    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=""
+    >
+      Dropdown
+    </span>
+    <span
+      class=""
+    >
+      <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>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox state button variant - secondary 1`] = `"<button data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-9\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle pf-m-secondary\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"\\">Dropdown</span><span class=\\"\\"><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[`DropdownToggle state button variant - secondary 1`] = `
+<DocumentFragment>
+  <button
+    aria-expanded="false"
+    class="pf-c-dropdown__toggle pf-m-secondary"
+    data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
+    data-ouia-component-type="PF4/DropdownToggle"
+    data-ouia-safe="true"
+    id="Dropdown Toggle"
+    type="button"
+  >
+    <span
+      class=""
+    >
+      Dropdown
+    </span>
+    <span
+      class=""
+    >
+      <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>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox state class changes 1`] = `
-<div>
+exports[`DropdownToggle state class changes 1`] = `
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle"
@@ -79,11 +227,11 @@ exports[`DropdownToggleCheckbox state class changes 1`] = `
       </svg>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
-exports[`DropdownToggleCheckbox state focus 1`] = `
-<div>
+exports[`DropdownToggle state focus 1`] = `
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle"
@@ -116,11 +264,11 @@ exports[`DropdownToggleCheckbox state focus 1`] = `
       </svg>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
-exports[`DropdownToggleCheckbox state hover 1`] = `
-<div>
+exports[`DropdownToggle state hover 1`] = `
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle"
@@ -153,7 +301,50 @@ exports[`DropdownToggleCheckbox state hover 1`] = `
       </svg>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
-exports[`DropdownToggleCheckbox state split button - does not render primary variant 1`] = `"<div class=\\"pf-c-dropdown__toggle pf-m-split-button\\"><div>test</div><button data-testid=\\"test-id\\" data-ouia-component-type=\\"PF4/DropdownToggle\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggle-12\\" aria-label=\\"Select\\" id=\\"Dropdown Toggle\\" class=\\"pf-c-dropdown__toggle-button pf-m-primary\\" type=\\"button\\" aria-expanded=\\"false\\"><span class=\\"\\">Dropdown</span><span class=\\"\\"><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></div>"`;
+exports[`DropdownToggle state split button - does not render primary variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-dropdown__toggle pf-m-split-button"
+  >
+    <div>
+      test
+    </div>
+    <button
+      aria-expanded="false"
+      aria-label="Select"
+      class="pf-c-dropdown__toggle-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="Dropdown Toggle"
+      type="button"
+    >
+      <span
+        class=""
+      >
+        Dropdown
+      </span>
+      <span
+        class=""
+      >
+        <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>
+`;

package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleAction.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`isDisabled 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-disabled="true"
     aria-label="action"
@@ -9,25 +9,25 @@ exports[`isDisabled 1`] = `
     disabled=""
     id="action"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`passing class 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-label="action"
     class="pf-c-dropdown__toggle-button abc"
     id="action"
   />
-</div>
+</DocumentFragment>
 `;
 
 exports[`renders with text 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-label="action"
     class="pf-c-dropdown__toggle-button"
     id="action"
   />
-</div>
+</DocumentFragment>
 `;

package/src/components/Dropdown/__tests__/__snapshots__/DropdownToggleCheckbox.test.tsx.snap

@@ -1,15 +1,149 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropdownToggleCheckbox 3rd state 1`] = `"<input id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-5\\">"`;
+exports[`DropdownToggleCheckbox 3rd state 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-5"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+  </label>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox controlled 1`] = `"<input id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-1\\" checked=\\"\\">"`;
+exports[`DropdownToggleCheckbox controlled 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-1"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+  </label>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox isDisabled 1`] = `"<input id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" disabled=\\"\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-4\\">"`;
+exports[`DropdownToggleCheckbox isDisabled 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-4"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      disabled=""
+      id="check"
+      type="checkbox"
+    />
+  </label>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox passing HTML attribute 1`] = `"<input label=\\"label\\" aria-labelledby=\\"labelId\\" id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-7\\" checked=\\"\\">"`;
+exports[`DropdownToggleCheckbox passing HTML attribute 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      aria-labelledby="labelId"
+      checked=""
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-7"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      id="check"
+      label="label"
+      type="checkbox"
+    />
+  </label>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox passing class 1`] = `"<input label=\\"label\\" id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-6\\" checked=\\"\\">"`;
+exports[`DropdownToggleCheckbox passing class 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check class-123"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      checked=""
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-6"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      id="check"
+      label="label"
+      type="checkbox"
+    />
+  </label>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox uncontrolled 1`] = `"<input id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-2\\">"`;
+exports[`DropdownToggleCheckbox uncontrolled 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-2"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      id="check"
+      type="checkbox"
+    />
+  </label>
+</DocumentFragment>
+`;
 
-exports[`DropdownToggleCheckbox with text 1`] = `"<label class=\\"pf-c-dropdown__toggle-check\\" for=\\"check\\"><input id=\\"check\\" aria-label=\\"check\\" type=\\"checkbox\\" aria-invalid=\\"false\\" disabled=\\"\\" data-ouia-component-type=\\"PF4/DropdownToggleCheckbox\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"OUIA-Generated-DropdownToggleCheckbox-3\\"><span class=\\"pf-c-dropdown__toggle-text\\" aria-hidden=\\"true\\" id=\\"check-text\\">Some text</span></label>"`;
+exports[`DropdownToggleCheckbox with text 1`] = `
+<DocumentFragment>
+  <label
+    class="pf-c-dropdown__toggle-check"
+    for="check"
+  >
+    <input
+      aria-invalid="false"
+      aria-label="check"
+      data-ouia-component-id="OUIA-Generated-DropdownToggleCheckbox-3"
+      data-ouia-component-type="PF4/DropdownToggleCheckbox"
+      data-ouia-safe="true"
+      disabled=""
+      id="check"
+      type="checkbox"
+    />
+    <span
+      aria-hidden="true"
+      class="pf-c-dropdown__toggle-text"
+      id="check-text"
+    >
+      Some text
+    </span>
+  </label>
+</DocumentFragment>
+`;

package/src/components/Dropdown/__tests__/__snapshots__/InternalDropdownItem.test.tsx.snap

@@ -1,21 +1,168 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InternalDropdownItem dropdown items a 1`] = `"<a class=\\"\\">Something</a>"`;
+exports[`InternalDropdownItem dropdown items a 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <a
+      class=""
+    >
+      Something
+    </a>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `"<a aria-disabled=\\"true\\" class=\\"pf-m-aria-disabled\\">Something</a>"`;
+exports[`InternalDropdownItem dropdown items aria-disabled a 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <a
+      aria-disabled="true"
+      class="pf-m-aria-disabled"
+    >
+      Something
+    </a>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `"<button aria-disabled=\\"true\\" type=\\"button\\" class=\\"pf-m-aria-disabled\\">Something</button>"`;
+exports[`InternalDropdownItem dropdown items aria-disabled button 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <button
+      aria-disabled="true"
+      class="pf-m-aria-disabled"
+      type="button"
+    >
+      Something
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items button 1`] = `"<button type=\\"button\\" class=\\"\\">Something</button>"`;
+exports[`InternalDropdownItem dropdown items button 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <button
+      class=""
+      type="button"
+    >
+      Something
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items description a 1`] = `"<div class=\\"pf-c-dropdown__menu-item-description\\">Something's link description</div>"`;
+exports[`InternalDropdownItem dropdown items description a 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <a
+      class="pf-m-description"
+    >
+      <div
+        class="pf-c-dropdown__menu-item-main"
+      >
+        Something
+      </div>
+      <div
+        class="pf-c-dropdown__menu-item-description"
+      >
+        Something's link description
+      </div>
+    </a>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items description button 1`] = `"<div class=\\"pf-c-dropdown__menu-item-description\\">Something's button description</div>"`;
+exports[`InternalDropdownItem dropdown items description button 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <button
+      class="pf-m-description"
+      type="button"
+    >
+      <div
+        class="pf-c-dropdown__menu-item-main"
+      >
+        Something
+      </div>
+      <div
+        class="pf-c-dropdown__menu-item-description"
+      >
+        Something's button description
+      </div>
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items disabled a 1`] = `"<a aria-disabled=\\"true\\" class=\\"\\">Something</a>"`;
+exports[`InternalDropdownItem dropdown items disabled a 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <a
+      aria-disabled="true"
+      class=""
+    >
+      Something
+    </a>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items disabled button 1`] = `"<button aria-disabled=\\"true\\" type=\\"button\\" class=\\"\\">Something</button>"`;
+exports[`InternalDropdownItem dropdown items disabled button 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <button
+      aria-disabled="true"
+      class=""
+      type="button"
+    >
+      Something
+    </button>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items hover a 1`] = `"<a class=\\"\\">Something</a>"`;
+exports[`InternalDropdownItem dropdown items hover a 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <a
+      class=""
+    >
+      Something
+    </a>
+  </li>
+</DocumentFragment>
+`;
 
-exports[`InternalDropdownItem dropdown items hover button 1`] = `"<button type=\\"button\\" class=\\"\\">Something</button>"`;
+exports[`InternalDropdownItem dropdown items hover button 1`] = `
+<DocumentFragment>
+  <li
+    role="none"
+  >
+    <button
+      class=""
+      type="button"
+    >
+      Something
+    </button>
+  </li>
+</DocumentFragment>
+`;

package/src/components/Dropdown/__tests__/__snapshots__/Toggle.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown toggle 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     class="pf-c-dropdown__toggle"
@@ -34,11 +34,11 @@ exports[`Dropdown toggle 1`] = `
       </svg>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Kebab toggle 1`] = `
-<div>
+<DocumentFragment>
   <button
     aria-expanded="false"
     aria-label="Actions"
@@ -60,5 +60,5 @@ exports[`Kebab toggle 1`] = `
       />
     </svg>
   </button>
-</div>
+</DocumentFragment>
 `;