@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

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

@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chip closable 1`] = `
+exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-2"
+    class="pf-v5-c-chip"
+    data-ouia-component-id="snapshot-test"
     data-ouia-component-type="PF5/Chip"
     data-ouia-safe="true"
-    id="chip_one"
+    id="snapshot-test"
   >
     <span
       class="pf-v5-c-chip__content"
     >
       <span
         class="pf-v5-c-chip__text"
-        id="chip_one"
+        id="snapshot-test"
       >
-        Chip
+        Chip text
       </span>
     </span>
     <span
@@ -25,212 +25,12 @@ exports[`Chip closable 1`] = `
       <button
         aria-disabled="false"
         aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
+        aria-labelledby="remove_snapshot-test snapshot-test"
         class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
+        data-ouia-component-id="snapshot-test"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_chip_one"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          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>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip closable with tooltip 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-3"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    id="chip_one"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="chip_one"
-      >
-        1234567890123456789
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_chip_one chip_one"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_chip_one"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          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>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip custom max-width text 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-5"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    style="--pf-v5-c-chip__text--MaxWidth: 100px;"
-    textmaxwidth="100px"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-4"
-      >
-        4 more
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_pf-random-id-4"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          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>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip overflow 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip pf-m-overflow my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-1"
-    data-ouia-component-type="PF5/OverflowChip"
-    data-ouia-safe="true"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-      >
-        4 more
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip readonly 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-4"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-3"
-      >
-        4 more
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Chip with role='gridcell' 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-chip my-chp-cls"
-    data-ouia-component-id="OUIA-Generated-Chip-6"
-    data-ouia-component-type="PF5/Chip"
-    data-ouia-safe="true"
-    role="gridcell"
-  >
-    <span
-      class="pf-v5-c-chip__content"
-    >
-      <span
-        class="pf-v5-c-chip__text"
-        id="pf-random-id-5"
-      >
-        I'm a roled chip
-      </span>
-    </span>
-    <span
-      class="pf-v5-c-chip__actions"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="close"
-        aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="close"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_pf-random-id-5"
+        id="remove_snapshot-test"
         type="button"
       >
         <svg

package/src/components/Chip/__tests__/__snapshots__/ChipGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ChipGroup chip group default 1`] = `
+exports[`chip group renders to match snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Chip group category"
@@ -20,321 +20,10 @@ exports[`ChipGroup chip group default 1`] = `
         <li
           class="pf-v5-c-chip-group__list-item"
         >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-1"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-1"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-1"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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>
-          </div>
+          chips
         </li>
       </ul>
     </div>
   </div>
 </DocumentFragment>
 `;
-
-exports[`ChipGroup chip group with category 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-2"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-2"
-      >
-        category
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-2"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-2"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-3"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-3"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ChipGroup chip group with category and tooltip 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-12"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-12"
-      >
-        A very long category name
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-12"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-9"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-13"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-13 pf-random-id-13"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-13"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ChipGroup chip group with closable category 1`] = `
-<DocumentFragment>
-  <div
-    aria-labelledby="pf-random-id-4"
-    class="pf-v5-c-chip-group pf-m-category"
-    data-ouia-component-type="PF5/ChipGroup"
-    data-ouia-safe="true"
-    role="group"
-  >
-    <div
-      class="pf-v5-c-chip-group__main"
-    >
-      <span
-        class="pf-v5-c-chip-group__label"
-        id="pf-random-id-4"
-      >
-        category
-      </span>
-      <ul
-        aria-labelledby="pf-random-id-4"
-        class="pf-v5-c-chip-group__list"
-        role="list"
-      >
-        <li
-          class="pf-v5-c-chip-group__list-item"
-        >
-          <div
-            class="pf-v5-c-chip"
-            data-ouia-component-id="OUIA-Generated-Chip-3"
-            data-ouia-component-type="PF5/Chip"
-            data-ouia-safe="true"
-          >
-            <span
-              class="pf-v5-c-chip__content"
-            >
-              <span
-                class="pf-v5-c-chip__text"
-                id="pf-random-id-5"
-              >
-                1.1
-              </span>
-            </span>
-            <span
-              class="pf-v5-c-chip__actions"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="close"
-                aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="close"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                id="remove_pf-random-id-5"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  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>
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div
-      class="pf-v5-c-chip-group__close"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Close chip group"
-        aria-labelledby="remove_group_pf-random-id-4 pf-random-id-4"
-        class="pf-v5-c-button pf-m-plain"
-        data-ouia-component-id="Close chip group"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        id="remove_group_pf-random-id-4"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 512 512"
-          width="1em"
-        >
-          <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -75,7 +75,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   onChange?: (event: React.FormEvent, text?: string | number) => void;
   /** The text which is copied. */
   children: React.ReactNode;
-  /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
+  /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -57,6 +57,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   children,
   variant = 'control',
   onTooltipHidden = () => {},
+  className,
   ...props
 }: ClipboardCopyButtonProps) => {
   const triggerRef = React.createRef<HTMLButtonElement>();
@@ -79,6 +80,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         variant={variant}
         onClick={onClick}
         aria-label={ariaLabel}
+        className={className}
         id={id}
         aria-labelledby={`${id} ${textId}`}
         {...props}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -28,7 +28,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     onClick={onClick}
     id={id}
     aria-labelledby={`${id} ${textId}`}
-    aria-controls={`${id} ${contentId}`}
+    aria-controls={contentId}
     aria-expanded={isExpanded}
     {...props}
   >