feat(Avatar): add support for bordered and color props (#3711)

* feat(Avatar): add support for bordered and color props * feat(Avatar): add support for `onError` * docs: add missing sandbox dependencies
rsuite · Apr 3, 2024 · 3ca7dc1 · 3ca7dc1
1 parent 24f162f
commit 3ca7dc1
Show file tree

Hide file tree

Showing 25 changed files with 557 additions and 211 deletions.
diff --git a/docs/pages/components/avatar/en-US/index.md b/docs/pages/components/avatar/en-US/index.md
@@ -14,8 +14,6 @@ Used to display an avatar or brand.
 
 ### Character avatar
 
-You can change the `<Avatar>` background color and font color by `style`;
-
 <!--{include:`text.md`}-->
 
 ### Icon avatars
@@ -24,14 +22,29 @@ You can change the `<Avatar>` background color and font color by `style`;
 
 ### Image avatars
 
-You can set `alt` for `<Avatar>` , it make sure avatar show pure text avatar when image load failed.
-
 <!--{include:`image.md`}-->
 
-### Sizes
+### Size
 
 <!--{include:`size.md`}-->
 
+### Bordered
+
+<!--{include:`bordered.md`}-->
+
+### Color
+
+<!--{include:`color.md`}-->
+
+### Avatar Fallbacks
+
+If there is an error loading the src of the avatar, there are 2 fallbacks:
+
+1. If there is an `alt` prop, the value of the alt attribute will be rendered.
+2. If there is no `alt` prop, a default avatar will be rendered.
+
+<!--{include:`fallback.md`}-->
+
 ### Stacked avatars
 
 <!--{include:`stack.md`}-->
@@ -44,22 +57,25 @@ You can set `alt` for `<Avatar>` , it make sure avatar show pure text avatar whe
 
 ### `<Avatar>`
 
-| Property    | Type`(Default)`                                   | Description                                                                                    |
-| ----------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| alt         | string                                            | This attribute defines the alternative text for the image avatar                               |
-| children    | string, Element<typeof Icon>                      | Content(It maybe text or icon)                                                                 |
-| circle      | boolean                                           | Render a circle avatar                                                                         |
-| classPrefix | string `('avatar')`                               | The prefix of the component CSS class                                                          |
-| imgProps    | object                                            | Attributes applied to the `img` element if the component is used to display an image.          |
-| size        | 'lg' &#124; 'md' &#124; 'sm' &#124; 'xs' `('md')` | Size of avatar                                                                                 |
-| sizes       | string                                            | The `sizes` attribute for the `img` element.                                                   |
-| src         | string                                            | The `src` attribute for the `img` element.                                                     |
-| srcSet      | string                                            | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. |
+| Property    | Type`(Default)`                                        | Description                                                                                     |
+| ----------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
+| alt         | string                                                 | This attribute defines the alternative text for the image avatar.                               |
+| bordered    | boolean                                                | Whether to show the border. <br/>![](https://img.shields.io/badge/min-v5.59.0-blue)             |
+| children    | string, Element<typeof Icon>                           | Content(It maybe text or icon).                                                                 |
+| circle      | boolean                                                | Render a circle avatar.                                                                         |
+| classPrefix | string `('avatar')`                                    | The prefix of the component CSS class.                                                          |
+| color       | string                                                 | Set the background color of the avatar. <br/>![](https://img.shields.io/badge/min-v5.59.0-blue) |
+| imgProps    | object                                                 | Attributes applied to the `img` element if the component is used to display an image.           |
+| onError     | (event) => void                                        | Callback when the image fails to load.<br/>![](https://img.shields.io/badge/min-v5.59.0-blue)   |
+| size        | 'xxl' \| 'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | Size of avatar.                                                                                 |
+| sizes       | string                                                 | The `sizes` attribute for the `img` element.                                                    |
+| src         | string                                                 | The `src` attribute for the `img` element.                                                      |
+| srcSet      | string                                                 | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display.  |
 
 ### `<AvatarGroup>`
 
-| Property | Type`(Default)`                          | Description                    |
-| -------- | ---------------------------------------- | ------------------------------ |
-| size     | enum: 'lg'&#124;'md'&#124;'sm'&#124;'xs' | Set the size of all avatars    |
-| spacing  | number                                   | Set the spacing of the avatars |
-| stack    | boolean                                  | Render all avatars as stacks   |
+| Property | Type`(Default)`                               | Description                     |
+| -------- | --------------------------------------------- | ------------------------------- |
+| size     | 'xxl' \| 'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs' | Set the size of all avatars.    |
+| spacing  | number                                        | Set the spacing of the avatars. |
+| stack    | boolean                                       | Render all avatars as stacks.   |
diff --git a/docs/pages/components/avatar/fragments/badge.md b/docs/pages/components/avatar/fragments/badge.md
@@ -6,11 +6,11 @@ import { AvatarGroup, Badge, Avatar } from 'rsuite';
 const App = () => (
   <AvatarGroup>
     <Badge>
-      <Avatar src="https://avatars.githubusercontent.com/u/12592949" alt="@superman66" />
+      <Avatar src="https://i.pravatar.cc/150?u=1" />
     </Badge>
 
     <Badge content="20">
-      <Avatar src="https://avatars.githubusercontent.com/u/8225666" alt="@SevenOutman" />
+      <Avatar src="https://i.pravatar.cc/150?u=2" />
     </Badge>
   </AvatarGroup>
 );

diff --git a/docs/pages/components/avatar/fragments/basic.md b/docs/pages/components/avatar/fragments/basic.md
@@ -5,8 +5,9 @@ import { AvatarGroup, Avatar } from 'rsuite';
 
 const App = () => (
   <AvatarGroup spacing={6}>
-    <Avatar src="https://avatars.githubusercontent.com/u/12592949" alt="@superman66" />
-    <Avatar src="https://avatars.githubusercontent.com/u/8225666" alt="@SevenOutman" />
+    <Avatar src="https://i.pravatar.cc/150?u=1" />
+    <Avatar circle />
+    <Avatar src="https://i.pravatar.cc/150?u=2" circle />
   </AvatarGroup>
 );
 

diff --git a/docs/pages/components/avatar/fragments/bordered.md b/docs/pages/components/avatar/fragments/bordered.md
@@ -0,0 +1,16 @@
+<!--start-code-->
+
+```js
+import { AvatarGroup, Avatar } from 'rsuite';
+
+const App = () => (
+  <AvatarGroup spacing={20}>
+    <Avatar bordered src="https://i.pravatar.cc/150?u=1" />
+    <Avatar bordered circle src="https://i.pravatar.cc/150?u=2" />
+  </AvatarGroup>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/avatar/fragments/color.md b/docs/pages/components/avatar/fragments/color.md
@@ -0,0 +1,35 @@
+<!--start-code-->
+
+```js
+import { AvatarGroup, Avatar } from 'rsuite';
+
+const App = () => (
+  <>
+    <AvatarGroup spacing={14}>
+      <Avatar color="red" bordered circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar color="orange" bordered circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar color="yellow" bordered circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar color="green" bordered circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar color="cyan" bordered circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar color="blue" bordered circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar color="violet" bordered circle src="https://i.pravatar.cc/150?u=1" />
+    </AvatarGroup>
+
+    <hr />
+
+    <AvatarGroup spacing={6}>
+      <Avatar color="red" circle />
+      <Avatar color="orange" circle />
+      <Avatar color="yellow" circle />
+      <Avatar olor="green" circle />
+      <Avatar color="cyan" circle />
+      <Avatar color="blue" circle />
+      <Avatar color="violet" circle />
+    </AvatarGroup>
+  </>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/avatar/fragments/fallback.md b/docs/pages/components/avatar/fragments/fallback.md
@@ -0,0 +1,16 @@
+<!--start-code-->
+
+```js
+import { AvatarGroup, Avatar } from 'rsuite';
+
+const App = () => (
+  <AvatarGroup spacing={6}>
+    <Avatar circle src="https://images.unsplash.com/broken" alt="Alt" />
+    <Avatar circle src="https://images.unsplash.com/broken" />
+  </AvatarGroup>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/avatar/fragments/icon.md b/docs/pages/components/avatar/fragments/icon.md
@@ -2,16 +2,25 @@
 
 ```js
 import { AvatarGroup, Badge, Avatar } from 'rsuite';
-import { Icon } from '@rsuite/icons';
-import UserIcon from '@rsuite/icons/legacy/User';
+import { FaUserLarge } from 'react-icons/fa6';
+import { FcBusinessman, FcCustomerSupport } from 'react-icons/fc';
 
 const App = () => (
   <AvatarGroup spacing={6}>
     <Avatar>
-      <UserIcon />
+      <FaUserLarge />
+    </Avatar>
+    <Avatar>
+      <FaUserLarge size={30} />
+    </Avatar>
+
+    <Avatar>
+      <FcBusinessman size={30} />
+    </Avatar>
+
+    <Avatar>
+      <FcCustomerSupport size={30} />
     </Avatar>
-    <Avatar>🙂</Avatar>
-    <Avatar>👍</Avatar>
   </AvatarGroup>
 );
 

diff --git a/docs/pages/components/avatar/fragments/image.md b/docs/pages/components/avatar/fragments/image.md
@@ -5,16 +5,16 @@ import { AvatarGroup, Avatar } from 'rsuite';
 
 const App = () => (
   <AvatarGroup spacing={6}>
-    <Avatar circle src="https://avatars.githubusercontent.com/u/12592949" alt="@superman66" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/8225666" alt="@SevenOutman" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/15609339" alt="@hiyangguo" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/14308293" alt="@MarvelSQ" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/1203827" alt="@simonguo" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/9625224" alt="@theJian" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/15884443" alt="@LeightonYao" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/10924138" alt="@zmhawk" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/2797600" alt="@posebear1990" />
-    <Avatar circle src="https://avatars.githubusercontent.com/u/23637144" alt="@Sleaf" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=1" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=2" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=3" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=4" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=5" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=6" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=7" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=8" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=9" alt="Avatar" />
+    <Avatar circle src="https://i.pravatar.cc/150?u=10" alt="Avatar" />
   </AvatarGroup>
 );
 

diff --git a/docs/pages/components/avatar/fragments/size.md b/docs/pages/components/avatar/fragments/size.md
@@ -6,45 +6,23 @@ import { AvatarGroup, Avatar } from 'rsuite';
 const App = () => (
   <>
     <AvatarGroup spacing={6}>
-      <Avatar
-        size="lg"
-        circle
-        src="https://avatars.githubusercontent.com/u/12592949"
-        alt="@SevenOutman"
-      />
-      <Avatar
-        size="md"
-        circle
-        src="https://avatars.githubusercontent.com/u/12592949"
-        alt="@SevenOutman"
-      />
-      <Avatar
-        size="sm"
-        circle
-        src="https://avatars.githubusercontent.com/u/12592949"
-        alt="@SevenOutman"
-      />
-      <Avatar
-        size="xs"
-        circle
-        src="https://avatars.githubusercontent.com/u/12592949"
-        alt="@SevenOutman"
-      />
+      <Avatar size="xxl" circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar size="xl" circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar size="lg" circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar size="md" circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar size="sm" circle src="https://i.pravatar.cc/150?u=1" />
+      <Avatar size="xs" circle src="https://i.pravatar.cc/150?u=1" />
     </AvatarGroup>
 
     <hr />
 
-    <AvatarGroup size="xs">
-      <Avatar circle src="https://avatars.githubusercontent.com/u/12592949" alt="@superman66" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/8225666" alt="@SevenOutman" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/15609339" alt="@hiyangguo" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/14308293" alt="@MarvelSQ" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/1203827" alt="@simonguo" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/9625224" alt="@theJian" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/15884443" alt="@LeightonYao" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/10924138" alt="@zmhawk" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/2797600" alt="@posebear1990" />
-      <Avatar circle src="https://avatars.githubusercontent.com/u/23637144" alt="@Sleaf" />
+    <AvatarGroup spacing={6}>
+      <Avatar size="xxl" circle />
+      <Avatar size="xl" circle />
+      <Avatar size="lg" circle />
+      <Avatar size="md" circle />
+      <Avatar size="sm" circle />
+      <Avatar size="xs" circle />
     </AvatarGroup>
   </>
 );

diff --git a/docs/pages/components/avatar/fragments/stack.md b/docs/pages/components/avatar/fragments/stack.md
@@ -3,16 +3,16 @@
 ```js
 import { AvatarGroup, Avatar } from 'rsuite';
 const users = [
-  { avatar: 'https://avatars.githubusercontent.com/u/12592949', name: 'superman66' },
-  { avatar: 'https://avatars.githubusercontent.com/u/8225666', name: 'SevenOutman' },
-  { avatar: 'https://avatars.githubusercontent.com/u/15609339', name: 'hiyangguo' },
-  { avatar: 'https://avatars.githubusercontent.com/u/14308293', name: 'MarvelSQ' },
-  { avatar: 'https://avatars.githubusercontent.com/u/1203827', name: 'simonguo' },
-  { avatar: 'https://avatars.githubusercontent.com/u/9625224', name: 'theJian' },
-  { avatar: 'https://avatars.githubusercontent.com/u/15884443', name: 'LeightonYao' },
-  { avatar: 'https://avatars.githubusercontent.com/u/10924138', name: 'zmhawk' },
-  { avatar: 'https://avatars.githubusercontent.com/u/2797600', name: 'posebear1990' },
-  { avatar: 'https://avatars.githubusercontent.com/u/23637144', name: 'Sleaf' }
+  { avatar: 'https://i.pravatar.cc/150?u=1', name: 'John Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=2', name: 'Tom Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=3', name: 'Jerry Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=4', name: 'Lily Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=5', name: 'Lucy Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=6', name: 'Mike Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=7', name: 'Jane Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=8', name: 'Kate Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=9', name: 'Jack Doe' },
+  { avatar: 'https://i.pravatar.cc/150?u=10', name: 'Rose Doe' }
 ];
 
 const max = 4;
@@ -21,7 +21,7 @@ const App = () => (
   <>
     <AvatarGroup stack>
       {users.map(user => (
-        <Avatar circle key={user.name} src={user.avatar} alt={user.name} />
+        <Avatar bordered circle key={user.name} src={user.avatar} alt={user.name} />
       ))}
     </AvatarGroup>
 
@@ -31,9 +31,9 @@ const App = () => (
       {users
         .filter((user, i) => i < max)
         .map(user => (
-          <Avatar circle key={user.name} src={user.avatar} alt={user.name} />
+          <Avatar bordered circle key={user.name} src={user.avatar} alt={user.name} />
         ))}
-      <Avatar circle style={{ background: '#111' }}>
+      <Avatar bordered circle style={{ background: '#111' }}>
         +{users.length - max}
       </Avatar>
     </AvatarGroup>

diff --git a/docs/pages/components/avatar/fragments/text.md b/docs/pages/components/avatar/fragments/text.md
@@ -4,21 +4,26 @@
 import { AvatarGroup, Avatar } from 'rsuite';
 
 const App = () => (
-  <AvatarGroup spacing={6}>
-    <Avatar style={{ background: '#000' }}>R</Avatar>
-    <Avatar style={{ background: '#7B1FA2' }}>Suite</Avatar>
-    <Avatar style={{ background: '#004299' }}>👍</Avatar>
+  <>
+    <AvatarGroup spacing={6}>
+      <Avatar style={{ background: '#000' }}>R</Avatar>
+      <Avatar style={{ background: '#7B1FA2' }}>X</Avatar>
+      <Avatar style={{ background: '#004299' }}>👍</Avatar>
+    </AvatarGroup>
 
-    <Avatar circle style={{ background: '#000' }}>
-      R
-    </Avatar>
-    <Avatar circle style={{ background: '#7B1FA2' }}>
-      Suite
-    </Avatar>
-    <Avatar circle style={{ background: '#004299' }}>
-      👍
-    </Avatar>
-  </AvatarGroup>
+    <hr />
+    <AvatarGroup spacing={6}>
+      <Avatar circle style={{ background: '#000' }}>
+        R
+      </Avatar>
+      <Avatar circle style={{ background: '#7B1FA2' }}>
+        X
+      </Avatar>
+      <Avatar circle style={{ background: '#004299' }}>
+        👍
+      </Avatar>
+    </AvatarGroup>
+  </>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));