Skip to content

chore: migrate avatar & bubble #5118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gndz07 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

chore: migrate avatar & bubble #5118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a690249
chore: migrate avatar
gndz07 Jan 2, 2026
da8f17f
feat: migrate bubble component
gndz07 Jan 2, 2026
586ce66
fix: avatar, keep 1:1 with the original version
gndz07 Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
import { Meta, StoryFn } from '@storybook/react-vite';
import React from 'react';

import { BoxVanilla } from '../Box/Box.vanilla';
import { FlexVanilla } from '../Flex/Flex.vanilla';
import { H3Vanilla } from '../Heading/Heading.vanilla';
import { Avatar } from './Avatar';
import { AvatarVanilla } from './Avatar.vanilla';

const Component: Meta<typeof Avatar> = {
title: 'Components/Avatar',
Expand Down Expand Up @@ -93,4 +97,59 @@ Variants.argTypes = {
},
};

export const Comparison: StoryFn = () => (
<FlexVanilla direction="column" gap={6}>
<BoxVanilla>
<H3Vanilla css={{ marginBottom: '16px' }}>Stitches Version</H3Vanilla>
<FlexVanilla gap={4} align="center" wrap="wrap">
<Avatar src="https://picsum.photos/100" size="1" />
<Avatar src="https://picsum.photos/100" size="2" />
<Avatar src="https://picsum.photos/100" size="3" />
<Avatar src="https://picsum.photos/100" size="4" />
<Avatar src="https://picsum.photos/100" size="5" />
<Avatar src="https://picsum.photos/100" size="6" />
</FlexVanilla>
<H3Vanilla css={{ marginTop: '24px', marginBottom: '16px' }}>Fallback Variants</H3Vanilla>
<FlexVanilla gap={4} align="center" wrap="wrap">
<Avatar fallback="G" variant="gray" size="4" />
<Avatar fallback="R" variant="red" size="4" />
<Avatar fallback="P" variant="purple" size="4" />
<Avatar fallback="B" variant="blue" size="4" />
<Avatar fallback="G" variant="green" size="4" />
<Avatar fallback="O" variant="orange" size="4" />
</FlexVanilla>
<H3Vanilla css={{ marginTop: '24px', marginBottom: '16px' }}>Shapes</H3Vanilla>
<FlexVanilla gap={4} align="center" wrap="wrap">
<Avatar src="https://picsum.photos/100" shape="circle" size="4" />
<Avatar src="https://picsum.photos/100" shape="square" size="4" />
</FlexVanilla>
</BoxVanilla>
<BoxVanilla>
<H3Vanilla css={{ marginBottom: '16px' }}>Vanilla Extract Version</H3Vanilla>
<FlexVanilla gap={4} align="center" wrap="wrap">
<AvatarVanilla src="https://picsum.photos/100" size="1" />
<AvatarVanilla src="https://picsum.photos/100" size="2" />
<AvatarVanilla src="https://picsum.photos/100" size="3" />
<AvatarVanilla src="https://picsum.photos/100" size="4" />
<AvatarVanilla src="https://picsum.photos/100" size="5" />
<AvatarVanilla src="https://picsum.photos/100" size="6" />
</FlexVanilla>
<H3Vanilla css={{ marginTop: '24px', marginBottom: '16px' }}>Fallback Variants</H3Vanilla>
<FlexVanilla gap={4} align="center" wrap="wrap">
<AvatarVanilla fallback="G" variant="gray" size="4" />
<AvatarVanilla fallback="R" variant="red" size="4" />
<AvatarVanilla fallback="P" variant="purple" size="4" />
<AvatarVanilla fallback="B" variant="blue" size="4" />
<AvatarVanilla fallback="G" variant="green" size="4" />
<AvatarVanilla fallback="O" variant="orange" size="4" />
</FlexVanilla>
<H3Vanilla css={{ marginTop: '24px', marginBottom: '16px' }}>Shapes</H3Vanilla>
<FlexVanilla gap={4} align="center" wrap="wrap">
<AvatarVanilla src="https://picsum.photos/100" shape="circle" size="4" />
<AvatarVanilla src="https://picsum.photos/100" shape="square" size="4" />
</FlexVanilla>
</BoxVanilla>
</FlexVanilla>
);

export default Component;
151 changes: 151 additions & 0 deletions components/Avatar/Avatar.vanilla.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';

import { tokens } from '../../styles/tokens.css';

const avatarRoot = style({
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'middle',
overflow: 'hidden',
userSelect: 'none',
boxSizing: 'border-box',
display: 'flex',
flexShrink: 0,
position: 'relative',
border: 'none',
fontFamily: 'inherit',
lineHeight: '1',
margin: '0',
outline: 'none',
padding: '0',
fontWeight: tokens.fontWeights.medium,
color: tokens.colors.hiContrast,

selectors: {
'&::before': {
content: '""',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
borderRadius: 'inherit',
boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',
},
},
});

export const avatarRecipe = recipe({
base: avatarRoot,

variants: {
size: {
'1': {
width: tokens.sizes['3'],
height: tokens.sizes['3'],
},
'2': {
width: tokens.sizes['5'],
height: tokens.sizes['5'],
},
'3': {
width: tokens.sizes['6'],
height: tokens.sizes['6'],
},
'4': {
width: tokens.sizes['7'],
height: tokens.sizes['7'],
},
'5': {
width: tokens.sizes['8'],
height: tokens.sizes['8'],
},
'6': {
width: tokens.sizes['9'],
height: tokens.sizes['9'],
},
},
variant: {
gray: {
backgroundColor: tokens.colors.slate['5'],
},
red: {
backgroundColor: tokens.colors.red['5'],
},
purple: {
backgroundColor: tokens.colors.purple['5'],
},
blue: {
backgroundColor: tokens.colors.blue['5'],
},
green: {
backgroundColor: tokens.colors.green['5'],
},
orange: {
backgroundColor: tokens.colors.orange['5'],
},
},
shape: {
square: {
borderRadius: tokens.radii['2'],
},
circle: {
borderRadius: '50%',
},
},
},

defaultVariants: {
size: '2',
variant: 'gray',
shape: 'circle',
},
});

export const avatarImage = style({
display: 'flex',
objectFit: 'cover',
boxSizing: 'border-box',
height: '100%',
verticalAlign: 'middle',
width: '100%',
});

const avatarFallbackBase = style({
textTransform: 'uppercase',
fontFamily: tokens.fonts.rubik,
color: tokens.colors.deepBlue['10'],
});

export const avatarFallbackRecipe = recipe({
base: avatarFallbackBase,

variants: {
size: {
'1': {
fontSize: '10px',
lineHeight: '15px',
},
'2': {
fontSize: tokens.fontSizes['3'],
},
'3': {
fontSize: tokens.fontSizes['6'],
},
'4': {
fontSize: tokens.fontSizes['7'],
},
'5': {
fontSize: tokens.fontSizes['8'],
},
'6': {
fontSize: tokens.fontSizes['9'],
},
},
},

defaultVariants: {
size: '2',
},
});
Loading