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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.25",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "60f26944aa125046d9b8fab0855e40267aed5ff2"
+  "gitHead": "e469295db3c4d6a1366d5a2e61c434d193703309"
 }

package/src/components/Label/Label.tsx

@@ -27,8 +27,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;
   /** @beta Callback when an editable label cancels an edit. */
   onEditCancel?: (event: KeyboardEvent, previousText: string) => void;
-  /** Flag indicating the label text should be truncated. */
-  isTruncated?: boolean;
+  /** The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. */
+  textMaxWidth?: string;
   /** Position of the tooltip which is displayed if text is truncated */
   tooltipPosition?:
     | TooltipPosition
@@ -90,7 +90,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   isCompact = false,
   isEditable = false,
   editableProps,
-  isTruncated = false,
+  textMaxWidth,
   tooltipPosition,
   icon,
   onClose,
@@ -212,12 +212,16 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const content = (
     <React.Fragment>
       {icon && <span className={css(styles.labelIcon)}>{icon}</span>}
-      {isTruncated && (
-        <span ref={textRef} className={css(styles.labelText)}>
-          {children}
-        </span>
-      )}
-      {!isTruncated && children}
+      <span
+        ref={textRef}
+        className={css(styles.labelText)}
+        {...(textMaxWidth && {
+          style: {
+            '--pf-c-label__text--MaxWidth': textMaxWidth,
+          } as React.CSSProperties
+        })}>
+        {children}
+      </span>
     </React.Fragment>
   );
 

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

@@ -86,7 +86,7 @@ describe('Label', () => {
 
   test('label with truncation', () => {
     const { asFragment } = render(
-      <Label isTruncated>Something very very very very very long that should be truncated</Label>
+      <Label textMaxWidth="16ch">textMaxWidth set at 16ch on this very long label that should be truncated</Label>
     );
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -8,7 +8,11 @@ exports[`Label editable label 1`] = `
     <button
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </button>
     <span
       class="pf-c-label__actions"
@@ -64,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>
@@ -80,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>
@@ -94,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>
@@ -108,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>
@@ -122,7 +142,11 @@ exports[`Label label with close button 1`] = `
     <span
       class="pf-c-label__content"
     >
-      Something
+      <span
+        class="pf-c-label__text"
+      >
+        Something
+      </span>
     </span>
     <span
       class="pf-c-label__actions"
@@ -163,7 +187,11 @@ 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>
     <span
       class="pf-c-label__actions"
@@ -204,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>
@@ -218,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>
@@ -232,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>
@@ -246,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>
@@ -260,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>
@@ -274,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>
@@ -289,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>
@@ -304,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>
@@ -318,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>
@@ -332,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>
@@ -346,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>
@@ -360,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>
@@ -374,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>
@@ -388,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>
@@ -404,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>
@@ -420,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>
@@ -434,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>
@@ -448,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>

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

@@ -22,7 +22,11 @@ exports[`LabelGroup label group compact 1`] = `
             <span
               class="pf-c-label__content"
             >
-              1
+              <span
+                class="pf-c-label__text"
+              >
+                1
+              </span>
             </span>
           </span>
         </li>
@@ -35,7 +39,11 @@ exports[`LabelGroup label group compact 1`] = `
             <span
               class="pf-c-label__content"
             >
-              2
+              <span
+                class="pf-c-label__text"
+              >
+                2
+              </span>
             </span>
           </span>
         </li>
@@ -48,7 +56,11 @@ exports[`LabelGroup label group compact 1`] = `
             <span
               class="pf-c-label__content"
             >
-              3
+              <span
+                class="pf-c-label__text"
+              >
+                3
+              </span>
             </span>
           </span>
         </li>
@@ -61,7 +73,11 @@ exports[`LabelGroup label group compact 1`] = `
             <span
               class="pf-c-label__content"
             >
-              1 more
+              <span
+                class="pf-c-label__text"
+              >
+                1 more
+              </span>
             </span>
           </button>
         </li>
@@ -93,7 +109,11 @@ exports[`LabelGroup label group default 1`] = `
             <span
               class="pf-c-label__content"
             >
-              1.1
+              <span
+                class="pf-c-label__text"
+              >
+                1.1
+              </span>
             </span>
           </span>
         </li>
@@ -132,7 +152,11 @@ exports[`LabelGroup label group with category 1`] = `
             <span
               class="pf-c-label__content"
             >
-              1.1
+              <span
+                class="pf-c-label__text"
+              >
+                1.1
+              </span>
             </span>
           </span>
         </li>
@@ -171,7 +195,11 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
             <span
               class="pf-c-label__content"
             >
-              1.1
+              <span
+                class="pf-c-label__text"
+              >
+                1.1
+              </span>
             </span>
           </span>
         </li>
@@ -210,7 +238,11 @@ exports[`LabelGroup label group with closable category 1`] = `
             <span
               class="pf-c-label__content"
             >
-              1.1
+              <span
+                class="pf-c-label__text"
+              >
+                1.1
+              </span>
             </span>
           </span>
         </li>