@patternfly/react-core 5.0.0-alpha.23 → 5.0.0-alpha.25

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

@@ -8,31 +8,39 @@ exports[`Label editable label 1`] = `
     <button
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </button>
-    <button
-      aria-disabled="false"
-      aria-label="Close Something"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-3"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="button"
+    <span
+      class="pf-c-label__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Close Something"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <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>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </button>
+    </span>
   </span>
 </DocumentFragment>
 `;
@@ -60,7 +68,11 @@ exports[`Label label with additional class name 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -76,7 +88,11 @@ exports[`Label label with additional class name and props 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -90,7 +106,11 @@ exports[`Label label with blue color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -104,7 +124,11 @@ exports[`Label label with blue color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -118,31 +142,39 @@ exports[`Label label with close button 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
-    <button
-      aria-disabled="false"
-      aria-label="Close Something"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-1"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="button"
+    <span
+      class="pf-c-label__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Close Something"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <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>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </button>
+    </span>
   </span>
 </DocumentFragment>
 `;
@@ -155,31 +187,39 @@ exports[`Label label with close button and outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
-    <button
-      aria-disabled="false"
-      aria-label="Close Something"
-      class="pf-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-2"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe="true"
-      type="button"
+    <span
+      class="pf-c-label__actions"
     >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 352 512"
-        width="1em"
+      <button
+        aria-disabled="false"
+        aria-label="Close Something"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
       >
-        <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>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </button>
+    </span>
   </span>
 </DocumentFragment>
 `;
@@ -192,7 +232,11 @@ exports[`Label label with cyan color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -206,7 +250,11 @@ exports[`Label label with cyan color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -220,7 +268,11 @@ exports[`Label label with green color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -234,7 +286,11 @@ exports[`Label label with green color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -248,7 +304,11 @@ exports[`Label label with grey color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -262,7 +322,11 @@ exports[`Label label with grey color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -277,7 +341,11 @@ exports[`Label label with href 1`] = `
       class="pf-c-label__content"
       href="#"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </a>
   </span>
 </DocumentFragment>
@@ -292,7 +360,11 @@ exports[`Label label with href with outline variant 1`] = `
       class="pf-c-label__content"
       href="#"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </a>
   </span>
 </DocumentFragment>
@@ -306,7 +378,11 @@ exports[`Label label with orange color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -320,7 +396,11 @@ exports[`Label label with orange color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -334,7 +414,11 @@ exports[`Label label with purple color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -348,7 +432,11 @@ exports[`Label label with purple color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -362,7 +450,11 @@ exports[`Label label with red color 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -376,7 +468,11 @@ exports[`Label label with red color with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -392,8 +488,9 @@ exports[`Label label with truncation 1`] = `
     >
       <span
         class="pf-c-label__text"
+        style="--pf-c-label__text--MaxWidth: 16ch;"
       >
-        Something very very very very very long that should be truncated
+        textMaxWidth set at 16ch on this very long label that should be truncated
       </span>
     </span>
   </span>
@@ -408,7 +505,11 @@ exports[`Label renders 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -422,7 +523,11 @@ exports[`Label renders with isCompact 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>
@@ -436,7 +541,11 @@ exports[`Label renders with outline variant 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
   </span>
 </DocumentFragment>

package/src/components/Label/examples/LabelCompact.tsx

@@ -20,7 +20,7 @@ export const LabelCompact: React.FunctionComponent = () => (
     <Label isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
     </Label>
-    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Compact label with icon that overflows
     </Label>
   </React.Fragment>

package/src/components/Label/examples/LabelFilled.tsx

@@ -13,7 +13,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label href="#filled" onClose={() => Function.prototype}>
       Grey link removable
     </Label>
-    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Grey label with icon that overflows
     </Label>
     <br />
@@ -34,7 +34,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="blue" href="#filled" onClose={() => Function.prototype}>
       Blue link removable
     </Label>
-    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Blue label with icon that overflows
     </Label>
     <br />
@@ -55,7 +55,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="green" href="#filled" onClose={() => Function.prototype}>
       Green link removable
     </Label>
-    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Green label with icon that overflows
     </Label>
     <br />
@@ -76,7 +76,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="orange" href="#filled" onClose={() => Function.prototype}>
       Orange link removable
     </Label>
-    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Orange label with icon that overflows
     </Label>
     <br />
@@ -97,7 +97,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="red" href="#filled" onClose={() => Function.prototype}>
       Red link removable
     </Label>
-    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Red label with icon that overflows
     </Label>
     <br />
@@ -118,7 +118,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="purple" href="#filled" onClose={() => Function.prototype}>
       Purple link removable
     </Label>
-    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Purple label with icon that overflows
     </Label>
     <br />
@@ -139,7 +139,7 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
       Cyan link removable
     </Label>
-    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Cyan label with icon that overflows
     </Label>
     <br />
@@ -160,8 +160,15 @@ export const LabelFilled: React.FunctionComponent = () => (
     <Label color="gold" href="#filled" onClose={() => Function.prototype}>
       Gold link removable
     </Label>
-    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Gold label with icon that overflows
     </Label>
+    <br />
+    <br />
+    <div style={{width: "250px"}}>
+      <Label>
+        Label that overflows its parent, but has no textMaxWidth on its own
+      </Label>
+    </div>
   </React.Fragment>
 );

package/src/components/Label/examples/LabelOutline.tsx

@@ -20,7 +20,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
       Grey link removable
     </Label>
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Grey label with icon that overflows
     </Label>
     <br />
@@ -43,7 +43,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
       Blue link removable
     </Label>
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Blue label with icon that overflows
     </Label>
     <br />
@@ -66,7 +66,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
       Green link removable
     </Label>
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Green label with icon that overflows
     </Label>
     <br />
@@ -89,7 +89,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
       Orange link removable
     </Label>
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Orange label with icon that overflows
     </Label>
     <br />
@@ -112,7 +112,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
       Red link removable
     </Label>
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Red label with icon that overflows
     </Label>
     <br />
@@ -135,7 +135,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
       Purple link removable
     </Label>
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Purple label with icon that overflows
     </Label>
     <br />
@@ -158,7 +158,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
       Cyan link removable
     </Label>
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Cyan label with icon that overflows
     </Label>
     <br />
@@ -181,7 +181,7 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
       Gold link removable
     </Label>
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Gold label with icon that overflows
     </Label>
   </React.Fragment>

package/src/components/Label/examples/LabelRouterLink.tsx

@@ -8,12 +8,12 @@ export const LabelRouterLink: React.FunctionComponent = () => (
     color="blue"
     icon={<InfoCircleIcon />}
     onClose={() => Function.prototype}
-    isTruncated
     render={({ className, content, componentRef }) => (
       <Link to="/" className={className} innerRef={componentRef}>
         {content}
       </Link>
     )}
+    textMaxWidth="16ch"
   >
     Blue label router link with icon that overflows
   </Label>