@arco-design/mobile-react 2.19.2-ee92494.5 → 2.20.0

package/tokens/app/arcodesign/default/index.json

@@ -971,18 +971,6 @@
             "en": "Base font size used for rem conversion"
         }
     },
-    "buttonBorderColor": {
-        "cssKey": "button-border-color",
-        "desc": "border颜色",
-        "override": "button-border",
-        "value": "@primary-color",
-        "jsValue": "@global@primaryColor",
-        "staticValue": "#165dff",
-        "localeDesc": {
-            "ch": "border颜色",
-            "en": "Button Border color"
-        }
-    },
     "buttonDefaultBackground": {
         "cssKey": "button-default-background",
         "desc": "default 类型按钮背景色",
@@ -1139,6 +1127,18 @@
             "en": "Huge button font size"
         }
     },
+    "buttonIconTextGutter": {
+        "cssKey": "button-icon-text-gutter",
+        "desc": "按钮图标与文字的间距",
+        "override": "",
+        "value": "~`pxtorem(4)`",
+        "jsValue": "@getRem@4",
+        "staticValue": "0.08rem",
+        "localeDesc": {
+            "ch": "按钮图标与文字的间距",
+            "en": "Gutter between icon and text"
+        }
+    },
     "buttonLargeHeight": {
         "cssKey": "button-large-height",
         "desc": "large 按钮高度",
@@ -1175,6 +1175,18 @@
             "en": "Large button font size"
         }
     },
+    "buttonLineHeight": {
+        "cssKey": "button-line-height",
+        "desc": "按钮的行高",
+        "override": "button-border",
+        "value": "1.2",
+        "jsValue": "1.2",
+        "staticValue": "1.2",
+        "localeDesc": {
+            "ch": "按钮的行高",
+            "en": "Button line height"
+        }
+    },
     "buttonMediumHeight": {
         "cssKey": "button-medium-height",
         "desc": "medium 按钮高度",
@@ -1309,14 +1321,14 @@
     },
     "buttonRadius": {
         "cssKey": "button-radius",
-        "desc": "圆角大小",
+        "desc": "shape=semi时圆角大小",
         "override": "",
         "value": "2PX",
         "jsValue": "2PX",
         "staticValue": "2PX",
         "localeDesc": {
-            "ch": "圆角大小",
-            "en": "Button border radius"
+            "ch": "shape=semi时圆角大小",
+            "en": "Button border radius when shape=semi"
         }
     },
     "buttonSmallHeight": {

package/tokens/app/arcodesign/default/index.less

@@ -158,8 +158,9 @@
 @avatar-desc-ultra-small-margin-top: ~`pxtorem(2)`;
 @avatar-name-color: @font-color;
 @avatar-desc-color: @sub-info-font-color;
-@button-border-color: @primary-color;
+@button-line-height: 1.2;
 @button-radius: 2PX;
+@button-icon-text-gutter: ~`pxtorem(4)`;
 @button-primary-background: @primary-color;
 @button-primary-clicked-background: #0E42D2;
 @button-primary-disabled-background: @primary-disabled-color;

package/umd/avatar/group.js

@@ -64,7 +64,7 @@
     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/umd/avatar/index.js

@@ -38,7 +38,7 @@
 
   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 @@
           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 @@
       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 @@
       }, 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)));
     });
   }

package/umd/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 ;
 }

package/umd/avatar/style/index.less

@@ -2,16 +2,6 @@
 
 @size-map: @avatar-size-map;
 
