Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 2801de4

Browse files
codebender828codebender828
authored
Merge pull request #173 from chakra-ui/develop
release: add avatar component
2 parents 1123461 + 1b7eaac commit 2801de4

34 files changed

+1789
-45
lines changed

‎.changeset/loud-drinks-arrive.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
"@chakra-ui/vue-anatomy": minor
3+
"@chakra-ui/c-accordion": minor
4+
"@chakra-ui/c-alert": minor
5+
"@chakra-ui/c-avatar": minor
6+
"@chakra-ui/c-breadcrumb": minor
7+
"@chakra-ui/c-button": minor
8+
"@chakra-ui/c-checkbox": minor
9+
"@chakra-ui/c-close-button": minor
10+
"@chakra-ui/c-code": minor
11+
"@chakra-ui/c-color-mode": minor
12+
"@chakra-ui/c-flex": minor
13+
"@chakra-ui/c-focus-lock": minor
14+
"@chakra-ui/c-form-control": minor
15+
"@chakra-ui/c-icon": minor
16+
"@chakra-ui/c-input": minor
17+
"@chakra-ui/c-modal": minor
18+
"@chakra-ui/c-motion": minor
19+
"@chakra-ui/c-popper": minor
20+
"@chakra-ui/c-portal": minor
21+
"@chakra-ui/c-reset": minor
22+
"@chakra-ui/c-scroll-lock": minor
23+
"@chakra-ui/c-spinner": minor
24+
"@chakra-ui/c-tag": minor
25+
"@chakra-ui/c-theme-provider": minor
26+
"@chakra-ui/c-visually-hidden": minor
27+
"@chakra-ui/vue-next": minor
28+
"@chakra-ui/vue-layout": minor
29+
"@chakra-ui/nuxt-next": minor
30+
"@chakra-ui/vue-styled": minor
31+
"@chakra-ui/vue-system": minor
32+
"@chakra-ui/vue-test-utils": minor
33+
"@chakra-ui/vue-theme": minor
34+
"@chakra-ui/vue-theme-tools": minor
35+
"@chakra-ui/vue-utils": minor
36+
"@chakra-ui/vue-a11y": minor
37+
"@chakra-ui/vue-composables": minor
38+
"@chakra-ui/vue-auto-import": minor
39+
"@chakra-ui/vue-docs": minor
40+
---
41+
42+
Created Avatar component

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
"scaffold": "hygen generator",
2525
"release": "yarn changeset publish",
2626
"preplaygound:dev": "node ./scripts/dev.js",
27-
"playground:dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts --open",
27+
"playground:dev": "cross-env NODE_ENV=development vite serve playground --config ./vite.config.ts --open",
2828
"preplaygound:build": "node ./scripts/dev.js",
29-
"playground:build": "yarn install && yarn build && NODE_ENV=production vite build playground --config ./vite.config.ts",
29+
"playground:build": "yarn install && yarn build && cross-env NODE_ENV=production vite build playground --config ./vite.config.ts",
3030
"cy:open": "cypress open-ct",
3131
"cy:run": "cypress run-ct --quiet",
3232
"test:component": "yarn cy:run",

