From 2a70217ef0f9ae82fc9590dc72451ae0b7553f82 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 16 Mar 2023 16:32:47 -0700 Subject: [PATCH] Updating AvatarBase to use Text component instead of Box and adding font size logic based on avatar size --- .../component-library/avatar-base/README.mdx | 2 + .../__snapshots__/avatar-base.test.js.snap | 2 +- .../avatar-base/avatar-base.js | 56 +++-- .../avatar-base/avatar-base.scss | 5 - .../avatar-base/avatar-base.stories.js | 3 +- .../avatar-base/avatar-base.test.js | 32 +-- .../avatar-network/README.mdx | 4 + .../avatar-network/avatar-network.stories.js | 30 ++- .../component-library/avatar-token/README.mdx | 4 + .../avatar-token/avatar-token.stories.js | 228 +++++++++++++++++- 10 files changed, 312 insertions(+), 54 deletions(-) diff --git a/ui/components/component-library/avatar-base/README.mdx b/ui/components/component-library/avatar-base/README.mdx index 77d5055d58cc..b1391057821e 100644 --- a/ui/components/component-library/avatar-base/README.mdx +++ b/ui/components/component-library/avatar-base/README.mdx @@ -32,6 +32,8 @@ Possible sizes include: Defaults to `md` +The font-size of the `AvatarBase` is based on the size prop to override the font-size use the `variant` prop. + diff --git a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap index 004fa7eadb13..91206391f8f1 100644 --- a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap +++ b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap @@ -3,7 +3,7 @@ exports[`AvatarBase should render correctly 1`] = `
diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js index 8b6da1f0ed6f..22a1e9553647 100644 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ b/ui/components/component-library/avatar-base/avatar-base.js @@ -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 -}) => ( - - {children} - -); +}) => { + 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 ( + + {children} + + ); +}; 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, }; diff --git a/ui/components/component-library/avatar-base/avatar-base.scss b/ui/components/component-library/avatar-base/avatar-base.scss index 257a897c77c5..28a094e012e7 100644 --- a/ui/components/component-library/avatar-base/avatar-base.scss +++ b/ui/components/component-library/avatar-base/avatar-base.scss @@ -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; } diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js index a2bfd45bad9c..9515ca09f36a 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.js +++ b/ui/components/component-library/avatar-base/avatar-base.stories.js @@ -89,10 +89,11 @@ export default { color: TextColor.textDefault, backgroundColor: BackgroundColor.backgroundAlternative, borderColor: BorderColor.borderDefault, + children: 'B', }, }; -export const DefaultStory = (args) => B; +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; diff --git a/ui/components/component-library/avatar-base/avatar-base.test.js b/ui/components/component-library/avatar-base/avatar-base.test.js index 9137f3a755f2..cf0058dc9307 100644 --- a/ui/components/component-library/avatar-base/avatar-base.test.js +++ b/ui/components/component-library/avatar-base/avatar-base.test.js @@ -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( <> , ); - 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( <> , diff --git a/ui/components/component-library/avatar-network/README.mdx b/ui/components/component-library/avatar-network/README.mdx index 92ad2e0e979b..a301ee369b29 100644 --- a/ui/components/component-library/avatar-network/README.mdx +++ b/ui/components/component-library/avatar-network/README.mdx @@ -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. + @@ -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 the `fallbackTextProps` to access the `Text` component props of the fallback text. + diff --git a/ui/components/component-library/avatar-network/avatar-network.stories.js b/ui/components/component-library/avatar-network/avatar-network.stories.js index 28ba38c7a166..811864f69bb2 100644 --- a/ui/components/component-library/avatar-network/avatar-network.stories.js +++ b/ui/components/component-library/avatar-network/avatar-network.stories.js @@ -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) => ( - - - - - - - + <> + + + + + + + + + + + + + + + ); SizeStory.storyName = 'Size'; diff --git a/ui/components/component-library/avatar-token/README.mdx b/ui/components/component-library/avatar-token/README.mdx index 63e7e5b14acf..6b80fd6a79e3 100644 --- a/ui/components/component-library/avatar-token/README.mdx +++ b/ui/components/component-library/avatar-token/README.mdx @@ -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. + @@ -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 the `fallbackTextProps` to access the `Text` component props of the fallback text. + diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.js index a4001383140c..e89756fddfcf 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.js +++ b/ui/components/component-library/avatar-token/avatar-token.stories.js @@ -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) => ( - - - - - - - + <> + + + + + + + + + + + + + + + + Sizes with{' '} + + AvatarNetwork + {' '} + and{' '} + + BadgeWrapper + {' '} + components + + + + } + > + + + + } + > + + + + } + > + + + + } + > + + + + } + > + + + + + + } + > + + + + } + > + + + + } + > + + + + } + > + + + + } + > + + + + ); SizeStory.storyName = 'Size';