feat: adding avatar icon to design system react #420
+480
−0
Conversation
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
georgewrmarshall
force-pushed
the
feat/370/avatar-icon
branch
from
22409f2 to
05ca7f6
Compare
georgewrmarshall
commented
Feb 5, 2025
Comment on lines
+6
to
+15
| export const AVATAR_ICON_SIZE_TO_ICON_SIZE_CLASSNAME_MAP: Record< | ||
| AvatarIconSize, | ||
| IconSize | ||
| > = { | ||
| [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon | ||
| [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon | ||
| [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon | ||
| [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon | ||
| [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon | ||
| }; |
There was a problem hiding this comment.
Maps avatar size to icon size
georgewrmarshall
commented
Feb 5, 2025
Comment on lines
+17
to
+41
| export const AVATAR_ICON_SEVERITY_CLASSNAME_MAP: Record< | ||
| AvatarIconSeverity, | ||
| { background: string; iconColor: IconColor } | ||
| > = { | ||
| [AvatarIconSeverity.Default]: { | ||
| background: 'bg-background-muted', | ||
| iconColor: IconColor.IconAlternative, | ||
| }, | ||
| [AvatarIconSeverity.Info]: { | ||
| background: 'bg-info-muted', | ||
| iconColor: IconColor.InfoDefault, | ||
| }, | ||
| [AvatarIconSeverity.Success]: { | ||
| background: 'bg-success-muted', | ||
| iconColor: IconColor.SuccessDefault, | ||
| }, | ||
| [AvatarIconSeverity.Error]: { | ||
| background: 'bg-error-muted', | ||
| iconColor: IconColor.ErrorDefault, | ||
| }, | ||
| [AvatarIconSeverity.Warning]: { | ||
| background: 'bg-warning-muted', | ||
| iconColor: IconColor.WarningDefault, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Maps severity prop to icon color and background color
georgewrmarshall
commented
Feb 5, 2025
Comment on lines
+43
to
+52
| export const AVATAR_ICON_TO_AVATAR_BASE_SIZE_MAP: Record< | ||
| AvatarIconSize, | ||
| AvatarBaseSize | ||
| > = { | ||
| [AvatarIconSize.Xs]: AvatarBaseSize.Xs, | ||
| [AvatarIconSize.Sm]: AvatarBaseSize.Sm, | ||
| [AvatarIconSize.Md]: AvatarBaseSize.Md, | ||
| [AvatarIconSize.Lg]: AvatarBaseSize.Lg, | ||
| [AvatarIconSize.Xl]: AvatarBaseSize.Xl, | ||
| }; |
There was a problem hiding this comment.
Mapping the new AvatarIconSize enum to AvatarBaseSize. The circular dependency issue has finally caught up with me, so I'll stop exporting as—it seems to be causing circular dependencies and undefined issues.
georgewrmarshall
commented
Feb 5, 2025
Comment on lines
+14
to
+35
| export enum AvatarIconSize { | ||
| /** | ||
| * Extra small size (16px) | ||
| */ | ||
| Xs = 'xs', | ||
| /** | ||
| * Small size (24px) | ||
| */ | ||
| Sm = 'sm', | ||
| /** | ||
| * Medium size (32px) | ||
| */ | ||
| Md = 'md', | ||
| /** | ||
| * Large size (40px) | ||
| */ | ||
| Lg = 'lg', | ||
| /** | ||
| * Extra large size (48px) | ||
| */ | ||
| Xl = 'xl', | ||
| } |
There was a problem hiding this comment.
Previously, I exported AvatarBaseSize as AvatarIconSize from the AvatarIcon index, but it caused circular dependencies. After some consideration, I think this is bad practice and could lead to issues, so we'll need to revert to defining individual enums.
georgewrmarshall
force-pushed
the
feat/370/avatar-icon
branch
from
05ca7f6 to
c93ba9e
Compare
georgewrmarshall
commented
Feb 5, 2025
|
|
||
| # AvatarIcon | ||
|
|
||
| Avatar reserved for representing static icons inside of an avatar. |
There was a problem hiding this comment.
Description matches figma
georgewrmarshall
commented
Feb 5, 2025
|
|
||
| Avatar reserved for representing static icons inside of an avatar. | ||
|
|
||
| > Note: For icon buttons, use the [ButtonIcon](/docs/react-components-buttonicon--docs) component. |
There was a problem hiding this comment.
Adding not as per the insight report
georgewrmarshall
commented
Feb 5, 2025
| @@ -38,3 +38,6 @@ export type { ButtonIconProps } from './button-icon'; | |||
|
|
|||
| export { AvatarBase, AvatarBaseSize } from './avatar-base'; | |||
| export type { AvatarBaseProps } from './avatar-base'; | |||
|
|
|||
| export { AvatarIcon, AvatarIconSize, AvatarIconSeverity } from './avatar-icon'; | |||
| export type { AvatarIconProps } from './avatar-icon'; | |||
There was a problem hiding this comment.
exporting from root index
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds
AvatarIconto design system reactThe component is built on top of the existing
AvatarBaseandIconcomponents, ensuring consistency with the design system.Related issues
Fixes: #370
Manual testing steps
Screenshots/Recordings
Before
N/A (New component)
After
after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist