From 06bb308b91e01baa95714f4f47f20018466651be Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Wed, 29 Mar 2023 13:53:59 +0530 Subject: [PATCH 01/17] Converted file extension from .js to .tsx --- .../avatar-base/avatar-base.constants.js | 9 -- .../avatar-base/avatar-base.js | 93 ------------------- ...ase.stories.js => avatar-base.stories.tsx} | 27 +++--- ...atar-base.test.js => avatar-base.test.tsx} | 11 ++- .../avatar-base/avatar-base.tsx | 57 ++++++++++++ .../avatar-base/avatar-base.types.ts | 23 +++++ .../component-library/avatar-base/index.js | 2 +- 7 files changed, 101 insertions(+), 121 deletions(-) delete mode 100644 ui/components/component-library/avatar-base/avatar-base.constants.js delete mode 100644 ui/components/component-library/avatar-base/avatar-base.js rename ui/components/component-library/avatar-base/{avatar-base.stories.js => avatar-base.stories.tsx} (79%) rename ui/components/component-library/avatar-base/{avatar-base.test.js => avatar-base.test.tsx} (89%) create mode 100644 ui/components/component-library/avatar-base/avatar-base.tsx create mode 100644 ui/components/component-library/avatar-base/avatar-base.types.ts diff --git a/ui/components/component-library/avatar-base/avatar-base.constants.js b/ui/components/component-library/avatar-base/avatar-base.constants.js deleted file mode 100644 index 6adba7a62994..000000000000 --- a/ui/components/component-library/avatar-base/avatar-base.constants.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Size } from '../../../helpers/constants/design-system'; - -export const AVATAR_BASE_SIZES = { - XS: Size.XS, - SM: Size.SM, - MD: Size.MD, - LG: Size.LG, - XL: Size.XL, -}; diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.js deleted file mode 100644 index 22a1e9553647..000000000000 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -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 = ({ - size = AVATAR_BASE_SIZES.MD, - children, - backgroundColor = BackgroundColor.backgroundAlternative, - borderColor = BorderColor.borderDefault, - color = TextColor.textDefault, - className, - ...props -}) => { - 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. - * Possible values could be 'AVATAR_BASE_SIZES.XS'(16px), 'AVATAR_BASE_SIZES.SM'(24px), 'AVATAR_BASE_SIZES.MD'(32px), 'AVATAR_BASE_SIZES.LG'(40px), 'AVATAR_BASE_SIZES.XL'(48px) - * Defaults to AVATAR_BASE_SIZES.MD - */ - size: PropTypes.oneOf(Object.values(AVATAR_BASE_SIZES)), - /** - * The children to be rendered inside the AvatarBase - */ - children: PropTypes.node, - /** - * The background color of the AvatarBase - * Defaults to Color.backgroundAlternative - */ - backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), - /** - * The background color of the AvatarBase - * Defaults to Color.borderDefault - */ - borderColor: PropTypes.oneOf(Object.values(BorderColor)), - /** - * The color of the text inside the AvatarBase - * Defaults to TextColor.textDefault - */ - color: PropTypes.oneOf(Object.values(TextColor)), - /** - * Additional classNames to be added to the AvatarToken - */ - className: PropTypes.string, - /** - * AvatarBase also accepts all Text props including variant and all Box props - */ - ...Text.propTypes, -}; diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.tsx similarity index 79% rename from ui/components/component-library/avatar-base/avatar-base.stories.js rename to ui/components/component-library/avatar-base/avatar-base.stories.tsx index 49cc6b8d3651..a02fbd274b6f 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.js +++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { AlignItems, @@ -13,7 +14,7 @@ import Box from '../../ui/box/box'; import { Icon, IconName } from '..'; import README from './README.mdx'; import { AvatarBase } from './avatar-base'; -import { AVATAR_BASE_SIZES } from './avatar-base.constants'; +import { AvatarBaseProps, AvatarBaseSizes } from './avatar-base.types'; const marginSizeKnobOptions = [ 0, @@ -44,7 +45,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(AVATAR_BASE_SIZES), + options: Object.values(AvatarBaseSizes), }, color: { options: Object.values(TextColor), @@ -85,29 +86,29 @@ export default { }, }, args: { - size: AVATAR_BASE_SIZES.MD, + size: AvatarBaseSizes.MD, color: TextColor.textDefault, backgroundColor: BackgroundColor.backgroundAlternative, borderColor: BorderColor.borderDefault, children: 'B', }, -}; +} as ComponentMeta; -export const DefaultStory = (args) => ; +export const DefaultStory = (args: AvatarBaseProps) => ; DefaultStory.storyName = 'Default'; -export const Size = (args) => ( +export const Size = (args: AvatarBaseProps) => ( - - - - - + + + + + ); -export const Children = (args) => ( +export const Children = (args: AvatarBaseProps) => ( @@ -129,7 +130,7 @@ export const Children = (args) => ( ); -export const ColorBackgroundColorAndBorderColor = (args) => ( +export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => ( B { it('should render correctly', () => { @@ -17,11 +18,11 @@ describe('AvatarBase', () => { it('should render with different size classes', () => { const { getByTestId } = render( <> - - - - - + + + + + , ); expect(getByTestId('avatar-base-xs')).toHaveClass( diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx new file mode 100644 index 000000000000..ad6467c91f80 --- /dev/null +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import classnames from 'classnames'; + +import { + BackgroundColor, + BorderColor, + TextColor, + DISPLAY, + JustifyContent, + AlignItems, + BorderRadius, + TextVariant, + TEXT_TRANSFORM, +} from '../../../helpers/constants/design-system'; + +import { Text } from '../text'; + +import { AvatarBaseProps, AvatarBaseSizes } from './avatar-base.types'; + +export const AvatarBase = ({ + size = AvatarBaseSizes.MD, + children, + backgroundColor = BackgroundColor.backgroundAlternative, + borderColor = BorderColor.borderDefault, + color = TextColor.textDefault, + className, + ...props +}: AvatarBaseProps) => { + let fallbackTextVariant; + + if (size === AvatarBaseSizes.LG || size === AvatarBaseSizes.XL) { + fallbackTextVariant = TextVariant.bodyLgMedium; + } else if (size === AvatarBaseSizes.SM || size === AvatarBaseSizes.MD) { + fallbackTextVariant = TextVariant.bodySm; + } else { + fallbackTextVariant = TextVariant.bodyXs; + } + return ( + + {children} + + ); +}; diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts new file mode 100644 index 000000000000..7cf66955238a --- /dev/null +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -0,0 +1,23 @@ +import { + BackgroundColor, + BorderColor, + Size, + TextColor, +} from '../../../helpers/constants/design-system'; + +export enum AvatarBaseSizes { + XS = Size.XS, + SM = Size.SM, + MD = Size.MD, + LG = Size.LG, + XL = Size.XL, +} + +export interface AvatarBaseProps { + size?: AvatarBaseSizes; + children?: React.ReactNode; + backgroundColor?: BackgroundColor; + borderColor?: BorderColor; + color?: TextColor; + className?: string; +} diff --git a/ui/components/component-library/avatar-base/index.js b/ui/components/component-library/avatar-base/index.js index 5cd6109d9e85..7e27e1d8619c 100644 --- a/ui/components/component-library/avatar-base/index.js +++ b/ui/components/component-library/avatar-base/index.js @@ -1,2 +1,2 @@ export { AvatarBase } from './avatar-base'; -export { AVATAR_BASE_SIZES } from './avatar-base.constants'; +export { AvatarBaseSizes } from './avatar-base.types'; From dab35ad70ad73b2d1a35992dae7d9b8e950cd41b Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Fri, 7 Apr 2023 01:15:09 +0530 Subject: [PATCH 02/17] Updated README docs to match the enums. Resolved type errors --- .../component-library/avatar-base/README.mdx | 14 +++++++------- .../avatar-base/avatar-base.stories.tsx | 4 ++-- .../avatar-base/avatar-base.test.tsx | 15 ++++++++++----- .../component-library/avatar-base/avatar-base.tsx | 9 ++++----- .../avatar-base/{index.js => index.ts} | 0 5 files changed, 23 insertions(+), 19 deletions(-) rename ui/components/component-library/avatar-base/{index.js => index.ts} (100%) diff --git a/ui/components/component-library/avatar-base/README.mdx b/ui/components/component-library/avatar-base/README.mdx index ff0e396f6a17..7864b741ab46 100644 --- a/ui/components/component-library/avatar-base/README.mdx +++ b/ui/components/component-library/avatar-base/README.mdx @@ -39,13 +39,13 @@ The text styles of the `AvatarBase` is based on the `size` prop. To override thi ```jsx -import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base'; -import { AvatarBase } from '../../component-library'; - - - - - +import { AvatarBaseSizes } from '../ui/component-library/avatar-base/avatar-base.types'; +import { AvatarBase } from '../../component-library/avatar-base'; + + + + + ``` ### Children diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx index a02fbd274b6f..befb391b24bb 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx @@ -6,7 +6,7 @@ import { TextColor, BackgroundColor, BorderColor, - Color, + IconColor, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; @@ -125,7 +125,7 @@ export const Children = (args: AvatarBaseProps) => ( backgroundColor={BackgroundColor.infoMuted} borderColor={BorderColor.infoMuted} > - + ); diff --git a/ui/components/component-library/avatar-base/avatar-base.test.tsx b/ui/components/component-library/avatar-base/avatar-base.test.tsx index ef3bc5c6f731..6bd7f6cbb3c2 100644 --- a/ui/components/component-library/avatar-base/avatar-base.test.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.test.tsx @@ -2,7 +2,12 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import { Color, TextColor } from '../../../helpers/constants/design-system'; +import { + BackgroundColor, + BorderColor, + Color, + TextColor, +} from '../../../helpers/constants/design-system'; import { AvatarBase } from './avatar-base'; import { AvatarBaseSizes } from './avatar-base.types'; @@ -85,11 +90,11 @@ describe('AvatarBase', () => { const { getByTestId } = render( <> , @@ -106,11 +111,11 @@ describe('AvatarBase', () => { const { getByTestId } = render( <> , diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index ad6467c91f80..f9714d553fb2 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -10,10 +10,9 @@ import { AlignItems, BorderRadius, TextVariant, - TEXT_TRANSFORM, } from '../../../helpers/constants/design-system'; -import { Text } from '../text'; +import { Text, ValidTag } from '../text'; import { AvatarBaseProps, AvatarBaseSizes } from './avatar-base.types'; @@ -23,7 +22,7 @@ export const AvatarBase = ({ backgroundColor = BackgroundColor.backgroundAlternative, borderColor = BorderColor.borderDefault, color = TextColor.textDefault, - className, + className = '', ...props }: AvatarBaseProps) => { let fallbackTextVariant; @@ -42,13 +41,13 @@ export const AvatarBase = ({ `mm-avatar-base--size-${size}`, className, )} - as="div" + as={ValidTag.Div} display={DISPLAY.FLEX} justifyContent={JustifyContent.center} alignItems={AlignItems.center} borderRadius={BorderRadius.full} variant={fallbackTextVariant} - textTransform={TEXT_TRANSFORM.UPPERCASE} + textTransform="UPPERCASE" {...{ backgroundColor, borderColor, color, ...props }} > {children} diff --git a/ui/components/component-library/avatar-base/index.js b/ui/components/component-library/avatar-base/index.ts similarity index 100% rename from ui/components/component-library/avatar-base/index.js rename to ui/components/component-library/avatar-base/index.ts From 827c0feec0a998b25b8ddb82463d2890d9eb0661 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Fri, 7 Apr 2023 15:16:56 +0530 Subject: [PATCH 03/17] Updated AvatarBaseSizes enum values to string literals --- .../avatar-base/avatar-base.types.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts index 7cf66955238a..24abb64d5e0e 100644 --- a/ui/components/component-library/avatar-base/avatar-base.types.ts +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -1,16 +1,15 @@ import { BackgroundColor, BorderColor, - Size, TextColor, } from '../../../helpers/constants/design-system'; export enum AvatarBaseSizes { - XS = Size.XS, - SM = Size.SM, - MD = Size.MD, - LG = Size.LG, - XL = Size.XL, + XS = 'xs', + SM = 'sm', + MD = 'md', + LG = 'lg', + XL = 'xl', } export interface AvatarBaseProps { From 1171f22438bbf246860064ced72e759fefe70890 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Tue, 11 Apr 2023 02:59:04 +0530 Subject: [PATCH 04/17] Added TEXT_TRANSFORM.UPPERCASE as default value of textTransform in base file --- ui/components/component-library/avatar-base/avatar-base.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index f9714d553fb2..5ee380bd70e2 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -10,7 +10,8 @@ import { AlignItems, BorderRadius, TextVariant, -} from '../../../helpers/constants/design-system'; + TEXT_TRANSFORM, +} from "../../../helpers/constants/design-system"; import { Text, ValidTag } from '../text'; @@ -47,7 +48,7 @@ export const AvatarBase = ({ alignItems={AlignItems.center} borderRadius={BorderRadius.full} variant={fallbackTextVariant} - textTransform="UPPERCASE" + textTransform={TEXT_TRANSFORM.UPPERCASE} {...{ backgroundColor, borderColor, color, ...props }} > {children} From 359bca94eddaef0fffcd8bdab20241c470e690c0 Mon Sep 17 00:00:00 2001 From: legobeat <109787230+legobeat@users.noreply.github.com> Date: Tue, 11 Apr 2023 06:40:11 +0900 Subject: [PATCH 05/17] lint fix --- ui/components/component-library/avatar-base/avatar-base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index 5ee380bd70e2..8db443ee6ff3 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -11,7 +11,7 @@ import { BorderRadius, TextVariant, TEXT_TRANSFORM, -} from "../../../helpers/constants/design-system"; +} from '../../../helpers/constants/design-system'; import { Text, ValidTag } from '../text'; From ad4188bd4e2a708d602d1fded1de63383c98f5b7 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Tue, 11 Apr 2023 03:33:51 +0530 Subject: [PATCH 06/17] Solved liniting errors in avatar-base --- ui/components/component-library/avatar-base/avatar-base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index 5ee380bd70e2..8db443ee6ff3 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -11,7 +11,7 @@ import { BorderRadius, TextVariant, TEXT_TRANSFORM, -} from "../../../helpers/constants/design-system"; +} from '../../../helpers/constants/design-system'; import { Text, ValidTag } from '../text'; From ef6c62e85e8ffb1b6c1fccba509f12704dbda2da Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Tue, 11 Apr 2023 21:41:23 +0530 Subject: [PATCH 07/17] Made enum more consistent, added desc for AvatarBaseProps --- .../avatar-base/avatar-base.stories.tsx | 16 ++++---- .../avatar-base/avatar-base.test.tsx | 12 +++--- .../avatar-base/avatar-base.tsx | 10 ++--- .../avatar-base/avatar-base.types.ts | 41 +++++++++++++++---- .../component-library/avatar-base/index.ts | 2 +- 5 files changed, 54 insertions(+), 27 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx index befb391b24bb..e87d3baeb887 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx @@ -14,7 +14,7 @@ import Box from '../../ui/box/box'; import { Icon, IconName } from '..'; import README from './README.mdx'; import { AvatarBase } from './avatar-base'; -import { AvatarBaseProps, AvatarBaseSizes } from './avatar-base.types'; +import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types'; const marginSizeKnobOptions = [ 0, @@ -45,7 +45,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(AvatarBaseSizes), + options: Object.values(AvatarBaseSize), }, color: { options: Object.values(TextColor), @@ -86,7 +86,7 @@ export default { }, }, args: { - size: AvatarBaseSizes.MD, + size: AvatarBaseSize.Md, color: TextColor.textDefault, backgroundColor: BackgroundColor.backgroundAlternative, borderColor: BorderColor.borderDefault, @@ -100,11 +100,11 @@ DefaultStory.storyName = 'Default'; export const Size = (args: AvatarBaseProps) => ( - - - - - + + + + + ); diff --git a/ui/components/component-library/avatar-base/avatar-base.test.tsx b/ui/components/component-library/avatar-base/avatar-base.test.tsx index 6bd7f6cbb3c2..3804c7b1587b 100644 --- a/ui/components/component-library/avatar-base/avatar-base.test.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.test.tsx @@ -10,7 +10,7 @@ import { } from '../../../helpers/constants/design-system'; import { AvatarBase } from './avatar-base'; -import { AvatarBaseSizes } from './avatar-base.types'; +import { AvatarBaseSize } from './avatar-base.types'; describe('AvatarBase', () => { it('should render correctly', () => { @@ -23,11 +23,11 @@ describe('AvatarBase', () => { it('should render with different size classes', () => { const { getByTestId } = render( <> - - - - - + + + + + , ); expect(getByTestId('avatar-base-xs')).toHaveClass( diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index 8db443ee6ff3..8c22a8cbbf71 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -15,10 +15,10 @@ import { import { Text, ValidTag } from '../text'; -import { AvatarBaseProps, AvatarBaseSizes } from './avatar-base.types'; +import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types'; export const AvatarBase = ({ - size = AvatarBaseSizes.MD, + size = AvatarBaseSize.Md, children, backgroundColor = BackgroundColor.backgroundAlternative, borderColor = BorderColor.borderDefault, @@ -28,9 +28,9 @@ export const AvatarBase = ({ }: AvatarBaseProps) => { let fallbackTextVariant; - if (size === AvatarBaseSizes.LG || size === AvatarBaseSizes.XL) { + if (size === AvatarBaseSize.Lg || size === AvatarBaseSize.Xl) { fallbackTextVariant = TextVariant.bodyLgMedium; - } else if (size === AvatarBaseSizes.SM || size === AvatarBaseSizes.MD) { + } else if (size === AvatarBaseSize.Sm || size === AvatarBaseSize.Md) { fallbackTextVariant = TextVariant.bodySm; } else { fallbackTextVariant = TextVariant.bodyXs; @@ -48,7 +48,7 @@ export const AvatarBase = ({ alignItems={AlignItems.center} borderRadius={BorderRadius.full} variant={fallbackTextVariant} - textTransform={TEXT_TRANSFORM.UPPERCASE} + textTransform={TEXT_TRANSFORM.UPPERCASE as 'UPPERCASE'} {...{ backgroundColor, borderColor, color, ...props }} > {children} diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts index 24abb64d5e0e..afeb86f1522a 100644 --- a/ui/components/component-library/avatar-base/avatar-base.types.ts +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -4,19 +4,46 @@ import { TextColor, } from '../../../helpers/constants/design-system'; -export enum AvatarBaseSizes { - XS = 'xs', - SM = 'sm', - MD = 'md', - LG = 'lg', - XL = 'xl', +export enum AvatarBaseSize { + Xs = 'xs', + Sm = 'sm', + Md = 'md', + Lg = 'lg', + Xl = 'xl', } export interface AvatarBaseProps { - size?: AvatarBaseSizes; + /** + * The size of the AvatarBase. + * Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px), + * 'AvatarBaseSize.Md'(32px), 'AvatarBaseSize.Lg'(40px), 'AvatarBaseSize.Xl'(48px) + * Defaults to AvatarBaseSize.Md + */ + size?: AvatarBaseSize; + /** + * The children to be rendered inside the AvatarBase + */ children?: React.ReactNode; + /** + * The background color of the AvatarBase + * Defaults to Color.backgroundAlternative + */ backgroundColor?: BackgroundColor; + /** + * The background color of the AvatarBase + * Defaults to Color.borderDefault + */ borderColor?: BorderColor; + /** + * The color of the text inside the AvatarBase + * Defaults to TextColor.textDefault + */ color?: TextColor; + /** + * Additional classNames to be added to the AvatarBase + */ className?: string; + /** + * AvatarBase also accepts all Text props including variant and all Box props + */ } diff --git a/ui/components/component-library/avatar-base/index.ts b/ui/components/component-library/avatar-base/index.ts index 7e27e1d8619c..03a508e51baf 100644 --- a/ui/components/component-library/avatar-base/index.ts +++ b/ui/components/component-library/avatar-base/index.ts @@ -1,2 +1,2 @@ export { AvatarBase } from './avatar-base'; -export { AvatarBaseSizes } from './avatar-base.types'; +export { AvatarBaseSize } from './avatar-base.types'; From 678220b947accbe9a6fe51bf79af28a51ba8e788 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Wed, 19 Apr 2023 15:02:47 +0530 Subject: [PATCH 08/17] Updated snapshots of AvatarBase and exported AvatarBaseProps in index.ts --- .../{avatar-base.test.js.snap => avatar-base.test.tsx.snap} | 0 ui/components/component-library/avatar-base/index.ts | 1 + 2 files changed, 1 insertion(+) rename ui/components/component-library/avatar-base/__snapshots__/{avatar-base.test.js.snap => avatar-base.test.tsx.snap} (100%) 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.tsx.snap similarity index 100% rename from ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap rename to ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.tsx.snap diff --git a/ui/components/component-library/avatar-base/index.ts b/ui/components/component-library/avatar-base/index.ts index 03a508e51baf..e1295f32a341 100644 --- a/ui/components/component-library/avatar-base/index.ts +++ b/ui/components/component-library/avatar-base/index.ts @@ -1,2 +1,3 @@ export { AvatarBase } from './avatar-base'; export { AvatarBaseSize } from './avatar-base.types'; +export type { AvatarBaseProps } from './avatar-base.types'; From 1403235ee2fe9dd2caa5dc48f23a8f8ad44793ec Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Thu, 20 Apr 2023 10:00:11 +0530 Subject: [PATCH 09/17] Made textTransform property accept right values in avatar-base.tsx --- ui/components/component-library/avatar-base/avatar-base.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index 8c22a8cbbf71..201d2798df6c 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -10,7 +10,7 @@ import { AlignItems, BorderRadius, TextVariant, - TEXT_TRANSFORM, + TextTransform, } from '../../../helpers/constants/design-system'; import { Text, ValidTag } from '../text'; @@ -48,7 +48,7 @@ export const AvatarBase = ({ alignItems={AlignItems.center} borderRadius={BorderRadius.full} variant={fallbackTextVariant} - textTransform={TEXT_TRANSFORM.UPPERCASE as 'UPPERCASE'} + textTransform={TextTransform.Uppercase} {...{ backgroundColor, borderColor, color, ...props }} > {children} From 8df455e32281e83a6806773f9f1cc9949ad8db56 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Thu, 20 Apr 2023 16:08:36 +0530 Subject: [PATCH 10/17] Adding temporary changed extensions --- .../avatar-base/{avatar-base.tsx => avatar-base.js} | 0 .../{avatar-base.stories.tsx => avatar-base.stories.js} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename ui/components/component-library/avatar-base/{avatar-base.tsx => avatar-base.js} (100%) rename ui/components/component-library/avatar-base/{avatar-base.stories.tsx => avatar-base.stories.js} (100%) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.js similarity index 100% rename from ui/components/component-library/avatar-base/avatar-base.tsx rename to ui/components/component-library/avatar-base/avatar-base.js diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.js similarity index 100% rename from ui/components/component-library/avatar-base/avatar-base.stories.tsx rename to ui/components/component-library/avatar-base/avatar-base.stories.js From 2716e6348f23e6124dc659129b8dce3355659a1b Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Thu, 20 Apr 2023 16:12:09 +0530 Subject: [PATCH 11/17] Reverted files back to tsx and resolved conflicts --- .../{avatar-base.stories.js => avatar-base.stories.tsx} | 0 .../avatar-base/{avatar-base.js => avatar-base.tsx} | 1 - .../component-library/avatar-base/avatar-base.types.ts | 5 +++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename ui/components/component-library/avatar-base/{avatar-base.stories.js => avatar-base.stories.tsx} (100%) rename ui/components/component-library/avatar-base/{avatar-base.js => avatar-base.tsx} (99%) diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.tsx similarity index 100% rename from ui/components/component-library/avatar-base/avatar-base.stories.js rename to ui/components/component-library/avatar-base/avatar-base.stories.tsx diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.tsx similarity index 99% rename from ui/components/component-library/avatar-base/avatar-base.js rename to ui/components/component-library/avatar-base/avatar-base.tsx index fa78d1dca06d..201d2798df6c 100644 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -5,7 +5,6 @@ import { BackgroundColor, BorderColor, TextColor, - IconColor, DISPLAY, JustifyContent, AlignItems, diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts index afeb86f1522a..54fb28bc7196 100644 --- a/ui/components/component-library/avatar-base/avatar-base.types.ts +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -1,8 +1,9 @@ import { BackgroundColor, BorderColor, + IconColor, TextColor, -} from '../../../helpers/constants/design-system'; +} from "../../../helpers/constants/design-system"; export enum AvatarBaseSize { Xs = 'xs', @@ -38,7 +39,7 @@ export interface AvatarBaseProps { * The color of the text inside the AvatarBase * Defaults to TextColor.textDefault */ - color?: TextColor; + color?: TextColor | IconColor; /** * Additional classNames to be added to the AvatarBase */ From a594ce421e6fa046e735e14823c82b5bbc0b780c Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Thu, 20 Apr 2023 16:13:43 +0530 Subject: [PATCH 12/17] Solved linting errors --- .../component-library/avatar-base/avatar-base.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts index 54fb28bc7196..e2c5a7ea237d 100644 --- a/ui/components/component-library/avatar-base/avatar-base.types.ts +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -3,7 +3,7 @@ import { BorderColor, IconColor, TextColor, -} from "../../../helpers/constants/design-system"; +} from '../../../helpers/constants/design-system'; export enum AvatarBaseSize { Xs = 'xs', From e2898d708d95a0049174bdd525236febd7da04c6 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Thu, 20 Apr 2023 16:38:31 +0530 Subject: [PATCH 13/17] AvatarBaseProps now extends TextProps --- .../avatar-base/avatar-base.stories.tsx | 10 +++++----- .../avatar-base/avatar-base.types.ts | 11 ++++------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx index 85852edde464..20c6b97fe89f 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx @@ -100,11 +100,11 @@ DefaultStory.storyName = 'Default'; export const Size = (args: AvatarBaseProps) => ( - - - - - + + + + + ); diff --git a/ui/components/component-library/avatar-base/avatar-base.types.ts b/ui/components/component-library/avatar-base/avatar-base.types.ts index e2c5a7ea237d..11bc51ac7453 100644 --- a/ui/components/component-library/avatar-base/avatar-base.types.ts +++ b/ui/components/component-library/avatar-base/avatar-base.types.ts @@ -1,9 +1,9 @@ import { BackgroundColor, BorderColor, - IconColor, TextColor, } from '../../../helpers/constants/design-system'; +import { TextProps } from '../text'; export enum AvatarBaseSize { Xs = 'xs', @@ -13,7 +13,7 @@ export enum AvatarBaseSize { Xl = 'xl', } -export interface AvatarBaseProps { +export interface AvatarBaseProps extends TextProps { /** * The size of the AvatarBase. * Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px), @@ -24,7 +24,7 @@ export interface AvatarBaseProps { /** * The children to be rendered inside the AvatarBase */ - children?: React.ReactNode; + children: React.ReactNode; /** * The background color of the AvatarBase * Defaults to Color.backgroundAlternative @@ -39,12 +39,9 @@ export interface AvatarBaseProps { * The color of the text inside the AvatarBase * Defaults to TextColor.textDefault */ - color?: TextColor | IconColor; + color?: TextColor; /** * Additional classNames to be added to the AvatarBase */ className?: string; - /** - * AvatarBase also accepts all Text props including variant and all Box props - */ } From fafdfb89baadec679e4a99c92b3b2f46fb1a6120 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Sat, 22 Apr 2023 00:40:58 +0530 Subject: [PATCH 14/17] Changing extension to resolve conflict --- .../avatar-base/{avatar-base.tsx => avatar-base.js} | 0 .../avatar-base/{avatar-base.test.tsx => avatar-base.test.js} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename ui/components/component-library/avatar-base/{avatar-base.tsx => avatar-base.js} (100%) rename ui/components/component-library/avatar-base/{avatar-base.test.tsx => avatar-base.test.js} (100%) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.js similarity index 100% rename from ui/components/component-library/avatar-base/avatar-base.tsx rename to ui/components/component-library/avatar-base/avatar-base.js diff --git a/ui/components/component-library/avatar-base/avatar-base.test.tsx b/ui/components/component-library/avatar-base/avatar-base.test.js similarity index 100% rename from ui/components/component-library/avatar-base/avatar-base.test.tsx rename to ui/components/component-library/avatar-base/avatar-base.test.js From b6c4ebcd74a407e8e6cf909f4e3eca6c424ad302 Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Sat, 22 Apr 2023 00:57:20 +0530 Subject: [PATCH 15/17] Reverted extensions back to tsx after resolving conflicts --- .../avatar-base/{avatar-base.test.js => avatar-base.test.tsx} | 0 .../avatar-base/{avatar-base.js => avatar-base.tsx} | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename ui/components/component-library/avatar-base/{avatar-base.test.js => avatar-base.test.tsx} (100%) rename ui/components/component-library/avatar-base/{avatar-base.js => avatar-base.tsx} (99%) diff --git a/ui/components/component-library/avatar-base/avatar-base.test.js b/ui/components/component-library/avatar-base/avatar-base.test.tsx similarity index 100% rename from ui/components/component-library/avatar-base/avatar-base.test.js rename to ui/components/component-library/avatar-base/avatar-base.test.tsx diff --git a/ui/components/component-library/avatar-base/avatar-base.js b/ui/components/component-library/avatar-base/avatar-base.tsx similarity index 99% rename from ui/components/component-library/avatar-base/avatar-base.js rename to ui/components/component-library/avatar-base/avatar-base.tsx index 44b6f97a6e0b..201d2798df6c 100644 --- a/ui/components/component-library/avatar-base/avatar-base.js +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -54,4 +54,4 @@ export const AvatarBase = ({ {children} ); -}; \ No newline at end of file +}; From 1f3f568aea5fc7017ee144e87c6c7e7e468542dc Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Thu, 27 Apr 2023 10:55:03 +0530 Subject: [PATCH 16/17] Added forwardRef in AvatarBase --- .../avatar-base/avatar-base.tsx | 82 ++++++++++--------- 1 file changed, 44 insertions(+), 38 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx index 201d2798df6c..e2dde68709ad 100644 --- a/ui/components/component-library/avatar-base/avatar-base.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef, Ref } from 'react'; import classnames from 'classnames'; import { @@ -17,41 +17,47 @@ import { Text, ValidTag } from '../text'; import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types'; -export const AvatarBase = ({ - size = AvatarBaseSize.Md, - children, - backgroundColor = BackgroundColor.backgroundAlternative, - borderColor = BorderColor.borderDefault, - color = TextColor.textDefault, - className = '', - ...props -}: AvatarBaseProps) => { - let fallbackTextVariant; +export const AvatarBase = forwardRef( + ( + { + size = AvatarBaseSize.Md, + children, + backgroundColor = BackgroundColor.backgroundAlternative, + borderColor = BorderColor.borderDefault, + color = TextColor.textDefault, + className = '', + ...props + }: AvatarBaseProps, + ref: Ref, + ) => { + let fallbackTextVariant; - if (size === AvatarBaseSize.Lg || size === AvatarBaseSize.Xl) { - fallbackTextVariant = TextVariant.bodyLgMedium; - } else if (size === AvatarBaseSize.Sm || size === AvatarBaseSize.Md) { - fallbackTextVariant = TextVariant.bodySm; - } else { - fallbackTextVariant = TextVariant.bodyXs; - } - return ( - - {children} - - ); -}; + if (size === AvatarBaseSize.Lg || size === AvatarBaseSize.Xl) { + fallbackTextVariant = TextVariant.bodyLgMedium; + } else if (size === AvatarBaseSize.Sm || size === AvatarBaseSize.Md) { + fallbackTextVariant = TextVariant.bodySm; + } else { + fallbackTextVariant = TextVariant.bodyXs; + } + return ( + + {children} + + ); + }, +); From 9b9d727e969be6c98a7fd40ddfa1d99e92a99a4e Mon Sep 17 00:00:00 2001 From: Suryansh Anand Date: Sat, 29 Apr 2023 10:57:31 +0530 Subject: [PATCH 17/17] Updated import name of AvatarBaseSize in README.mdx. Removed empty children attribute from AvatarBase storybook file --- .../component-library/avatar-base/README.mdx | 12 ++++++------ .../avatar-base/avatar-base.stories.tsx | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ui/components/component-library/avatar-base/README.mdx b/ui/components/component-library/avatar-base/README.mdx index 88a0a8c54bc0..da27d6677790 100644 --- a/ui/components/component-library/avatar-base/README.mdx +++ b/ui/components/component-library/avatar-base/README.mdx @@ -39,13 +39,13 @@ The text styles of the `AvatarBase` is based on the `size` prop. To override thi ```jsx -import { AvatarBaseSizes } from '../ui/component-library/avatar-base/avatar-base.types'; +import { AvatarBaseSize } from '../ui/component-library/avatar-base/avatar-base.types'; import { AvatarBase } from '../../component-library/avatar-base'; - - - - - + + + + + ``` ### Children diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx index 20c6b97fe89f..85852edde464 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx +++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx @@ -100,11 +100,11 @@ DefaultStory.storyName = 'Default'; export const Size = (args: AvatarBaseProps) => ( - - - - - + + + + + );