-.@{prefix}-avatar-wrapper {
-    display: inline-block;
-    .set-with-info-avatar-size(length(@size-map));
-
-    &.with-info {
-        display: flex;
-        align-items: center;
-    }
-}
-
 .@{prefix}-avatar {
     position: relative;
     font-size: 0;
@@ -20,21 +10,23 @@
     justify-content: center;
     .use-var(color, avatar-text-font-color);
     .use-var(background-color, avatar-background);
-    &.@{prefix}-image-avatar {
+
+    &-mode-image {
         background-color: transparent;
     }
 
-    &.default-overlap {
+    &-default-overlap {
         .use-var(background-color, avatar-default-overlap-background);
     }
 
-    &.circle {
+    &-shape-circle {
         .set-avatar-radius(50%);
     }
 
-    &.square {
+    &-shape-square {
         .set-avatar-radius(.08rem);
     }
+
     .set-avatar-size(length(@size-map));
 
     &-img {
@@ -50,26 +42,34 @@
         flex: 0 0 auto;
         font-weight: bold;
     }
-}
 
-.@{prefix}-avatar-info {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    .rem(margin-left, 16);
-}
+    &-wrapper {
+        display: inline-block;
 
-.@{prefix}-avatar-name {
-    .use-var(color, avatar-name-color);
-}
+        &-with-info {
+            display: flex;
+            align-items: center;
+        }
+    }
 
-.@{prefix}-avatar-desc {
-    .use-var(color, avatar-desc-color);
-}
+    &-info {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .rem(margin-left, 16);
+    }
 
+    &-name {
+        .use-var(color, avatar-name-color);
+    }
+
+    &-desc {
+        .use-var(color, avatar-desc-color);
+    }
+}
 
 .@{prefix}-avatar-group {
-    .@{prefix}-avatar-wrapper.circle {
+    .@{prefix}-avatar-wrapper-shape-circle {
         position: relative; // 为了让z-index属性生效
 
         &:first-child {
@@ -92,39 +92,12 @@
     }
 }
 
-// 循环设置各头像大小的属性
-
-.set-with-info-avatar-size(@index) when (@index > 0) {
-
-    @size: extract(@size-map, @index);
-
-    // 有辅助信息的样式
-    &.with-info.@{size} {
-        .use-var(height, "avatar-info-box-@{size}-size");
-    }
-
-    // 用户名样式
-    &.@{size} .@{prefix}-avatar-name {
-        .use-var(font-size, "avatar-name-@{size}-font-size");
-        .use-var(line-height, "avatar-name-@{size}-line-height");
-    }
-
-    // 用户描述样式
-    &.@{size} .@{prefix}-avatar-desc {
-        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
-        .use-var(font-size, "avatar-desc-@{size}-font-size");
-        .use-var(line-height, "avatar-desc-@{size}-line-height");
-    }
-
-    .set-with-info-avatar-size(@index - 1);
-}
-
 // 循环设置头像叠层的样式
 .set-avatar-group-size(@index) when (@index > 0) {
 
     @size: extract(@size-map, @index);
 
-    &.group-@{size} {
+    &-size-@{size} {
         .@{prefix}-avatar-wrapper {
             .use-var(margin-left, "avatar-group-@{size}-size-offset");
         }
@@ -141,24 +114,33 @@
 
     @size: extract(@size-map, @index);
 
-    &.group-@{size} {
-        .@{prefix}-avatar-wrapper {
-            .use-var(margin-left, "avatar-group-@{size}-size-offset");
-        }
-        .@{prefix}-avatar {
-            .use-var(border-width, "avatar-group-@{size}-size-border");
-        }
-    }
-
-    &.@{size} {
+    &-size-@{size} {
         .use-var(width, "avatar-@{size}-size");
         .use-var(height, "avatar-@{size}-size");
-        .@{prefix}-avatar-default {
-            .use-var(font-size, "avatar-default-overlap-@{size}-size");
-        }
-        .@{prefix}-avatar-text {
-            .use-var(font-size, "avatar-@{size}-text-font-size");
-        }
+    }
+    &-default-icon-size-@{size} {
+        .use-var(font-size, "avatar-default-overlap-@{size}-size");
+    }
+    &-text-size-@{size} {
+        .use-var(font-size, "avatar-@{size}-text-font-size");
+    }
+
+    // 有辅助信息的样式
+    &-wrapper-with-info-size-@{size} {
+        .use-var(height, "avatar-info-box-@{size}-size");
+    }
+
+    // 用户名样式
+    &-name-size-@{size} {
+        .use-var(font-size, "avatar-name-@{size}-font-size");
+        .use-var(line-height, "avatar-name-@{size}-line-height");
+    }
+
+    // 用户描述样式
+    &-desc-size-@{size} {
+        .use-var(margin-top, "avatar-desc-@{size}-margin-top");
+        .use-var(font-size, "avatar-desc-@{size}-font-size");
+        .use-var(line-height, "avatar-desc-@{size}-line-height");
     }
 
     .set-avatar-size(@index - 1);