Enable text truncation of badges. (#328)

Author: cjcenizal

src/docs/pages/badge/MaxWidth.tsx

@@ -0,0 +1,12 @@
+import { VuiBadge, VuiTooltip } from "../../../lib";
+import "./maxWidth.scss";
+
+export const MaxWidth = () => {
+  return (
+    <VuiTooltip tip="This text will get truncated">
+      <VuiBadge color="primary" className="maxWidthBadge">
+        This text will get truncated
+      </VuiBadge>
+    </VuiTooltip>
+  );
+};

src/docs/pages/badge/index.tsx

@@ -2,11 +2,13 @@ import { BadgeColors } from "./BadgeColors";
 import { ClickableBadges } from "./ClickableBadges";
 import { DismissibleBadges } from "./DismissibleBadges";
 import { Selection } from "./Selection";
+import { MaxWidth } from "./MaxWidth";
 
 const BadgeColorsSource = require("!!raw-loader!./BadgeColors");
 const ClickableBadgesSource = require("!!raw-loader!./ClickableBadges");
 const DismissibleBadgesSource = require("!!raw-loader!./DismissibleBadges");
 const SelectionSource = require("!!raw-loader!./Selection");
+const MaxWidthSource = require("!!raw-loader!./MaxWidth");
 
 export const badge = {
   name: "Badge",
@@ -31,6 +33,11 @@ export const badge = {
       name: "Selection",
       component: <Selection />,
       source: SelectionSource.default.toString()
+    },
+    {
+      name: "Max width",
+      component: <MaxWidth />,
+      source: MaxWidthSource.default.toString()
     }
   ]
 };

src/docs/pages/badge/maxWidth.scss

@@ -0,0 +1,3 @@
+.maxWidthBadge {
+  max-width: 150px;
+}

src/docs/pages/flex/Layouts.tsx

@@ -5,6 +5,7 @@ import {
   VuiFlexContainer,
   VuiFlexItem,
   VuiIcon,
+  VuiLabel,
   VuiSpacer,
   VuiText,
   VuiTextColor,
@@ -15,7 +16,7 @@ import { Subsection } from "../../components/Subsection";
 
 export const Layouts = () => (
   <>
-    <Subsection title={"Header layout"}>
+    <Subsection title="Header layout">
       <VuiFlexContainer justifyContent="spaceBetween" alignItems="center">
         <VuiFlexItem grow={1}>
           <VuiTitle size="m">
@@ -37,14 +38,10 @@ export const Layouts = () => (
       </VuiFlexContainer>
     </Subsection>
 
-    <Subsection title={"Searchbar layout"}>
+    <Subsection title="Searchbar layout">
       <VuiFlexContainer justifyContent="spaceBetween" alignItems="center">
         <VuiFlexItem grow={false} truncate>
-          <VuiText truncate>
-            <VuiTextColor color="subdued">
-              <p>Find stuff in your data</p>
-            </VuiTextColor>
-          </VuiText>
+          <VuiLabel>Find stuff in your data</VuiLabel>
         </VuiFlexItem>
 
         <VuiFlexItem grow={1}>
@@ -57,7 +54,7 @@ export const Layouts = () => (
       </VuiFlexContainer>
     </Subsection>
 
-    <Subsection title={"Status layout"}>
+    <Subsection title="Status layout">
       <VuiFlexContainer alignItems="center" spacing="xs">
         <VuiFlexItem grow={false}>
           <VuiIcon color="danger">
@@ -75,9 +72,9 @@ export const Layouts = () => (
       </VuiFlexContainer>
     </Subsection>
 
-    <Subsection title={"Flag layout"}>
+    <Subsection title="Flag layout">
       <VuiFlexContainer alignItems="start" spacing="xs" className="flexExampleFlag">
-        <VuiFlexItem grow={false}>
+        <VuiFlexItem grow={false} shrink={0}>
           <VuiIcon color="accent">
             <BiTestTube />
           </VuiIcon>

src/lib/components/badge/Badge.tsx

@@ -53,7 +53,9 @@ export const VuiBadge = ({
         </VuiFlexItem>
       )}
 
-      <VuiFlexItem id={id}>{children}</VuiFlexItem>
+      <VuiFlexItem id={id}>
+        <div className="vuiBadge__content">{children}</div>
+      </VuiFlexItem>
 
       {onClose && (
         <VuiFlexItem>

src/lib/components/badge/_index.scss

@@ -20,6 +20,14 @@
   height: min-content !important;
 }
 
+.vuiBadge__content {
+  // text-overflow doesn't work on flexbox elements.
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 // Color
 $color: (
   accent: (

src/lib/components/flex/_flexItem.scss

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  // Required to enable text truncation within flex items.
+  min-width: 0;
 }
 
 .vuiFlexItem--truncate {