feat(atoms): add ellipsis modifier to the Text component

8base · Aug 8, 2018 · 83018c5 · 83018c5
1 parent c89e9e5
commit 83018c5
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/atoms/typography/Text/Text.js b/src/atoms/typography/Text/Text.js
@@ -19,6 +19,8 @@ type TextProps = {|
   size?: PropSizes,
   /** text align */
   align?: 'left' | 'center' | 'right',
+  /** when true then cut text with ellipsis */
+  ellipsis?: boolean,
 |};
 
 const name = 'text';
@@ -88,11 +90,19 @@ const theme = createTheme(name, (colors: *): * => ({
         fontSize: '1.8rem',
       },
     },
+
+    ellipsis: {
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+    },
   },
+
   defaults: {
     color: 'primary',
     size: 'md',
     weight: 'normal',
+    ellipsis: false,
   },
 }));