m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

AvatarBase font-size logic (#18203)

Browse Source 
* Updating AvatarBase to use Text component instead of Box and adding font size logic based on avatar size

* Updating snaps
This commit is contained in:
George Marshall 2023-03-17 10:06:59 -07:00 committed by GitHub
parent c21c2bdcf0
commit 3117890b30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 326 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/avatar-account/__snapshots__/avatar-account.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarAccount should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-account box--flex-direction-row box--color-text-default box--background-color-background-alternative box--border-color-border-default box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-account mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
data-testid="avatar-account"
>
<div

2
ui/components/component-library/avatar-base/README.mdx
View File

@ -32,6 +32,8 @@ Possible sizes include:
Defaults to `md`
The text styles of the `AvatarBase` is based on the `size` prop. To override this use the `Text` component's `variant` prop. `AvatarBase` also accepts all `Text` component props.
<Canvas>
<Story id="components-componentlibrary-avatarbase--size" />
</Canvas>

2
ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarBase should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md box--flex-direction-row box--color-text-default box--background-color-background-alternative box--border-color-border-default box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-border-default box--border-style-solid box--border-width-1"
data-testid="avatar-base"
/>
</div>

40
ui/components/component-library/avatar-base/avatar-base.js
View File

@ -2,12 +2,20 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import {
BackgroundColor,
BorderColor,
TextColor,
DISPLAY,
JustifyContent,
AlignItems,
BorderRadius,
TextVariant,
TEXT_TRANSFORM,
} from '../../../helpers/constants/design-system';
import { Text } from '../text';
import { AVATAR_BASE_SIZES } from './avatar-base.constants';
export const AvatarBase = ({
@ -18,19 +26,36 @@ export const AvatarBase = ({
color = TextColor.textDefault,
className,
...props
}) => (
<Box
}) => {
let fallbackTextVariant;
if (size === AVATAR_BASE_SIZES.LG || size === AVATAR_BASE_SIZES.XL) {
fallbackTextVariant = TextVariant.bodyLgMedium;
} else if (size === AVATAR_BASE_SIZES.SM || size === AVATAR_BASE_SIZES.MD) {
fallbackTextVariant = TextVariant.bodySm;
} else {
fallbackTextVariant = TextVariant.bodyXs;
}
return (
<Text
className={classnames(
'mm-avatar-base',
`mm-avatar-base--size-${size}`,
className,
)}
as="div"
display={DISPLAY.FLEX}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
borderRadius={BorderRadius.full}
variant={fallbackTextVariant}
textTransform={TEXT_TRANSFORM.UPPERCASE}
{...{ backgroundColor, borderColor, color, ...props }}
>
{children}
</Box>
</Text>
);
};
AvatarBase.propTypes = {
/**
* The size of the AvatarBase.
@ -62,8 +87,7 @@ AvatarBase.propTypes = {
*/
className: PropTypes.string,
/**
* AvatarBase also accepts all Box props including but not limited to
* className, as(change root element of HTML element) and margin props
* AvatarBase also accepts all Text props including variant and all Box props
*/
...Box.propTypes,
...Text.propTypes,
};

5
ui/components/component-library/avatar-base/avatar-base.scss
View File

@ -25,10 +25,5 @@
width: var(--avatar-size);
max-width: var(--avatar-size);
flex: 0 0 var(--avatar-size);
border-radius: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}

3
ui/components/component-library/avatar-base/avatar-base.stories.js
View File

@ -89,10 +89,11 @@ export default {
color: TextColor.textDefault,
backgroundColor: BackgroundColor.backgroundAlternative,
borderColor: BorderColor.borderDefault,
children: 'B',
},
};
export const DefaultStory = (args) => <AvatarBase {...args}>B</AvatarBase>;
export const DefaultStory = (args) => <AvatarBase {...args} />;
DefaultStory.storyName = 'Default';

32
ui/components/component-library/avatar-base/avatar-base.test.js
View File

