@arco-design/mobile-react 2.19.1 → 2.21.0

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.21.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.1...@arco-design/mobile-react@2.21.0) (2022-08-29)
+
+
+### Bug Fixes
+
+* `Button` support coverIconWhenLoading ([#33](https://github.com/arco-design/arco-design-mobile/issues/33)) ([4213959](https://github.com/arco-design/arco-design-mobile/commit/421395918c8dc8ec8e6cb742aeed46503eaef925))
+* `Dropdown` optimize animation when direction changed ([2022692](https://github.com/arco-design/arco-design-mobile/commit/20226924759486d66ecae7a8e466bc1c676cd923))
+* `Dropdown` support customize select icon & value of string type ([9eb6f5d](https://github.com/arco-design/arco-design-mobile/commit/9eb6f5db76d2a1975e61a478d897522cf8bcbf8e))
+* `DropdownMenu` optimize renderSelectLabel params ([1c685fd](https://github.com/arco-design/arco-design-mobile/commit/1c685fd85851f6735d1d91dc49c6f28ade0a858c))
+* `ImagePicker` convert event.target.files to array ([dec36f1](https://github.com/arco-design/arco-design-mobile/commit/dec36f1edf313e34bb1fd290ce314206639a5717))
+* `ImagePicker` fix uploaded images change ([#44](https://github.com/arco-design/arco-design-mobile/issues/44)) ([7511837](https://github.com/arco-design/arco-design-mobile/commit/75118376f7b08f39a2c438737075a0af0d39004d))
+* `ImagePicker` optimize display when uploading ([a99f2f3](https://github.com/arco-design/arco-design-mobile/commit/a99f2f3e2927ce2f263a496da09e391395a8b545))
+* `NavBar` trigger caculation when showOffset changes ([06119ce](https://github.com/arco-design/arco-design-mobile/commit/06119ceeefb286ac963dae0f8b49a1112063d1b9))
+* `PopupSwiper` optimize moving direction ([fe1d100](https://github.com/arco-design/arco-design-mobile/commit/fe1d100fb3aba069ad66255c93654823beebf249))
+* `ShowMonitor` support flush visible status ([#31](https://github.com/arco-design/arco-design-mobile/issues/31)) ([bdad151](https://github.com/arco-design/arco-design-mobile/commit/bdad151e8a466f20e3e033ccec9a5d458ff4fbf4))
+* `Steps` converge style to token ([6cf4f26](https://github.com/arco-design/arco-design-mobile/commit/6cf4f267a271dc0d03f559c4aca8199f9fcae2ec))
+* `Tabs` limit max scroll distance close ([#37](https://github.com/arco-design/arco-design-mobile/issues/37)) ([e716d01](https://github.com/arco-design/arco-design-mobile/commit/e716d014dfa34c4159d4011d2a1ccd5b7d133b4c)), closes [#36](https://github.com/arco-design/arco-design-mobile/issues/36)
+* components classname optimize: `Avatar` & `Button` & `Badge` ([e6b70dd](https://github.com/arco-design/arco-design-mobile/commit/e6b70dd5eebb23646f2e7639b8a8a73bd51e57c3))
+
+
+### Features
+
+* add new component `ImagePicker` ([#24](https://github.com/arco-design/arco-design-mobile/issues/24)) ([73f6156](https://github.com/arco-design/arco-design-mobile/commit/73f615651f46dc670f29733f6b99ec56795fc48b))
+* add new component `SearchBar` ([#22](https://github.com/arco-design/arco-design-mobile/issues/22)) ([36cf4d4](https://github.com/arco-design/arco-design-mobile/commit/36cf4d4d61506358cd84b41738d817db8399c04f))
+* add new component `SwipeAction` ([221dc57](https://github.com/arco-design/arco-design-mobile/commit/221dc5776a508fcccd27de992e1ae58d137b7fb6))
+
+
+
+
+
+# [2.20.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.1...@arco-design/mobile-react@2.20.0) (2022-08-12)
+
+
+### Bug Fixes
+
+* `Button` support coverIconWhenLoading ([#33](https://github.com/arco-design/arco-design-mobile/issues/33)) ([2ef79f5](https://github.com/arco-design/arco-design-mobile/commit/2ef79f5f77081682075d00beb8639c87515aa4b3))
+* `Dropdown` support customize select icon & value of string type ([9eb6f5d](https://github.com/arco-design/arco-design-mobile/commit/9eb6f5db76d2a1975e61a478d897522cf8bcbf8e))
+* `DropdownMenu` optimize renderSelectLabel params ([1c685fd](https://github.com/arco-design/arco-design-mobile/commit/1c685fd85851f6735d1d91dc49c6f28ade0a858c))
+* `ImagePicker` optimize display when uploading ([eba85a4](https://github.com/arco-design/arco-design-mobile/commit/eba85a46bfadddc5924f8cd89f614416bdb0e3c1))
+* `NavBar` trigger caculation when showOffset changes ([06119ce](https://github.com/arco-design/arco-design-mobile/commit/06119ceeefb286ac963dae0f8b49a1112063d1b9))
+* `ShowMonitor` support flush visible status ([#31](https://github.com/arco-design/arco-design-mobile/issues/31)) ([b5e12b2](https://github.com/arco-design/arco-design-mobile/commit/b5e12b27cd464cc137be810bea828850934072b0))
+* `Steps` converge style to token ([6cf4f26](https://github.com/arco-design/arco-design-mobile/commit/6cf4f267a271dc0d03f559c4aca8199f9fcae2ec))
+* components classname optimize: `Avatar` & `Button` & `Badge` ([cba4ac4](https://github.com/arco-design/arco-design-mobile/commit/cba4ac4bfafbe4edd53019b2c2ee314e092e409b))
+
+
+### Features
+
+* add new component `ImagePicker` ([#24](https://github.com/arco-design/arco-design-mobile/issues/24)) ([73f6156](https://github.com/arco-design/arco-design-mobile/commit/73f615651f46dc670f29733f6b99ec56795fc48b))
+
+
+
+
+
 ## [2.19.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.19.0...@arco-design/mobile-react@2.19.1) (2022-07-22)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/style.min.css">
-<script src="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/index.min.js"></script>
 ```
 
 ## Full import
@@ -89,7 +89,7 @@ npm install babel-plugin-import -D
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
         "style": (path) => `${path}/style`,
     }]
 ]
@@ -102,7 +102,7 @@ plugins: [
 ```js
 plugins: [
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false,
     }]
@@ -115,11 +115,11 @@ If both **component** and **Icon** need to be imported on demand, you need to ad
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
         "style": (path) => `${path}/style`
     }, "@arco-design/mobile-react"],
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false
     }, "@arco-design/mobile-react/esm/icon"]

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/style.min.css">
-<script src="https://unpkg.com/browse/@arco-design/mobile-react@2.19.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.20.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部
@@ -89,7 +89,7 @@ npm install babel-plugin-import -D
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
         "style": (path) => `${path}/style`,
     }]
 ]
@@ -102,7 +102,7 @@ plugins: [
 ```js
 plugins: [
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false,
     }]
@@ -115,11 +115,11 @@ plugins: [
 plugins: [
     ["import", {
         "libraryName": "@arco-design/mobile-react",
-        "libraryDirectory": "esm",
+        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
         "style": (path) => `${path}/style`
     }, "@arco-design/mobile-react"],
     ["import", {
-        "libraryName": "@arco-design/mobile-react/esm/icon",
+        "libraryName": "@arco-design/mobile-react/esm/icon", // 注意如果是 SSR 环境，这里需将 `esm` 替换为 `cjs`
         "libraryDirectory": "",
         "camel2DashComponentName": false
     }, "@arco-design/mobile-react/esm/icon"]

package/cjs/_helpers/type.d.ts

@@ -25,6 +25,6 @@ export interface BaseRef {
     /**
      * 组件外层dom元素
      * @en The outer DOM element of the component
-     * */
+     */
     dom: HTMLDivElement | null;
 }

package/cjs/avatar/group.js

@@ -57,7 +57,7 @@ var Group = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: domRef,
     style: style,
-    className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", "group-" + size)
+    className: (0, _mobileUtils.cls)(className, prefixCls + "-avatar-group", prefixCls + "-avatar-group-size-" + size, "group-" + size)
   }, /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
     value: {
       isGroup: true,

package/cjs/avatar/index.d.ts

@@ -9,7 +9,7 @@ declare const _default: React.ForwardRefExoticComponent<AvatarProps<ImageProps &
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 头像
  * @name_en Avatar

package/cjs/avatar/index.js

@@ -38,7 +38,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function componentGenerator(Comp) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-    var _cls;
+    var _cls, _cls2;
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         prefixCls = _useContext.prefixCls;
@@ -77,10 +77,7 @@ function componentGenerator(Comp) {
         style = _props$style === void 0 ? {} : _props$style,
         _props$imageProps = props.imageProps,
         imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
-        _props$defaultOverLap = props.defaultOverLap,
-        defaultOverLap = _props$defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
-      className: prefixCls + "-avatar-default"
-    }) : _props$defaultOverLap,
+        defaultOverLap = props.defaultOverLap,
         onClickDecoration = props.onClickDecoration,
         onClick = props.onClick;
     var domRef = (0, _react.useRef)(null);
@@ -140,19 +137,19 @@ function componentGenerator(Comp) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
       style: style,
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, {
-        'with-info': Boolean(avatarName)
-      }),
+      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-wrapper", className, size, shape, prefixCls + "-avatar-wrapper-shape-" + shape, (_cls = {}, _cls[prefixCls + "-avatar-wrapper-with-info " + prefixCls + "-avatar-wrapper-with-info-size-" + size + " with-info"] = Boolean(avatarName), _cls)),
       onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar", size, shape, (_cls = {}, _cls[prefixCls + "-text-avatar"] = isTextAvatar, _cls[prefixCls + "-image-avatar"] = isImageAvatar, _cls['default-overlap'] = useDefaultAvatar, _cls)),
+      className: (0, _mobileUtils.cls)(prefixCls + "-avatar", prefixCls + "-avatar-size-" + size, size, prefixCls + "-avatar-shape-" + shape, shape, (_cls2 = {}, _cls2[prefixCls + "-text-avatar " + prefixCls + "-avatar-mode-text"] = isTextAvatar, _cls2[prefixCls + "-image-avatar " + prefixCls + "-avatar-mode-image"] = isImageAvatar, _cls2[prefixCls + "-avatar-default-overlap default-overlap"] = useDefaultAvatar, _cls2)),
       style: avatarStyle,
       ref: avatarRef
-    }, children, useDefaultAvatar && defaultOverLap, isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
+    }, children, useDefaultAvatar && (defaultOverLap === void 0 ? /*#__PURE__*/_react.default.createElement(_IconUserFill.default, {
+      className: prefixCls + "-avatar-default " + prefixCls + "-avatar-default-icon-size-" + size
+    }) : defaultOverLap), isImageAvatar && src && /*#__PURE__*/_react.default.createElement(Comp, (0, _extends2.default)({
       className: prefixCls + "-avatar-img",
       src: src
     }, imageProps)), isTextAvatar && /*#__PURE__*/_react.default.createElement("span", {
-      className: prefixCls + "-avatar-text",
+      className: prefixCls + "-avatar-text " + prefixCls + "-avatar-text-size-" + size,
       ref: avatarTextRef,
       style: {
         transform: "scale(" + textScale + ")"
@@ -163,9 +160,9 @@ function componentGenerator(Comp) {
     }, decoration)), renderInfo, !renderInfo && avatarName && /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-avatar-info")
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-name")
+      className: prefixCls + "-avatar-name " + prefixCls + "-avatar-name-size-" + size
     }, avatarName), avatarDesc && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-avatar-desc")
+      className: prefixCls + "-avatar-desc " + prefixCls + "-avatar-desc-size-" + size
     }, avatarDesc)));
   });
 }
@@ -174,7 +171,7 @@ var Avatar = componentGenerator(_image.BaseImage);
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 头像
  * @name_en Avatar

package/cjs/avatar/style/css/index.css

@@ -1,74 +1,3 @@
-.arco-avatar-wrapper {
-  display: inline-block;
-}
-.arco-avatar-wrapper.with-info.ultra-small {
-  height:  1.12rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-name {
-  font-size:  0.26rem ;
-  line-height:  0.36rem ;
-}
-.arco-avatar-wrapper.ultra-small .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.2rem ;
-  line-height:  0.28rem ;
-}
-.arco-avatar-wrapper.with-info.smaller {
-  height:  1.28rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-name {
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.smaller .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.small {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-name {
-  font-size:  0.32rem ;
-  line-height:  0.48rem ;
-}
-.arco-avatar-wrapper.small .arco-avatar-desc {
-  margin-top:  0 ;
-  font-size:  0.24rem ;
-  line-height:  0.32rem ;
-}
-.arco-avatar-wrapper.with-info.medium {
-  height:  1.6rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.medium .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info.large {
-  height:  1.76rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-name {
-  font-size:  0.36rem ;
-  line-height:  0.52rem ;
-}
-.arco-avatar-wrapper.large .arco-avatar-desc {
-  margin-top:  0.04rem ;
-  font-size:  0.28rem ;
-  line-height:  0.4rem ;
-}
-.arco-avatar-wrapper.with-info {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-}
 .arco-avatar {
   position: relative;
   font-size: 0;
@@ -84,104 +13,134 @@
   color:  #fff ;
   background-color:  #4080FF ;
 }
-.arco-avatar.arco-image-avatar {
+.arco-avatar-mode-image {
   background-color: transparent;
 }
-.arco-avatar.default-overlap {
+.arco-avatar-default-overlap {
   background-color:  #c9cdd4 ;
 }
-.arco-avatar.circle {
+.arco-avatar-shape-circle {
   border-radius: 50%;
 }
-.arco-avatar.circle .arco-avatar-img .image-content {
+.arco-avatar-shape-circle .arco-avatar-img .image-content {
   border-radius: 50%;
 }
-.arco-avatar.square {
+.arco-avatar-shape-square {
   border-radius: 0.08rem;
 }
-.arco-avatar.square .arco-avatar-img .image-content {
+.arco-avatar-shape-square .arco-avatar-img .image-content {
   border-radius: 0.08rem;
 }
-.arco-avatar.group-ultra-small .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
-}
-.arco-avatar.group-ultra-small .arco-avatar {
-  border-width:  0.02rem ;
-}
-.arco-avatar.ultra-small {
+.arco-avatar-size-ultra-small {
   width:  0.48rem ;
   height:  0.48rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-default {
+.arco-avatar-default-icon-size-ultra-small {
   font-size:  0.24rem ;
 }
-.arco-avatar.ultra-small .arco-avatar-text {
+.arco-avatar-text-size-ultra-small {
   font-size:  0.2rem ;
 }
-.arco-avatar.group-smaller .arco-avatar-wrapper {
-  margin-left:  -0.16rem ;
+.arco-avatar-wrapper-with-info-size-ultra-small {
+  height:  1.12rem ;
 }
-.arco-avatar.group-smaller .arco-avatar {
-  border-width:  0.02rem ;
+.arco-avatar-name-size-ultra-small {
+  font-size:  0.26rem ;
+  line-height:  0.36rem ;
 }
-.arco-avatar.smaller {
+.arco-avatar-desc-size-ultra-small {
+  margin-top:  0.04rem ;
+  font-size:  0.2rem ;
+  line-height:  0.28rem ;
+}
+.arco-avatar-size-smaller {
   width:  0.64rem ;
   height:  0.64rem ;
 }
-.arco-avatar.smaller .arco-avatar-default {
+.arco-avatar-default-icon-size-smaller {
   font-size:  0.32rem ;
 }
-.arco-avatar.smaller .arco-avatar-text {
+.arco-avatar-text-size-smaller {
   font-size:  0.24rem ;
 }
-.arco-avatar.group-small .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-smaller {
+  height:  1.28rem ;
 }
-.arco-avatar.group-small .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-smaller {
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.small {
+.arco-avatar-desc-size-smaller {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
+}
+.arco-avatar-size-small {
   width:  0.8rem ;
   height:  0.8rem ;
 }
-.arco-avatar.small .arco-avatar-default {
+.arco-avatar-default-icon-size-small {
   font-size:  0.4rem ;
 }
-.arco-avatar.small .arco-avatar-text {
+.arco-avatar-text-size-small {
   font-size:  0.28rem ;
 }
-.arco-avatar.group-medium .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-small {
+  height:  1.6rem ;
 }
-.arco-avatar.group-medium .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-small {
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+}
+.arco-avatar-desc-size-small {
+  margin-top:  0 ;
+  font-size:  0.24rem ;
+  line-height:  0.32rem ;
 }
-.arco-avatar.medium {
+.arco-avatar-size-medium {
   width:  0.96rem ;
   height:  0.96rem ;
 }
-.arco-avatar.medium .arco-avatar-default {
+.arco-avatar-default-icon-size-medium {
   font-size:  0.48rem ;
 }
-.arco-avatar.medium .arco-avatar-text {
+.arco-avatar-text-size-medium {
   font-size:  0.32rem ;
 }
-.arco-avatar.group-large .arco-avatar-wrapper {
-  margin-left:  -0.24rem ;
+.arco-avatar-wrapper-with-info-size-medium {
+  height:  1.6rem ;
 }
-.arco-avatar.group-large .arco-avatar {
-  border-width:  0.03rem ;
+.arco-avatar-name-size-medium {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-medium {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
 }
-.arco-avatar.large {
+.arco-avatar-size-large {
   width:  1.12rem ;
   height:  1.12rem ;
 }
-.arco-avatar.large .arco-avatar-default {
+.arco-avatar-default-icon-size-large {
   font-size:  0.56rem ;
 }
-.arco-avatar.large .arco-avatar-text {
+.arco-avatar-text-size-large {
   font-size:  0.32rem ;
 }
+.arco-avatar-wrapper-with-info-size-large {
+  height:  1.76rem ;
+}
+.arco-avatar-name-size-large {
+  font-size:  0.36rem ;
+  line-height:  0.52rem ;
+}
+.arco-avatar-desc-size-large {
+  margin-top:  0.04rem ;
+  font-size:  0.28rem ;
+  line-height:  0.4rem ;
+}
 .arco-avatar-img {
   width: 100%;
   height: 100%;
@@ -195,6 +154,17 @@
           flex: 0 0 auto;
   font-weight: bold;
 }
+.arco-avatar-wrapper {
+  display: inline-block;
+}
+.arco-avatar-wrapper-with-info {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
 .arco-avatar-info {
   display: -webkit-box;
   display: -webkit-flex;
@@ -214,43 +184,43 @@
 .arco-avatar-desc {
   color:  #86909c ;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle {
   position: relative;
 }
-.arco-avatar-group .arco-avatar-wrapper.circle:first-child {
+.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
   margin-left: 0;
 }
 .arco-avatar-group .arco-avatar {
   border-style: solid;
   border-color:  #ffffff ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar-wrapper {
+.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-ultra-small .arco-avatar {
+.arco-avatar-group-size-ultra-small .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar-wrapper {
+.arco-avatar-group-size-smaller .arco-avatar-wrapper {
   margin-left:  -0.16rem ;
 }
-.arco-avatar-group.group-smaller .arco-avatar {
+.arco-avatar-group-size-smaller .arco-avatar {
   border-width:  0.02rem ;
 }
-.arco-avatar-group.group-small .arco-avatar-wrapper {
+.arco-avatar-group-size-small .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-small .arco-avatar {
+.arco-avatar-group-size-small .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar-wrapper {
+.arco-avatar-group-size-medium .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-medium .arco-avatar {
+.arco-avatar-group-size-medium .arco-avatar {
   border-width:  0.03rem ;
 }
-.arco-avatar-group.group-large .arco-avatar-wrapper {
+.arco-avatar-group-size-large .arco-avatar-wrapper {
   margin-left:  -0.24rem ;
 }
-.arco-avatar-group.group-large .arco-avatar {
+.arco-avatar-group-size-large .arco-avatar {
   border-width:  0.03rem ;
 }