@arco-design/mobile-react 2.21.1 → 2.21.3

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.21.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.2...@arco-design/mobile-react@2.21.3) (2022-09-30)
+
+
+### Bug Fixes
+
+* `Ellipsis` special case for truncateHTML ([fa9db03](https://github.com/arco-design/arco-design-mobile/commit/fa9db03baecbb378e38d2217eddb85dec59d27d4))
+* `ImagePicker` import grid style ([e257ce0](https://github.com/arco-design/arco-design-mobile/commit/e257ce00dc3ecd4c61934149751fb817d3242159))
+* `Tabs` tab bar underline optimize ([20c9621](https://github.com/arco-design/arco-design-mobile/commit/20c962113e8a0dc43995813dda328239a1807a50))
+
+
+
+
+
+## [2.21.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.1...@arco-design/mobile-react@2.21.2) (2022-09-07)
+
+
+### Bug Fixes
+
+* `Button` fix style when use reset.less ([bb05f2c](https://github.com/arco-design/arco-design-mobile/commit/bb05f2c279089115f73fc39c523c9767ed37a8c4))
+
+
+
+
+
 ## [2.21.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.0...@arco-design/mobile-react@2.21.1) (2022-09-01)
 
 

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/@arco-design/mobile-react@2.21.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/index.min.js"></script>
 ```
 
 ## Full import

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/@arco-design/mobile-react@2.21.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.21.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/button/style/css/index.css

@@ -18,14 +18,21 @@
   user-select: none;
   /* Non-prefixed version, currently*/
 }
-.arco-button-inline {
+.arco-button.arco-button-inline {
   width: auto;
   display: inline-block;
 }
-.arco-button-type-ghost {
+.arco-button.arco-button-type-ghost {
   background:  transparent ;
   color:  #165dff ;
 }
+.arco-button.arco-button-type-ghost-disabled {
+  background:  transparent ;
+  color:  #94bfff ;
+}
+.arco-button.arco-button-type-ghost-active {
+  background:  #e8f3ff ;
+}
 .arco-button-type-ghost .bg-color-with-config {
   background: #165dff;
 }
@@ -38,17 +45,17 @@
 .arco-button-type-ghost .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button-type-ghost-disabled {
-  background:  transparent ;
-  color:  #94bfff ;
-}
-.arco-button-type-ghost-active {
-  background:  #e8f3ff ;
-}
-.arco-button-type-default {
+.arco-button.arco-button-type-default {
   background:  #E8F3FF ;
   color:  #165dff ;
 }
+.arco-button.arco-button-type-default-disabled {
+  background:  #E8F3FF ;
+  color:  #94bfff ;
+}
+.arco-button.arco-button-type-default-active {
+  background:  #94bfff ;
+}
 .arco-button-type-default .bg-color-with-config {
   background: #165dff;
 }
@@ -61,16 +68,16 @@
 .arco-button-type-default .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button-type-default-disabled {
-  background:  #E8F3FF ;
-  color:  #94bfff ;
+.arco-button.arco-button-type-primary {
+  background:  #165dff ;
+  color:  #fff ;
 }
-.arco-button-type-default-active {
+.arco-button.arco-button-type-primary-disabled {
   background:  #94bfff ;
+  color:  #E8F3FF ;
 }
-.arco-button-type-primary {
-  background:  #165dff ;
-  color:  #fff ;
+.arco-button.arco-button-type-primary-active {
+  background:  #0E42D2 ;
 }
 .arco-button-type-primary .bg-color-with-config {
   background: #fff;
@@ -84,108 +91,101 @@
 .arco-button-type-primary .stroke-color-with-config {
   stroke: #fff;
 }
-.arco-button-type-primary-disabled {
-  background:  #94bfff ;
-  color:  #E8F3FF ;
-}
-.arco-button-type-primary-active {
-  background:  #0E42D2 ;
-}
-.arco-button-type-ghost {
+.arco-button.arco-button-type-ghost {
   border: 1PX solid currentColor;
 }
-.arco-button-type-ghost.half-border {
+.arco-button.arco-button-type-ghost.half-border {
   border-width: 0;
   box-shadow: 0 0 0 1PX currentColor inset;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button-type-ghost.half-border {
+  .arco-button.arco-button-type-ghost.half-border {
     box-shadow: 0 0 0 0.5PX currentColor inset;
   }
 }
-.ios .arco-button-type-ghost.half-border,
-.arco-button-type-ghost.half-border.ios {
+.ios .arco-button.arco-button-type-ghost.half-border,
+.arco-button.arco-button-type-ghost.half-border.ios {
   box-shadow: none;
   border: 0.5PX solid currentColor;
 }
-.arco-button-size-mini {
+.arco-button.arco-button-size-mini {
   padding:  0 0.16rem ;
   height:  0.48rem ;
 }
-.arco-button-size-mini-is-round {
+.arco-button.arco-button-size-mini-is-round {
   border-radius:  0.48rem ;
 }
-.arco-button-size-mini-is-square {
+.arco-button.arco-button-size-mini-is-square {
   border-radius: 0;
 }
-.arco-button-size-mini .arco-button-icon,
-.arco-button-size-mini i,
-.arco-button-size-mini .arco-button-text,
-.arco-button-size-mini svg {
+.arco-button.arco-button-size-mini .arco-button-icon,
+.arco-button.arco-button-size-mini i,
+.arco-button.arco-button-size-mini .arco-button-text,
+.arco-button.arco-button-size-mini svg {
   font-size:  0.24rem ;
 }
-.arco-button-size-small {
+.arco-button.arco-button-size-small {
   padding:  0 0.16rem ;
   height:  0.56rem ;
 }
-.arco-button-size-small-is-round {
+.arco-button.arco-button-size-small-is-round {
   border-radius:  0.56rem ;
 }
-.arco-button-size-small-is-square {
+.arco-button.arco-button-size-small-is-square {
   border-radius: 0;
 }
-.arco-button-size-small .arco-button-icon,
-.arco-button-size-small i,
-.arco-button-size-small .arco-button-text,
-.arco-button-size-small svg {
+.arco-button.arco-button-size-small .arco-button-icon,
+.arco-button.arco-button-size-small i,
+.arco-button.arco-button-size-small .arco-button-text,
+.arco-button.arco-button-size-small svg {
   font-size:  0.28rem ;
 }
-.arco-button-size-medium {
+.arco-button.arco-button-size-medium {
   padding:  0 0.32rem ;
   height:  0.64rem ;
 }
-.arco-button-size-medium-is-round {
+.arco-button.arco-button-size-medium-is-round {
   border-radius:  0.64rem ;
 }
-.arco-button-size-medium-is-square {
+.arco-button.arco-button-size-medium-is-square {
   border-radius: 0;
 }
-.arco-button-size-medium .arco-button-icon,
-.arco-button-size-medium i,
-.arco-button-size-medium .arco-button-text,
-.arco-button-size-medium svg {
+.arco-button.arco-button-size-medium .arco-button-icon,
+.arco-button.arco-button-size-medium i,
+.arco-button.arco-button-size-medium .arco-button-text,
+.arco-button.arco-button-size-medium svg {
   font-size:  0.28rem ;
 }
-.arco-button-size-large {
+.arco-button.arco-button-size-large {
   padding:  0 0.32rem ;
   height:  0.72rem ;
 }
-.arco-button-size-large-is-round {
+.arco-button.arco-button-size-large-is-round {
   border-radius:  0.72rem ;
 }
-.arco-button-size-large-is-square {
+.arco-button.arco-button-size-large-is-square {
   border-radius: 0;
 }
-.arco-button-size-large .arco-button-icon,
-.arco-button-size-large i,
-.arco-button-size-large .arco-button-text,
-.arco-button-size-large svg {
+.arco-button.arco-button-size-large .arco-button-icon,
+.arco-button.arco-button-size-large i,
+.arco-button.arco-button-size-large .arco-button-text,
+.arco-button.arco-button-size-large svg {
   font-size:  0.3rem ;
 }
-.arco-button-size-huge {
+.arco-button.arco-button-size-huge {
   padding:  0 0.32rem ;
   height:  0.88rem ;
 }
-.arco-button-size-huge-is-round {
+.arco-button.arco-button-size-huge-is-round {
   border-radius:  0.88rem ;
 }
-.arco-button-size-huge-is-square {
+.arco-button.arco-button-size-huge-is-square {
   border-radius: 0;
 }
-.arco-button-size-huge .arco-button-icon,
-.arco-button-size-huge i,
-.arco-button-size-huge .arco-button-text,
-.arco-button-size-huge svg {
+.arco-button.arco-button-size-huge .arco-button-icon,
+.arco-button.arco-button-size-huge i,
+.arco-button.arco-button-size-huge .arco-button-text,
+.arco-button.arco-button-size-huge svg {
   font-size:  0.32rem ;
 }
 .arco-button-text-android {

package/cjs/button/style/index.less

@@ -56,14 +56,14 @@
     .use-var(border-radius, button-radius);
     .noselect();
 
-    &-inline {
+    &&-inline {
         width: auto;
         display: inline-block;
     }
 
     .set-button-type(length(@type-map));
 
-    &-type-ghost {
+    &&-type-ghost {
         .button-has-border-value(currentColor);
     }
 
@@ -101,10 +101,9 @@
 .set-button-type(@index) when (@index > 0) {
     @type: extract(@type-map, @index);
 
-    &-type-@{type} {
+    &&-type-@{type} {
         .use-var(background, 'button-@{type}-background');
         .use-var(color, 'button-@{type}-text-color');
-        .set-loading-color-var('button-@{type}-text-color');
         &-disabled {
             .use-var(background, 'button-@{type}-disabled-background');
             .use-var(color, 'button-@{type}-disabled-text-color')
@@ -113,6 +112,9 @@
             .use-var(background, 'button-@{type}-clicked-background');
         }
     }
+    &-type-@{type} {
+        .set-loading-color-var('button-@{type}-text-color');
+    }
 
     .set-button-type(@index - 1);
 }
@@ -120,7 +122,7 @@
 .set-button-size(@index) when (@index > 0) {
     @size: extract(@size-map, @index);
 
-    &-size-@{size} {
+    &&-size-@{size} {
         .use-var(padding, "button-@{size}-padding");
         .button-size-height("button-@{size}-height");
         .button-text-size("button-@{size}-text-size");

package/cjs/ellipsis/components/js-ellipsis.js

@@ -127,7 +127,13 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
             _height = _container$getBoundin3.height;
 
         if (_height > max) {
-          break;
+          if (nodes[i].childNodes && nodes[i].childNodes.length) {
+            break;
+          } else {
+            textContainer.removeChild(nodes[i]);
+            handleOnReflow(true, textContainer.innerHTML);
+            return;
+          }
         }
 
         i++;

package/cjs/image-picker/style/css/index.d.ts

@@ -1,2 +1,3 @@
 import '../../../../style/css/public.css';
+import '../../../grid/style/css';
 import './index.css';

package/cjs/image-picker/style/css/index.js

@@ -2,4 +2,6 @@
 
 require("../../../../style/css/public.css");
 
+require("../../../grid/style/css");
+
 require("./index.css");

package/cjs/image-picker/style/index.d.ts

@@ -1,2 +1,3 @@
 import '../../../style/public.less';
+import '../../grid/style';
 import './index.less';

package/cjs/image-picker/style/index.js

@@ -2,4 +2,6 @@
 
 require("../../../style/public.less");
 
+require("../../grid/style");
+
 require("./index.less");