@ -2,7 +2,7 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { Color } from '../../../helpers/constants/design-system';
import { Color, TextColor } from '../../../helpers/constants/design-system';
import { AvatarBase } from './avatar-base';
@ -25,19 +25,19 @@ describe('AvatarBase', () => {
</>,
);
expect(getByTestId('avatar-base-xs')).toHaveClass(
'mm-avatar-base--size-xs',
'mm-avatar-base--size-xs mm-text--body-xs',
);
expect(getByTestId('avatar-base-sm')).toHaveClass(
'mm-avatar-base--size-sm',
'mm-avatar-base--size-sm mm-text--body-sm',
);
expect(getByTestId('avatar-base-md')).toHaveClass(
'mm-avatar-base--size-md',
'mm-avatar-base--size-md mm-text--body-sm',
);
expect(getByTestId('avatar-base-lg')).toHaveClass(
'mm-avatar-base--size-lg',
'mm-avatar-base--size-lg mm-text--body-lg-medium',
);
expect(getByTestId('avatar-base-xl')).toHaveClass(
'mm-avatar-base--size-xl',
'mm-avatar-base--size-xl mm-text--body-lg-medium',
);
});
// className
@ -63,20 +63,20 @@ describe('AvatarBase', () => {
const { getByTestId } = render(
<>
<AvatarBase
color={Color.successDefault}
data-testid={Color.successDefault}
color={TextColor.successDefault}
data-testid={TextColor.successDefault}
/>
<AvatarBase
color={Color.errorDefault}
data-testid={Color.errorDefault}
color={TextColor.errorDefault}
data-testid={TextColor.errorDefault}
/>
</>,
);
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--color-${Color.successDefault}`,
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`mm-text--color-${TextColor.successDefault}`,
);
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--color-${Color.errorDefault}`,
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`mm-text--color-${TextColor.errorDefault}`,
);
});
// background color
@ -84,11 +84,11 @@ describe('AvatarBase', () => {
const { getByTestId } = render(
<>
<AvatarBase
backgroundColor={Color.successDefault}
backgroundColor={TextColor.successDefault}
data-testid={Color.successDefault}
/>
<AvatarBase
backgroundColor={Color.errorDefault}
backgroundColor={TextColor.errorDefault}
data-testid={Color.errorDefault}
/>
</>,

2
ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarFavicon should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-favicon"
>
<span

2
ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarIcon should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-icon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-primary-muted box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-icon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-primary-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-muted box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-icon"
>
<span

4
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -100,7 +100,9 @@ describe('AvatarIcon', () => {
/>,
);
expect(getByTestId('success')).toHaveClass('box--color-success-default');
expect(getByTestId('success')).toHaveClass(
'mm-text--color-success-default',
);
expect(getByTestId('success')).toHaveClass(
'box--background-color-success-muted',
);

4
ui/components/component-library/avatar-network/README.mdx
View File

@ -30,6 +30,8 @@ Possible sizes include:
Defaults to `md`
The fallback display of the `AvatarNetwork` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarNetwork` component.
<Canvas>
<Story id="components-componentlibrary-avatarnetwork--size-story" />
</Canvas>
@ -48,6 +50,8 @@ import { AvatarNetwork } from '../../component-library';
Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `src` prop.
Use `Text` component props to change the `variant`, `font-weight`, `font-family`, etc.
<Canvas>
<Story id="components-componentlibrary-avatarnetwork--name" />
</Canvas>

2
ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarNetwork should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-network"
>
?

18
ui/components/component-library/avatar-network/avatar-network.stories.js
View File

@ -12,12 +12,12 @@ import {
import Box from '../../ui/box/box';
import README from './README.mdx';
import { AvatarNetwork } from './avatar-network';
import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
export default {
title: 'Components/ComponentLibrary/AvatarNetwork',
component: AvatarNetwork,
parameters: {
docs: {
@ -67,13 +67,27 @@ export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.flexEnd}
gap={1}
marginBottom={4}
>
<AvatarNetwork {...args} size={Size.XS} />
<AvatarNetwork {...args} size={Size.SM} />
<AvatarNetwork {...args} size={Size.MD} />
<AvatarNetwork {...args} size={Size.LG} />
<AvatarNetwork {...args} size={Size.XL} />
</Box>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={1}>
<AvatarNetwork {...args} src="" size={Size.XS} />
<AvatarNetwork {...args} src="" size={Size.SM} />
<AvatarNetwork {...args} src="" size={Size.MD} />
<AvatarNetwork {...args} src="" size={Size.LG} />
<AvatarNetwork {...args} src="" size={Size.XL} />
</Box>
</>
);
SizeStory.storyName = 'Size';

4
ui/components/component-library/avatar-network/avatar-network.test.js
View File

@ -75,10 +75,10 @@ describe('AvatarNetwork', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
`mm-text--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
`mm-text--color-${TextColor.errorDefault}`,
);
});
// background color

4
ui/components/component-library/avatar-token/README.mdx
View File

@ -30,6 +30,8 @@ Possible sizes include:
Defaults to `md`
The fallback display of the `AvatarToken` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarToken` component.
<Canvas>
<Story id="components-componentlibrary-avatartoken--size-story" />
</Canvas>
@ -48,6 +50,8 @@ import { AvatarToken } from '../../component-library';
Use the `name` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `src` prop.
Use `Text` component props to change the `variant`, `font-weight`, `font-family`, etc.
<Canvas>
<Story id="components-componentlibrary-avatartoken--name" />
</Canvas>

2
ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`AvatarToken should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-token box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-token"
>
<img

216
ui/components/component-library/avatar-token/avatar-token.stories.js
View File

@ -10,7 +10,16 @@ import {
import Box from '../../ui/box/box';
import {
AvatarNetwork,
BUTTON_LINK_SIZES,
BadgeWrapper,
ButtonLink,
Text,
} from '..';
import README from './README.mdx';
import { AvatarToken } from './avatar-token';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
@ -66,13 +75,218 @@ export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.baseline}
gap={2}
marginBottom={4}
>
<AvatarToken {...args} size={Size.XS} />
<AvatarToken {...args} size={Size.SM} />
<AvatarToken {...args} size={Size.MD} />
<AvatarToken {...args} size={Size.LG} />
<AvatarToken {...args} size={Size.XL} />
</Box>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.flexEnd}
gap={2}
marginBottom={4}
>
<AvatarToken {...args} src="" size={Size.XS} />
<AvatarToken {...args} src="" size={Size.SM} />
<AvatarToken {...args} src="" size={Size.MD} />
<AvatarToken {...args} src="" size={Size.LG} />
<AvatarToken {...args} src="" size={Size.XL} />
</Box>
<Text marginBottom={4}>
Sizes with{' '}
<ButtonLink
size={BUTTON_LINK_SIZES.INHERIT}
href="/docs/components-componentlibrary-buttonlink--default-story"
>
AvatarNetwork
</ButtonLink>{' '}
and{' '}
<ButtonLink
size={BUTTON_LINK_SIZES.INHERIT}
href="/docs/components-componentlibrary-badgewrapper--default-story"
>
BadgeWrapper
</ButtonLink>{' '}
components
</Text>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.flexEnd}
gap={2}
marginBottom={4}
>
<BadgeWrapper
badge={
<AvatarNetwork
src="./images/eth_logo.svg"
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.XS} />
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
src="./images/eth_logo.svg"
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.SM} />
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
src="./images/eth_logo.svg"
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.MD} />
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
src="./images/eth_logo.svg"
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.LG} />
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
src="./images/eth_logo.svg"
name="ETH"
size={Size.SM}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.XL} />
</BadgeWrapper>
</Box>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={2}>
<BadgeWrapper
badge={
<AvatarNetwork
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken
{...args}
src=""
name="ETH"
size={Size.XS}
borderColor={BorderColor.borderDefault}
borderSize={2}
/>
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken
{...args}
name="ETH"
src=""
size={Size.SM}
borderColor={BorderColor.borderDefault}
borderSize={2}
/>
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken
{...args}
name="ETH"
src=""
size={Size.MD}
borderColor={BorderColor.borderDefault}
borderSize={2}
/>
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
name="ETH"
size={Size.XS}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken
{...args}
name="ETH"
src=""
size={Size.LG}
borderColor={BorderColor.borderDefault}
borderSize={2}
/>
</BadgeWrapper>
<BadgeWrapper
badge={
<AvatarNetwork
name="ETH"
size={Size.SM}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken
{...args}
name="ETH"
src=""
size={Size.XL}
borderColor={BorderColor.borderDefault}
borderSize={2}
/>
</BadgeWrapper>
</Box>
</>
);
SizeStory.storyName = 'Size';

4
ui/components/component-library/avatar-token/avatar-token.test.js
View File

@ -73,10 +73,10 @@ describe('AvatarToken', () => {
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
`mm-text--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
`mm-text--color-${TextColor.errorDefault}`,
);
});
// background color

2
ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
data-testid="picker-network"
>
<div
class="box mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
>
I
</div>

2
ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
data-testid="tag-url"
>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-text--color-text-default box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-default"