Skip to content
Permalink
Browse files

feat(Text): Added ellipsis prop

  • Loading branch information...
HHogg committed Feb 17, 2019
1 parent 2fbd355 commit 5f3429abe54c98329aace67e8232d6146ff94c1c
Showing with 16 additions and 5 deletions.
  1. +12 −5 src/Text/Text.css
  2. +4 −0 src/Text/Text.js
@@ -4,10 +4,10 @@
--text-size--heading: 1.375rem;
--text-size--title: 1.75rem;

--text-height--small: 1rem;
--text-height--body: 1.375rem;
--text-height--heading: 1.625rem;
--text-height--title: 2rem;
--text-height--small: 1.2;
--text-height--body: 1.375;
--text-height--heading: 1.35;
--text-height--title: 1.2;

--text-weight--weak: 400;
--text-weight--strong: 700;
@@ -44,7 +44,14 @@ body {
.Text--strong { font-weight: var(--text-weight--strong); }
.Text--weak { font-weight: var(--text-weight--weak); }

.Text--empahsis { font-style: italic; }
.Text--ellipsis {
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.Text--emphasis { font-style: italic; }

.Text--superscript,
.Text--subscript {
@@ -37,6 +37,8 @@ export default class Text extends Component {
breakOn: PropTypes.oneOf(['all', 'none', 'word']),
/** SKIP */
className: PropTypes.string,
/** Replaces the overflow of text with the ellipsis character */
ellipsis: PropTypes.bool,
/** Applies emphasis styling */
emphasis: PropTypes.bool,
/** Text default to block display, this will apply inline display. */
@@ -70,6 +72,7 @@ export default class Text extends Component {
align,
breakOn,
className,
ellipsis,
emphasis,
inline,
monospace,
@@ -84,6 +87,7 @@ export default class Text extends Component {
} = this.props;

const classes = classnames(className, 'Text', {
'Text--ellipsis': ellipsis,
'Text--emphasis': emphasis,
'Text--monospace': monospace,
'Text--subscript': subscript,

0 comments on commit 5f3429a

Please sign in to comment.
You can’t perform that action at this time.