‎packages/c-accordion/tests/__snapshots__/accordion.test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
1818
aria-controls="accordion:EMPTY_STRING:content:accordion-item-undefined"
1919
aria-disabled="false"
2020
aria-expanded="false"
21-
class="css-1d10sx1"
21+
class="css-qbtjmr"
2222
data-ownedby="accordion:EMPTY_STRING"
2323
data-part="trigger"
2424
id="accordion:EMPTY_STRING:trigger:accordion-item-undefined"
@@ -76,7 +76,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
7676
aria-controls="accordion:EMPTY_STRING:content:accordion-item-1"
7777
aria-disabled="false"
7878
aria-expanded="false"
79-
class="css-1d10sx1"
79+
class="css-qbtjmr"
8080
data-ownedby="accordion:EMPTY_STRING"
8181
data-part="trigger"
8282
id="accordion:EMPTY_STRING:trigger:accordion-item-1"
@@ -133,7 +133,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
133133
aria-controls="accordion:EMPTY_STRING:content:accordion-item-2"
134134
aria-disabled="false"
135135
aria-expanded="false"
136-
class="css-1d10sx1"
136+
class="css-qbtjmr"
137137
data-ownedby="accordion:EMPTY_STRING"
138138
data-part="trigger"
139139
id="accordion:EMPTY_STRING:trigger:accordion-item-2"
@@ -205,7 +205,7 @@ exports[`<CAccordion /> component should toggle the accordion on click 1`] = `
205205
aria-controls="accordion:EMPTY_STRING:content:accordion-item-4"
206206
aria-disabled="false"
207207
aria-expanded="false"
208-
class="css-1d10sx1"
208+
class="css-qbtjmr"
209209
data-ownedby="accordion:EMPTY_STRING"
210210
data-part="trigger"
211211
id="accordion:EMPTY_STRING:trigger:accordion-item-4"

‎packages/c-avatar/README.md

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# @chakra-ui/c-avatar
2+
3+
The avatar component is used to represent user and displays the profile picture initials or fallback icon
4+
5+
## Installation
6+
7+
```sh
8+
yarn add @chakra-ui/c-avatar
9+
# or
10+
npm i @chakra-ui/c-avatar
11+
```
12+
13+
## Imports
14+
15+
This packages exports the following components:
16+
17+
- **CAvatar** : The image that represents the user.
18+
- **CAvatarBadge** : A wrapper that displays its content on the right corner of the avatar.
19+
- **CAvatarGroup** : A wrapper to stack multiple Avatars together.
20+
21+
## Usage
22+
23+
### Default :
24+
25+
```html
26+
<c-avatar
27+
name="Evan You"
28+
alt="Evan You"
29+
src="https://www.github.com/yyx990803.png" />
30+
```
31+
32+
### Avatar Sizes :
33+
34+
The avatar component comes in 7 different sizes (`2xs`|`xs` | `sm` | `md` | `lg` | `xl` | `2xl`) :
35+
36+
```html
37+
<c-avatar
38+
name="Evan You"
39+
alt="Evan You"
40+
src="https://www.github.com/yyx990803.png"
41+
size="sm"/>
42+
43+
```
44+
45+
### Avatar Fallbacks :
46+
47+
If there is an error loading the `src` of the avatar, there are 2 fallbacks :
48+
49+
- If there's a `name` prop, we use it to generate the initials and a random, accessible background color.
50+
- If there's no `name` prop, we use a default Avatar.
51+
52+
### Customize the Fallback Avatar :
53+
54+
You can customize the fallback Avatar either by using style props or by passing a custom icon.
55+
56+
```html
57+
<!-- Styles props -->
58+
<c-avatar size="md" bg="red.500" />
59+
60+
<!-- Custom default icon -->
61+
<c-avatar>
62+
<c-icon color="white" name="star" />
63+
</c-avatar>
64+
```
65+
66+
### Avatar with badges
67+
68+
In some products, you might need to show a badge on the avatar. We call this a `badge`.
69+
70+
The badge is by default on the bottom right corner, but you can change its position by using the prop `position` (`top-start` | `top-end` | `bottom-start` | `bottom-end`)
71+
72+
```html
73+
<c-avatar name="Evan You">
74+
<c-avatar-badge bg="red.500" />
75+
</c-avatar>
76+
```
77+
78+
You can also add icons inside the badge if needed :
79+
80+
```html
81+
<c-avatar name="Evan You">
82+
<c-avatar-badge bg="red.500">
83+
<c-icon color="white" name="minus" w="0.3em" />
84+
</c-avatar-badge>
85+
</c-avatar>
86+
```
87+
88+
### Avatar Group
89+
90+
In some cases, you might need to stack avatars as a group. Use the `CAvatarGroup` component.
91+
92+
- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).
93+
- To size all the avatars equally, pass the `size` prop.
94+
- To adjust the spacing between the avatars, pass the `spacing` prop.
95+
96+
97+
```html
98+
99+
<c-avatar-group max="3" size="lg">
100+
<c-avatar
101+
name="Sarah Drasner"
102+
src="https://avatars.githubusercontent.com/u/2281088?v=4"
103+
alt="Sarah Drasner"
104+
/>
105+
<c-avatar
106+
name="Evan You"
107+
alt="Evan You"
108+
src="https://www.github.com/yyx990803.png"
109+
/>
110+
<c-avatar
111+
name="Anthony Fu"
112+
src="https://avatars.githubusercontent.com/u/11247099?v=4"
113+
alt="Anthony Fu"
114+
/>
115+
<c-avatar
116+
name="Maya Shavin"
117+
src="https://avatars.githubusercontent.com/u/6650139?v=4"
118+
alt="Maya Shavin"
119+
/>
120+
</c-avatar-group>
121+
122+
```
123+
124+
### Initials
125+
126+
We use a method that generate initials by splitting and merging the first character in each word from the `name` prop. But you can also pass the initials you want through the prop `initials`.

‎packages/c-avatar/examples/badge-c-avatar.vue

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<c-stack>
3+
<chakra.p font-weight="bold">Default </chakra.p>
4+
<c-h-stack align="center" spacing="1">
5+
<c-avatar name="Sasuke Uchiha" size="sm">
6+
<c-avatar-badge bg="gray.500" />
7+
</c-avatar>
8+
<c-avatar name="Evan You">
9+
<c-avatar-badge bg="red.500" />
10+
</c-avatar>
11+
<c-avatar size="lg">
12+
<c-avatar-badge bg="orange.500" />
13+
</c-avatar>
14+
<c-avatar
15+
src="https://www.github.com/yyx990803.png"
16+
size="xl"
17+
alt="Evan you"
18+
lazy
19+
>
20+
<c-avatar-badge bg="green.500" aria-label="Online" title="Online" />
21+
</c-avatar>
22+
</c-h-stack>
23+
<chakra.p font-weight="bold">All positions</chakra.p>
24+
<c-h-stack align="center" spacing="1">
25+
<c-avatar name="Sasuke Uchiha" size="sm">
26+
<c-avatar-badge placement="top-start" bg="gray.500" />
27+
</c-avatar>
28+
<c-avatar name="Evan You">
29+
<c-avatar-badge placement="top-end" bg="red.500" />
30+
</c-avatar>
31+
<c-avatar size="lg">
32+
<c-avatar-badge placement="bottom-start" bg="orange.500" />
33+
</c-avatar>
34+
<c-avatar
35+
src="https://www.github.com/yyx990803.png"
36+
size="xl"
37+
alt="Evan you"
38+
lazy
39+
>
40+
<c-avatar-badge bg="green.500" aria-label="Online" title="Online" />
41+
</c-avatar>
42+
</c-h-stack>
43+
<chakra.p font-weight="bold">With custom border colors</chakra.p>
44+
<c-h-stack align="center" spacing="1">
45+
<c-avatar name="Sasuke Uchiha" size="sm">
46+
<c-avatar-badge bg="gray.500" borderColor="lightgray" />
47+
</c-avatar>
48+
<c-avatar name="Evan You">
49+
<c-avatar-badge bg="red.500" borderColor="pink" />
50+
</c-avatar>
51+
<c-avatar size="lg">
52+
<c-avatar-badge bg="orange.500" borderColor="papayawhip" />
53+
</c-avatar>
54+
<c-avatar
55+
src="https://www.github.com/yyx990803.png"
56+
size="xl"
57+
alt="Evan you"
58+
lazy
59+
>
60+
<c-avatar-badge
61+
aria-label="Online"
62+
title="Online"
63+
bg="green.500"
64+
borderColor="palegreen"
65+
>
66+
</c-avatar-badge>
67+
</c-avatar>
68+
</c-h-stack>
69+
<chakra.p font-weight="bold">Badge with icons</chakra.p>
70+
<c-h-stack align="center" spacing="1">
71+
<c-avatar name="Sasuke Uchiha" size="sm">
72+
<c-avatar-badge bg="orange.500">
73+
<c-icon color="white" name="chevron-right" w="0.3em" />
74+
</c-avatar-badge>
75+
</c-avatar>
76+
<c-avatar name="Evan You">
77+
<c-avatar-badge bg="red.500">
78+
<c-icon color="white" name="minus" w="0.3em" />
79+
</c-avatar-badge>
80+
</c-avatar>
81+
<c-avatar size="lg">
82+
<c-avatar-badge bg="yellow.500">
83+
<c-icon color="white" name="star" w="0.3em" />
84+
</c-avatar-badge>
85+
</c-avatar>
86+
<c-avatar
87+
src="https://www.github.com/yyx990803.png"
88+
size="xl"
89+
alt="Evan you"
90+
loading="lazy"
91+
>
92+
<c-avatar-badge aria-label="Connected" bg="green.500">
93+
<c-icon color="white" name="add" w="0.3em" />
94+
</c-avatar-badge>
95+
</c-avatar>
96+
</c-h-stack>
97+
</c-stack>
98+
</template>
99+
<script setup>
100+
import { CAvatar, CAvatarBadge } from "../src"
101+
</script>

‎packages/c-avatar/examples/base-c-avatar.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<c-stack>
3+
<chakra.p font-weight="bold">Default</chakra.p>
4+
<c-h-stack align="center">
5+
<c-avatar size="sm" />
6+
<c-avatar size="md"></c-avatar>
7+
<c-avatar size="lg"></c-avatar>
8+
<c-avatar size="xl"></c-avatar>
9+
</c-h-stack>
10+
11+
<chakra.p font-weight="bold">With custom background colors</chakra.p>
12+
<c-h-stack align="center">
13+
<c-avatar size="sm" bg="yellow.500" />
14+
<c-avatar size="md" bg="blue.500"></c-avatar>
15+
<c-avatar size="lg" bg="red.500"></c-avatar>
16+
<c-avatar size="xl" bg="purple.500"></c-avatar>
17+
</c-h-stack>
18+
<chakra.p font-weight="bold">With custom icons</chakra.p>
19+
<c-h-stack align="center">
20+
<c-avatar size="sm">
21+
<c-icon color="white" name="close" />
22+
</c-avatar>
23+
<c-avatar size="md">
24+
<c-icon color="white" name="star" />
25+
</c-avatar>
26+
<c-avatar size="lg">
27+
<c-icon color="white" name="check" />
28+
</c-avatar>
29+
<c-avatar size="xl">
30+
<c-icon color="white" name="user" />
31+
</c-avatar>
32+
</c-h-stack>
33+
34+
<chakra.p font-weight="bold">With initials</chakra.p>
35+
<c-h-stack align="center">
36+
<c-avatar size="sm" name="Sarah Drasner" />
37+
<c-avatar size="md" name="Anthony Fu"></c-avatar>
38+
<c-avatar size="lg" name="Maya Shavin"></c-avatar>
39+
<c-avatar size="xl" name="Evan You"></c-avatar>
40+
</c-h-stack>
41+
<chakra.p font-weight="bold">With pictures</chakra.p>
42+
<c-h-stack align="center">
43+
<c-avatar
44+
name="Sarah Drasner"
45+
src="https://avatars.githubusercontent.com/u/2281088?v=4"
46+
alt="Sarah Drasner"
47+
size="sm"
48+
></c-avatar>
49+
<c-avatar
50+
src="https://avatars.githubusercontent.com/u/11247099?v=4"
51+
alt="Anthony Fu"
52+
size="md"
53+
></c-avatar>
54+
<c-avatar
55+
name="Maya Shavin"
56+
src="https://avatars.githubusercontent.com/u/6650139?v=4"
57+
alt="Maya Shavin"
58+
size="lg"
59+
>
60+
</c-avatar>
61+
<c-avatar
62+
src="https://www.github.com/yyx990803.png"
63+
size="xl"
64+
name="Evan You"
65+
>
66+
</c-avatar>
67+
</c-h-stack>
68+
</c-stack>
69+
</template>
70+
<script setup>
71+
import { CAvatar } from "../src"
72+
</script>

0 commit comments

Comments
 (0)