-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrates avatar base to TypeScript (#18494)
* Converted file extension from .js to .tsx * Updated README docs to match the enums. Resolved type errors * Updated AvatarBaseSizes enum values to string literals * Added TEXT_TRANSFORM.UPPERCASE as default value of textTransform in base file * lint fix * Solved liniting errors in avatar-base * Made enum more consistent, added desc for AvatarBaseProps * Updated snapshots of AvatarBase and exported AvatarBaseProps in index.ts * Made textTransform property accept right values in avatar-base.tsx * Adding temporary changed extensions * Reverted files back to tsx and resolved conflicts * Solved linting errors * AvatarBaseProps now extends TextProps * Changing extension to resolve conflict * Reverted extensions back to tsx after resolving conflicts * Added forwardRef in AvatarBase * Updated import name of AvatarBaseSize in README.mdx. Removed empty children attribute from AvatarBase storybook file --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Brad Decker <bhdecker84@gmail.com>
- Loading branch information
3 people
committed
May 4, 2023
1 parent
924df55
commit c92d738
Showing
10 changed files
with
152 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
9 changes: 0 additions & 9 deletions
9
ui/components/component-library/avatar-base/avatar-base.constants.js
This file was deleted.
Oops, something went wrong.
106 changes: 0 additions & 106 deletions
106
ui/components/component-library/avatar-base/avatar-base.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
ui/components/component-library/avatar-base/avatar-base.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React, { forwardRef, Ref } from 'react'; | ||
| import classnames from 'classnames'; | ||
|
|
||
| import { | ||
| BackgroundColor, | ||
| BorderColor, | ||
| TextColor, | ||
| DISPLAY, | ||
| JustifyContent, | ||
| AlignItems, | ||
| BorderRadius, | ||
| TextVariant, | ||
| TextTransform, | ||
| } from '../../../helpers/constants/design-system'; | ||
|
|
||
| import { Text, ValidTag } from '../text'; | ||
|
|
||
| import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types'; | ||
|
|
||
| export const AvatarBase = forwardRef( | ||
| ( | ||
| { | ||
| size = AvatarBaseSize.Md, | ||
| children, | ||
| backgroundColor = BackgroundColor.backgroundAlternative, | ||
| borderColor = BorderColor.borderDefault, | ||
| color = TextColor.textDefault, | ||
| className = '', | ||
| ...props | ||
| }: AvatarBaseProps, | ||
| ref: Ref<HTMLElement>, | ||
| ) => { | ||
| 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 ( | ||
| <Text | ||
| className={classnames( | ||
| 'mm-avatar-base', | ||
| `mm-avatar-base--size-${size}`, | ||
| className, | ||
| )} | ||
| ref={ref} | ||
| as={ValidTag.Div} | ||
| display={DISPLAY.FLEX} | ||
| justifyContent={JustifyContent.center} | ||
| alignItems={AlignItems.center} | ||
| borderRadius={BorderRadius.full} | ||
| variant={fallbackTextVariant} | ||
| textTransform={TextTransform.Uppercase} | ||
| {...{ backgroundColor, borderColor, color, ...props }} | ||
| > | ||
| {children} | ||
| </Text> | ||
| ); | ||
| }, | ||
| ); |
47 changes: 47 additions & 0 deletions
47
ui/components/component-library/avatar-base/avatar-base.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { | ||
| BackgroundColor, | ||
| BorderColor, | ||
| TextColor, | ||
| } from '../../../helpers/constants/design-system'; | ||
| import { TextProps } from '../text'; | ||
|
|
||
| export enum AvatarBaseSize { | ||
| Xs = 'xs', | ||
| Sm = 'sm', | ||
| Md = 'md', | ||
| Lg = 'lg', | ||
| Xl = 'xl', | ||
| } | ||
|
|
||
| export interface AvatarBaseProps extends TextProps { | ||
| /** | ||
| * 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; | ||
| } |
Oops, something went wrong.