Skip to content
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

feat(Avatar): add xs size #2732

Merged
merged 1 commit into from
Jan 27, 2025
Merged

feat(Avatar): add xs size #2732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions packages/core/src/components/Avatar/Avatar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
width: $avatar-size-small;
}

.xs {
height: $avatar-size-xs;
width: $avatar-size-xs;
}

.clickableWrapper {
height: 100%;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Avatar/Avatar.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type AvatarType = "img" | "icon" | "text";

export type AvatarSize = "small" | "medium" | "large";
export type AvatarSize = "xs" | "small" | "medium" | "large";
3 changes: 2 additions & 1 deletion packages/core/src/components/Avatar/AvatarBadge.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ $avatar-badge-size-small: 10px;
width: $avatar-badge-size-medium;
}

.badgeSmall {
.badgeSmall,
.badgeXs {
height: $avatar-badge-size-small;
width: $avatar-badge-size-small;
}
1 change: 1 addition & 0 deletions packages/core/src/components/Avatar/AvatarConstants.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$avatar-size-large: 50px;
$avatar-size-medium: 32px;
$avatar-size-small: 28px;
$avatar-size-xs: 20px;
1 change: 1 addition & 0 deletions packages/core/src/components/Avatar/AvatarConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export enum AvatarType {
* @deprecated
*/
export enum AvatarSize {
XS = "xs",
SMALL = "small",
MEDIUM = "medium",
LARGE = "large"
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/components/Avatar/AvatarContent.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ $font-size-avatar-small: 12px;
font-size: $font-size-avatar-small;
}

.contentTextXs {
margin-top: 1px;
@include vibe-text(text3, normal);
}

.contentIconLarge {
height: $avatar-icon-large;
width: $avatar-icon-large;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Avatar/__stories__/Avatar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import { Avatar } from "@vibe/core";

### Size

Avatars appear in 3 sizes: Small, Medium, and Large.
Avatars appear in 4 sizes: XS, Small, Medium, and Large.

<Canvas of={AvatarStories.Size} />

Expand Down
15 changes: 0 additions & 15 deletions packages/core/src/components/Avatar/__stories__/Avatar.stories.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,3 @@
}
}
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused

.text-formatted--large {
font-size: 26px;
font-weight: normal;
}

.text-formatted--medium {
font-size: 18px;
font-weight: 100;
}

.text-formatted--small {
font-size: 10px;
font-weight: bold;
}
4 changes: 4 additions & 0 deletions packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const Overview = {
export const Size = {
render: () => (
<>
<Avatar size="xs" src={person1} type="img" ariaLabel="Julia Martinez" />
<Avatar size="small" src={person1} type="img" ariaLabel="Julia Martinez" />
<Avatar size="medium" src={person1} type="img" ariaLabel="Julia Martinez" />
<Avatar size="large" src={person1} type="img" ariaLabel="Julia Martinez" />
Expand All @@ -50,6 +51,7 @@ export const Size = {
export const Disable = {
render: () => (
<>
<Avatar size="xs" src={person1} type="img" disabled />
<Avatar size="small" src={person1} type="img" disabled />
<Avatar size="medium" src={person1} type="img" disabled />
<Avatar size="large" src={person1} type="img" disabled />
Expand All @@ -61,6 +63,7 @@ export const Disable = {
export const AvatarWithText = {
render: () => (
<>
<Avatar size="xs" type="text" text="RM" backgroundColor="lipstick" ariaLabel="Ron Meir" />
<Avatar size="small" type="text" text="RM" backgroundColor="lipstick" ariaLabel="Ron Meir" />
<Avatar size="medium" type="text" text="RM" backgroundColor="lipstick" ariaLabel="Ron Meir" />
<Avatar size="large" type="text" text="RM" backgroundColor="done-green" ariaLabel="Ron Meir" />
Expand All @@ -73,6 +76,7 @@ export const AvatarWithText = {
export const SquareAvatar = {
render: () => (
<>
<Avatar size="xs" type="text" text="R" backgroundColor="bright-blue" square ariaLabel="Ron" />
<Avatar size="small" type="text" text="R" backgroundColor="bright-blue" square ariaLabel="Ron" />
<Avatar size="medium" type="icon" icon={WhatsNew} backgroundColor="aquamarine" square ariaLabel="Present" />
<Avatar size="large" type="text" text="RM" backgroundColor="working_orange" square ariaLabel="Ron Meir" />
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/components/AvatarGroup/AvatarGroupCounter.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
min-width: $size;
border-radius: math.div($size, 2);
}
&.xs {
@include counterSize($avatar-size-xs);
padding: 0 1px;
}
&.small {
@include counterSize($avatar-size-small);
padding: 0 1px;
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({
ariaLabel={counterAriaLabel ? counterAriaLabel : `Tab for more ${counterAriaLabelItemsName}`}
noAnimation={noAnimation}
counterClassName={cx({ [styles.disabled]: disabled })}
size={size === "xs" ? "xs" : undefined}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should only affect xs

/>
);
}, [
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import { AvatarGroup } from "@vibe/core";

### Size

Avatar Group appears in 3 sizes: Small, Medium, and Large.
Avatar Group appears in 4 sizes: XS, Small, Medium, and Large.

<Canvas of={AvatarGroupStories.Size} />

Expand Down
18 changes: 18 additions & 0 deletions packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,24 @@ export const Size: Story = {
<Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
</AvatarGroup>
</StoryDescription>
<StoryDescription description="XS" vertical align={StoryDescription.align.START}>
<AvatarGroup size="xs" type="img" max={4}>
<Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
<Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
<Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
<Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
<Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
<Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
<Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
<Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
<Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
<Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
<Avatar type="img" src={person3} ariaLabel="Marco DiAngelo" />
<Avatar type="img" src={person4} ariaLabel="Liam Caldwell" />
<Avatar type="img" src={person1} ariaLabel="Julia Martinez" />
<Avatar type="img" src={person2} ariaLabel="Sophia Johnson" />
</AvatarGroup>
</StoryDescription>
</Flex>
)
};
Expand Down
11 changes: 11 additions & 0 deletions packages/core/src/components/AvatarGroup/__tests__/AvatarGroup.snapshot.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,17 @@ describe("AvatarGroup renders correctly", () => {
.toJSON();
expect(tree).toMatchSnapshot();
});
it("renders correctly with xs size", () => {
const tree = renderer
.create(
<AvatarGroup size="xs" max={1}>
<Avatar text="P1" />
<Avatar text="P2" />
</AvatarGroup>
)
.toJSON();
expect(tree).toMatchSnapshot();
});

it("renders correctly with counter ariaLabel default-tooltip", () => {
const tree = renderer
Expand Down
87 changes: 87 additions & 0 deletions ...core/src/components/AvatarGroup/__tests__/__snapshots__/AvatarGroup.snapshot.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,93 @@ exports[`AvatarGroup renders correctly renders correctly with large size 1`] = `
</div>
`;

exports[`AvatarGroup renders correctly renders correctly with xs size 1`] = `
<div
className="avatarGroupContainer"
>
<div
className="avatar xs avatarContainer"
data-testid="avatar"
style={{}}
>
<div
className="clickable clickableWrapper disableTextSelection"
data-testid="clickable"
onClick={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="button"
tabIndex={-1}
>
<div
aria-hidden={false}
className="circle circleText"
style={
{
"backgroundColor": "var(--color-chili-blue)",
}
}
tabIndex={0}
>
<span
className="contentText contentTextXs"
data-testid="avatar-content"
>
P1
</span>
</div>
</div>
</div>
<div
className=""
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={-1}
/>
<div
className="counterContainer xs light"
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
>
<span
aria-label="Tab for more items 1"
aria-labelledby=""
onMouseDown={[Function]}
>
<div
aria-label="1"
className="counter sizeXs kindFill colorLight"
>
<span
data-testid="counter"
id="counter"
>
+1
</span>
</div>
</span>
<div
tabIndex={-1}
/>
</div>
</div>
`;

exports[`AvatarGroup renders correctly renders correctly without counter 1`] = `
<div
className="avatarGroupContainer"
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/components/Counter/Counter.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@
animation: counterPopElastic var(--motion-expressive-short);
}

.sizeXs {
@include vibe-text(text3, normal);
@include smoothing-text;
min-width: 18px;
line-height: 18px;
padding: 0 var(--spacing-small);
}

.sizeSmall {
@include font-caption();
min-width: 18px;
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/Counter/Counter.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ export type CounterType = "fill" | "line";

export type CounterColor = "primary" | "dark" | "negative" | "light";

export type CounterSize = "small" | "large";
export type CounterSize = "xs" | "small" | "large";
1 change: 1 addition & 0 deletions packages/core/src/components/Counter/CounterConstants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export enum CounterColor {
* @deprecated
*/
export enum CounterSize {
XS = "xs",
SMALL = "small",
LARGE = "large"
}
2 changes: 1 addition & 1 deletion packages/core/src/components/Counter/__stories__/Counter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import { Counter } from "@vibe/core";

### Sizes

There are two sizes of counters
There are 3 sizes of counters

<Canvas of={CounterStories.Sizes} />

Expand Down
8 changes: 6 additions & 2 deletions packages/core/src/components/Counter/__stories__/Counter.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,17 @@ export const Sizes = {
render: () => (
<>
<div className="storybook-counter_column">
<Counter count={5} />
Big
<Counter count={5} size="xs" />
XS
</div>
<div className="storybook-counter_column">
<Counter count={5} size="small" />
Small
</div>
<div className="storybook-counter_column">
<Counter count={5} />
Large
</div>
</>
),

Expand Down
Loading