From a3f9e6d37b464cc36e305c4260a8b7e29c318903 Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Tue, 1 Sep 2020 13:13:58 -0700 Subject: [PATCH] Show token symbol when token amount string is long (#9333) * Show token symbol when token amount string is long Fixes #9318 This essentially separates the token cell list item title/token amount and the token symbol. I do request advice/recomendations on how to better handle the new `subTtitle` which I set the token symbol to and the `subtitle` https://github.com/MetaMask/metamask-extension/blob/develop/ui/app/components/app/asset-list-item/asset-list-item.js#L99. * Individually test token balance and token symbol and their associated css element * Feedback commit * Classname and css overflow for title with string. --- .../app/asset-list-item/asset-list-item.js | 7 ++++++- .../app/asset-list-item/asset-list-item.scss | 7 +++++++ ui/app/components/app/token-cell/token-cell.js | 2 +- ui/app/components/app/token-cell/token-cell.test.js | 8 ++++++-- ui/app/components/ui/list-item/index.scss | 12 ++++++------ .../components/ui/list-item/list-item.component.js | 6 +++--- .../components/ui/list-item/tests/list-item.test.js | 3 --- 7 files changed, 29 insertions(+), 16 deletions(-) diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js index e5ff8212f..7119cbaa7 100644 --- a/ui/app/components/app/asset-list-item/asset-list-item.js +++ b/ui/app/components/app/asset-list-item/asset-list-item.js @@ -94,7 +94,12 @@ const AssetListItem = ({ +

{primary}

+

{tokenSymbol}

+ + )} titleIcon={titleIcon} subtitle={

{secondary}

} onClick={onClick} diff --git a/ui/app/components/app/asset-list-item/asset-list-item.scss b/ui/app/components/app/asset-list-item/asset-list-item.scss index ddc6fd562..d8d96b153 100644 --- a/ui/app/components/app/asset-list-item/asset-list-item.scss +++ b/ui/app/components/app/asset-list-item/asset-list-item.scss @@ -1,4 +1,11 @@ .asset-list-item { + &__token-value { + padding: 0 5px 0 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + &__chevron-right { color: $Grey-500; } diff --git a/ui/app/components/app/token-cell/token-cell.js b/ui/app/components/app/token-cell/token-cell.js index 20de78bf3..f97287d2d 100644 --- a/ui/app/components/app/token-cell/token-cell.js +++ b/ui/app/components/app/token-cell/token-cell.js @@ -47,7 +47,7 @@ export default function TokenCell ({ tokenSymbol={symbol} tokenDecimals={decimals} warning={warning} - primary={`${string || 0} ${symbol}`} + primary={`${string || 0}`} secondary={formattedFiat} /> diff --git a/ui/app/components/app/token-cell/token-cell.test.js b/ui/app/components/app/token-cell/token-cell.test.js index 65a238b69..0e49a14cc 100644 --- a/ui/app/components/app/token-cell/token-cell.test.js +++ b/ui/app/components/app/token-cell/token-cell.test.js @@ -68,8 +68,12 @@ describe('Token Cell', function () { assert.equal(wrapper.find(Identicon).prop('image'), './test-image') }) - it('renders token balance and symbol', function () { - assert.equal(wrapper.find('.list-item__heading').text(), '5.000 TEST') + it('renders token balance', function () { + assert.equal(wrapper.find('.asset-list-item__token-value').text(), '5.000') + }) + + it('renders token symbol', function () { + assert.equal(wrapper.find('.asset-list-item__token-symbol').text(), 'TEST') }) it('renders converted fiat amount', function () { diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss index 2117dfc4d..feed0eb4a 100644 --- a/ui/app/components/ui/list-item/index.scss +++ b/ui/app/components/ui/list-item/index.scss @@ -44,18 +44,18 @@ display: flex; align-items: center; - > h2 { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - &-wrap { display: inline-block; margin-left: 8px; } } + &__title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + &__subheading { grid-area: sub; font-size: 12px; diff --git a/ui/app/components/ui/list-item/list-item.component.js b/ui/app/components/ui/list-item/list-item.component.js index 11a722d7c..6cc286aa3 100644 --- a/ui/app/components/ui/list-item/list-item.component.js +++ b/ui/app/components/ui/list-item/list-item.component.js @@ -23,8 +23,8 @@ export default function ListItem ({ {icon} )} -
-

{ title }

+
+ {React.isValidElement(title) ? title :

{ title }

} {titleIcon && (
{titleIcon} @@ -56,7 +56,7 @@ export default function ListItem ({ } ListItem.propTypes = { - title: PropTypes.string.isRequired, + title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), titleIcon: PropTypes.node, subtitle: PropTypes.node, children: PropTypes.node, diff --git a/ui/app/components/ui/list-item/tests/list-item.test.js b/ui/app/components/ui/list-item/tests/list-item.test.js index 10e534446..fc998e369 100644 --- a/ui/app/components/ui/list-item/tests/list-item.test.js +++ b/ui/app/components/ui/list-item/tests/list-item.test.js @@ -40,9 +40,6 @@ describe('ListItem', function () { it(`renders "${TITLE}" title`, function () { assert.equal(wrapper.find('.list-item__heading h2').text(), TITLE) }) - it('adds html title to heading element', function () { - assert.equal(wrapper.find('.list-item__heading').props().title, TITLE) - }) it(`renders "I am a list item" subtitle`, function () { assert.equal(wrapper.find('.list-item__subheading').text(), 'I am a list item') })