m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

UX Improvement: Fixed tooltip for token-list-item (#20258)

Browse Source 
* updated tooltip for token-list-item

* updated snapshot
This commit is contained in:
Nidhi Kumari 2023-08-02 15:07:12 +05:30 committed by GitHub
parent 446c7bb3fe
commit ad919026ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -43,20 +43,11 @@ exports[`Token Cell should match snapshot 1`] = `
<div <div
class="mm-box mm-box--width-1/3" class="mm-box mm-box--width-1/3"
> >
<div> <p
<div class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
class="" >
style="display: inline;" TEST
tabindex="0" </p>
title=""
>
<p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
>
TEST
</p>
</div>
</div>
</div> </div>
<p <p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default" class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"

8
ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
View File

@ -43,11 +43,9 @@ exports[`TokenListItem should render correctly 1`] = `
<div <div
class="mm-box mm-box--width-1/3" class="mm-box mm-box--width-1/3"
> >
<div> <p
<p class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default" />
/>
</div>
</div> </div>
<p <p
class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default" class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"

28
ui/components/multichain/token-list-item/token-list-item.js
View File

@ -48,6 +48,7 @@ export const TokenListItem = ({
const primaryTokenImage = useSelector(getNativeCurrencyImage); const primaryTokenImage = useSelector(getNativeCurrencyImage);
const trackEvent = useContext(MetaMetricsContext); const trackEvent = useContext(MetaMetricsContext);
const chainId = useSelector(getCurrentChainId); const chainId = useSelector(getCurrentChainId);
const tokenTitle = title === 'ETH' ? t('networkNameEthereum') : title;
// Used for badge icon // Used for badge icon
const currentNetwork = useSelector(getCurrentNetwork); const currentNetwork = useSelector(getCurrentNetwork);
@ -121,21 +122,30 @@ export const TokenListItem = ({
gap={1} gap={1}
> >
<Box width={BlockSize.OneThird}> <Box width={BlockSize.OneThird}>
<Tooltip {title?.length > 12 ? (
position="bottom" <Tooltip
interactive position="bottom"
html={title} interactive
disabled={title?.length < 12} html={title}
tooltipInnerClassName="multichain-token-list-item__tooltip" tooltipInnerClassName="multichain-token-list-item__tooltip"
> >
<Text
fontWeight={FontWeight.Medium}
variant={TextVariant.bodyMd}
ellipsis
>
{tokenTitle}
</Text>
</Tooltip>
) : (
<Text <Text
fontWeight={FontWeight.Medium} fontWeight={FontWeight.Medium}
variant={TextVariant.bodyMd} variant={TextVariant.bodyMd}
ellipsis ellipsis
> >
{title === 'ETH' ? t('networkNameEthereum') : title} {tokenTitle}
</Text> </Text>
</Tooltip> )}
</Box> </Box>
<Text <Text
fontWeight={FontWeight.Medium} fontWeight={FontWeight.Medium}