move tourniquet style to button

This commit is contained in:
Sean Yesmunt 2018-07-02 18:22:59 -04:00
parent a6a00e0bbb
commit adaec74e78
4 changed files with 11 additions and 9 deletions

View file

@ -23,6 +23,7 @@ type Props = {
noPadding: ?boolean, // to remove padding and allow circular buttons noPadding: ?boolean, // to remove padding and allow circular buttons
uppercase: ?boolean, uppercase: ?boolean,
iconColor: ?string, iconColor: ?string,
tourniquet: ?boolean, // to shorten the button and ellipsis, only use for links
}; };
class Button extends React.PureComponent<Props> { class Button extends React.PureComponent<Props> {
@ -50,6 +51,7 @@ class Button extends React.PureComponent<Props> {
noPadding, noPadding,
uppercase, uppercase,
iconColor, iconColor,
tourniquet,
...otherProps ...otherProps
} = this.props; } = this.props;
@ -69,6 +71,7 @@ class Button extends React.PureComponent<Props> {
'btn--link': button === 'link', 'btn--link': button === 'link',
'btn--external-link': button === 'link' && href, 'btn--external-link': button === 'link' && href,
'btn--uppercase': uppercase, 'btn--uppercase': uppercase,
'btn--tourniquet': tourniquet,
} }
: 'btn--no-style', : 'btn--no-style',
className className

View file

@ -72,6 +72,7 @@ class TransactionListItem extends React.PureComponent<Props> {
{name && {name &&
claimId && ( claimId && (
<Button <Button
tourniquet
button="link" button="link"
navigate="/show" navigate="/show"
navigateParams={{ uri: buildURI({ claimName: name, claimId }) }} navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}

View file

@ -76,6 +76,13 @@ button:disabled {
background-color: var(--btn-bg-secondary); background-color: var(--btn-bg-secondary);
} }
.btn.btn--tourniquet {
max-width: 20vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn.btn--no-style { .btn.btn--no-style {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;

View file

@ -99,15 +99,6 @@ table.table--transactions {
} }
td:nth-of-type(3) { td:nth-of-type(3) {
width: 22.5%; width: 22.5%;
.btn--link {
// Tourniquets text over 20VW
// Style needs to be on the button to allow for proper ellipsis
max-width: 20vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
td:nth-of-type(4) { td:nth-of-type(4) {
width: 17.5%; width: 17.5%;