feat: add custom class support to Avatar component (#285)

* feat: add custom class support to `Avatar` component * feat: update `Avatar` component demo titles The demo titles for the `Avatar` component have been updated to provide clearer instructions.
arco-design · Oct 21, 2024 · 8a37b7c · 8a37b7c
1 parent d4f1119
commit 8a37b7c
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 1 deletion.
diff --git a/packages/arcodesign/components/avatar/__test__/__snapshots__/index.spec.js.snap b/packages/arcodesign/components/avatar/__test__/__snapshots__/index.spec.js.snap
@@ -291,6 +291,55 @@ exports[`avatar demo test avatar demo: custom.md renders correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`avatar demo test avatar demo: custom-class.md renders correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar-demo-box"
+  >
+    <div
+      class="arco-avatar-wrapper small circle arco-avatar-wrapper-shape-circle"
+    >
+      <div
+        class="arco-avatar avatar-1 arco-avatar-size-small small arco-avatar-shape-circle circle arco-avatar-default-overlap default-overlap"
+      >
+        <svg
+          class="arco-icon arco-icon-user-fill arco-avatar-default arco-avatar-default-icon-size-small"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.5 10.833c2.301 0 5 1.786 5 5v2.5c0 .46-.373.834-.833.834H3.333a.833.833 0 01-.833-.834v-2.5c0-3.211 2.699-5 5-5h5zM10 1.25a4.167 4.167 0 110 8.333 4.167 4.167 0 010-8.333z"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      class="arco-avatar-wrapper avatar-left-margin small square arco-avatar-wrapper-shape-square"
+    >
+      <div
+        class="arco-avatar avatar-2 arco-avatar-size-small small arco-avatar-shape-square square arco-avatar-default-overlap default-overlap"
+      >
+        <svg
+          class="arco-icon arco-icon-user-fill arco-avatar-default arco-avatar-default-icon-size-small"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.5 10.833c2.301 0 5 1.786 5 5v2.5c0 .46-.373.834-.833.834H3.333a.833.833 0 01-.833-.834v-2.5c0-3.211 2.699-5 5-5h5zM10 1.25a4.167 4.167 0 110 8.333 4.167 4.167 0 010-8.333z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`avatar demo test avatar demo: default.md renders correctly 1`] = `
 <DocumentFragment>
   <div

diff --git a/packages/arcodesign/components/avatar/__test__/index.spec.js b/packages/arcodesign/components/avatar/__test__/index.spec.js
@@ -54,4 +54,27 @@ describe('Avatar', () => {
         const groupElements = container.querySelectorAll(`.${prefix}-wrapper`);
         expect(groupElements).toHaveLength(7);
     });
+
+    // 测试 avatarStyle 和 avatarClass 属性
+    // Test avatarStyle and avatarClass properties
+    it('avatarStyle and avatarClass render correctly', () => {
+        const { container } = render(
+            <div>
+                <Avatar avatarClass="avatar-1" />
+                <Avatar shape="square" avatarClass="avatar-2" className="avatar-left-margin" />
+            </div>,
+        );
+
+        // 通过查询选择器找到带有 'avatar-1' 类的元素，并确保它存在
+        // Find the element with the 'avatar-1' class using a query selector and ensure it exists
+        const avatar1Element = container.querySelectorAll('.avatar-1');
+        expect(avatar1Element).toHaveLength(1);
+        expect(avatar1Element[0].classList.contains('arco-avatar')).toBe(true);
+
+        // 通过查询选择器找到带有 'avatar-2' 类的元素，并确保它存在
+        // Find the element with the 'avatar-2' class using a query selector and ensure it exists
+        const avatar2Element = container.querySelectorAll('.avatar-2');
+        expect(avatar2Element).toHaveLength(1);
+        expect(avatar2Element[0].classList.contains('arco-avatar')).toBe(true);
+    });
 });
diff --git a/packages/arcodesign/components/avatar/demo/avatar-with-info.md b/packages/arcodesign/components/avatar/demo/avatar-with-info.md
@@ -1,6 +1,6 @@
 ## 加文字(单行文字时，文字与头像水平居中) @en{Add text (for single-line text, the text and the avatar are centered horizontally)}
 
-#### 8
+#### 9
 
 ```js
 import { Avatar } from '@arco-design/mobile-react';

diff --git a/packages/arcodesign/components/avatar/demo/custom-class.md b/packages/arcodesign/components/avatar/demo/custom-class.md
@@ -0,0 +1,34 @@
+## 自定义样式 @en{Custom Style}
+
+#### 8
+
+```js
+import { Avatar } from '@arco-design/mobile-react';
+
+export default function AvatarDemo() {
+    return (
+        <div className="avatar-demo-box">
+            <Avatar avatarClass="avatar-1" />
+            <Avatar shape="square" avatarClass="avatar-2" className="avatar-left-margin" />
+        </div>
+    );
+}
+```
+
+```less
+.avatar-demo-box {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.avatar-left-margin {
+    .set-prop-with-rtl(margin-left, 24px);
+}
+.avatar-1 {
+    border-radius: 10px;
+    background-color: coral;
+}
+.avatar-2 {
+    width: 1rem;
+}
+```
diff --git a/packages/arcodesign/components/avatar/index.tsx b/packages/arcodesign/components/avatar/index.tsx
@@ -30,6 +30,7 @@ export function componentGenerator<
             decoration = null,
             textAvatar = '',
             avatarStyle = {},
+            avatarClass = '',
             autoFixFontSize = true,
             autoFixFontOffset = 2,
             avatarName = '',
@@ -103,6 +104,7 @@ export function componentGenerator<
                 <div
                     className={cls(
                         `${prefixCls}-avatar`,
+                        avatarClass,
                         `${prefixCls}-avatar-size-${size}`,
                         size,
                         `${prefixCls}-avatar-shape-${shape}`,

diff --git a/packages/arcodesign/components/avatar/type.ts b/packages/arcodesign/components/avatar/type.ts
@@ -43,6 +43,12 @@ export interface AvatarProps<T extends ImageProps = ImageProps> extends BaseProp
      * @default {}
      */
     avatarStyle?: React.CSSProperties;
+    /**
+     * 头像元素的自定义类名
+     * @en Custom classname for avatar element
+     * @default ""
+     */
+    avatarClass?: string;
     /**
      * 是否自动根据头像尺寸调整字体大小
      * @en Whether to automatically adjust the font size according to the avatar size