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.

ui/app/components/app/asset-list-item/asset-list-item.js

@@ -94,7 +94,12 @@ const AssetListItem = ({
     <ListItem
       className={classnames('asset-list-item', className)}
       data-testid={dataTestId}
-      title={primary}
+      title={(
+        <>
+          <h2 className="asset-list-item__token-value">{primary}</h2>
+          <h2 className="asset-list-item__token-symbol">{tokenSymbol}</h2>
+        </>
+      )}
       titleIcon={titleIcon}
       subtitle={<h3 title={secondary}>{secondary}</h3>}
       onClick={onClick}

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;
   }

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}
     />
 

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 () {

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;

ui/app/components/ui/list-item/list-item.component.js

@@ -23,8 +23,8 @@ export default function ListItem ({
           {icon}
         </div>
       )}
-      <div className="list-item__heading" title={title}>
-        <h2>{ title }</h2>
+      <div className="list-item__heading">
+        {React.isValidElement(title) ? title : <h2 className="list-item__title">{ title }</h2>}
         {titleIcon && (
           <div className="list-item__heading-wrap">
             {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,

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')
   })