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

Replacing deprecated code in favor of component-library components (#20137)

Browse Source
This commit is contained in:
Harsh Shukla 2023-07-29 18:55:34 +05:30 committed by GitHub
parent 0129ea913f
commit 96e4b7bb9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/components/app/snaps/snap-content-footer/index.scss
View File

@ -1,8 +1,5 @@
.snap-content-footer { .snap-content-footer {
.button { &__description {
white-space: nowrap; max-width: 100%; // helps with snap name truncation
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
} }
} }

37
ui/components/app/snaps/snap-content-footer/snap-content-footer.js
View File

@ -3,20 +3,26 @@ import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import Typography from '../../../ui/typography/typography';
import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useI18nContext } from '../../../../hooks/useI18nContext';
import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes'; import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
import { import {
TypographyVariant, TextVariant,
JustifyContent, JustifyContent,
AlignItems, AlignItems,
TextColor, TextColor,
Size, Size,
IconColor, IconColor,
Display,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import Button from '../../../ui/button'; import {
import Box from '../../../ui/box/box'; BUTTON_SIZES,
import { Icon, IconName } from '../../../component-library'; BUTTON_VARIANT,
Box,
Button,
Icon,
IconName,
Text,
} from '../../../component-library';
export default function SnapContentFooter({ snapName, snapId }) { export default function SnapContentFooter({ snapName, snapId }) {
const t = useI18nContext(); const t = useI18nContext();
@ -26,9 +32,10 @@ export default function SnapContentFooter({ snapName, snapId }) {
e.stopPropagation(); e.stopPropagation();
history.push(`${SNAPS_VIEW_ROUTE}/${encodeURIComponent(snapId)}`); history.push(`${SNAPS_VIEW_ROUTE}/${encodeURIComponent(snapId)}`);
}; };
// TODO: add truncation to the snap name, need to pick a character length at which to cut off
return ( return (
<Box <Box
display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
paddingTop={4} paddingTop={4}
@ -39,15 +46,25 @@ export default function SnapContentFooter({ snapName, snapId }) {
name={IconName.Warning} name={IconName.Warning}
size={Size.SM} size={Size.SM}
color={IconColor.iconMuted} color={IconColor.iconMuted}
paddingRight={1} marginRight={1}
/> />
<Typography color={TextColor.textMuted} variant={TypographyVariant.H7}> <Text
color={TextColor.textMuted}
variant={TextVariant.bodyXs}
className="snap-content-footer__description"
>
{t('snapContent', [ {t('snapContent', [
<Button type="inline" onClick={handleNameClick} key="button"> <Button
variant={BUTTON_VARIANT.LINK}
size={BUTTON_SIZES.INHERIT}
onClick={handleNameClick}
key="button"
ellipsis
>
{snapName} {snapName}
</Button>, </Button>,
])} ])}
</Typography> </Text>
</Box> </Box>
); );
} }

2
ui/components/app/snaps/snap-content-footer/snap-content-footer.stories.js
View File

@ -7,7 +7,7 @@ export default {
component: SnapContentFooter, component: SnapContentFooter,
args: { args: {
snapName: 'Test Snap', snapName: 'Really Long Test Snap Name',
snapId: 'local:test-snap', snapId: 'local:test-snap',
}, },
}; };