rsuite 4.8.5 → 4.8.9

package/src/Steps/styles/common.less

@@ -41,13 +41,13 @@
         text-indent: -9999px;
 
         &::before {
-          .icon-font;
+          .icon-font();
 
-          width: @steps-icon-diameter - 2px;
-          height: @steps-icon-diameter - 2px;
+          width: (@steps-icon-diameter - 2px);
+          height: (@steps-icon-diameter - 2px);
           font-size: @steps-icon-size-default-font-size;
           // Minus 2px border width;
-          line-height: unit((@steps-icon-diameter - 2px)/12);
+          line-height: unit(((@steps-icon-diameter - 2px)/12));
           display: block;
           position: absolute;
           top: 0;
@@ -189,7 +189,7 @@
 
     // There is a 10px spacing between each item.
     &:not(:first-child) {
-      padding-left: @steps-icon-space-width + @steps-item-spacing;
+      padding-left: (@steps-icon-space-width + @steps-item-spacing);
 
       .@{ns}steps-item-icon-wrapper {
         left: @steps-item-spacing;
@@ -198,13 +198,13 @@
   }
 
   .@{ns}steps-item-content {
-    height: @steps-title-font-size * @steps-title-line-height;
+    height: (@steps-title-font-size * @steps-title-line-height);
   }
 
   .@{ns}steps-item-title {
     &::after {
       content: '';
-      top: @steps-icon-diameter / 2;
+      top: (@steps-icon-diameter / 2);
       left: 100%;
       width: 9999px;
       border-top-width: 1px;
@@ -231,7 +231,7 @@
   .@{ns}steps-item-tail {
     top: @steps-icon-space-width;
     bottom: 0;
-    left: @steps-icon-diameter / 2;
+    left: (@steps-icon-diameter / 2);
     border-left-width: 1px;
     border-left-style: solid;
   }
@@ -247,11 +247,11 @@
   }
 
   &.@{ns}steps-horizontal .@{ns}steps-item:not(:first-child) {
-    padding-left: @small-steps-icon-space-width + @steps-icon-spacing;
+    padding-left: (@small-steps-icon-space-width + @steps-icon-spacing);
   }
 
   &.@{ns}steps-vertical .@{ns}steps-item-tail {
-    left: @small-steps-icon-diameter / 2;
+    left: (@small-steps-icon-diameter / 2);
   }
 
   &.@{ns}steps-horizontal .@{ns}steps-item-title::after {
@@ -283,8 +283,8 @@
   // Finish status show check mark.
   .@{ns}steps-item-status-finish .@{ns}steps-item-icon-wrapper:not(.@{ns}steps-item-custom-icon) .@{ns}steps-item-icon::before,
   .@{ns}steps-item-status-error .@{ns}steps-item-icon-wrapper:not(.@{ns}steps-item-custom-icon) .@{ns}steps-item-icon::before {
-    width: @small-steps-icon-diameter - 2px;
-    height: @small-steps-icon-diameter - 2px;
-    line-height: unit((@small-steps-icon-diameter - 2px)/12);
+    width: (@small-steps-icon-diameter - 2px);
+    height: (@small-steps-icon-diameter - 2px);
+    line-height: unit(((@small-steps-icon-diameter - 2px)/12));
   }
 }

package/src/Table/styles/common.less

@@ -27,7 +27,7 @@
     border-bottom: 1px solid @table-border-color;
 
     &.virtualized {
-      .pointer-event-none;
+      .pointer-event-none();
     }
   }
 
@@ -130,7 +130,7 @@
     background-color: @table-loader-backdrop-color;
     opacity: 0;
     transition: opacity @table-loader-transition;
-    .pointer-event-none;
+    .pointer-event-none();
   }
 
   &-loader {
@@ -143,7 +143,7 @@
 
     &-icon {
       .set-side-length(@loader-default-diameter);
-      .loader-spin;
+      .loader-spin();
 
       display: inline-block;
       position: relative;
@@ -192,7 +192,7 @@
     &-content {
       padding: @table-body-content-padding-vertical @table-content-padding-horizontal;
 
-      .ellipsis;
+      .ellipsis();
     }
 
     &-header &-content {
@@ -239,7 +239,7 @@
   }
 
   &-column-resize-spanner {
-    .column-resize-spanner;
+    .column-resize-spanner();
 
     border-left: @table-column-resize-spanner-gap-width solid @table-spanner-background;
     box-sizing: content-box;
@@ -291,10 +291,6 @@
       background: @table-body-background;
     }
 
-    &-fixed-right {
-      margin-left: @table-scrollbar-width;
-    }
-
     &-shadow,
     &-left-shadow {
       box-shadow: 3px @table-table-cell-fixed-shadow /* rtl:ignore */;
@@ -315,7 +311,7 @@
     z-index: @zindex-table-mouse-area;
 
     > span {
-      .column-resize-spanner;
+      .column-resize-spanner();
 
       background-color: @table-resize-mouse-color;
       position: absolute;

package/src/Tag/styles/common.less

@@ -29,7 +29,7 @@
     font-size: 12px;
 
     &::after {
-      .icon-font;
+      .icon-font();
 
       content: @default-close-btn-content;
     }
@@ -53,4 +53,4 @@
   margin-left: @tag-gap;
 }
 
-.generate-spectrum-tags;
+.generate-spectrum-tags();

package/src/TagPicker/styles/common.less

@@ -18,12 +18,9 @@
   }
 
   .@{ns}tag {
-    position: relative;
-    // make sure tag in front of toggle
-    z-index: @zindex-picker-toggle + 1;
     max-width: ~'calc(100% - @{tag-picker-content-padding-horizontal})';
     vertical-align: top;
-    .ellipsis-basic;
+    .ellipsis-basic();
   }
 
   .@{ns}picker-search-input,
@@ -41,6 +38,9 @@
   }
 
   .@{ns}picker-tag-wrapper {
+    position: relative;
+    // make sure tag in front of toggle
+    z-index: @zindex-picker-toggle + 1;
     padding-bottom: @tag-picker-content-padding-vertical;
   }
 

package/src/Timeline/styles/common.less

@@ -62,7 +62,7 @@
   // Last item tail need set height.
   &-item:last-child &-item-tail {
     bottom: auto;
-    height: @time-line-dot-center-gap+ @time-line-dot-side-length;
+    height: (@time-line-dot-center-gap + @time-line-dot-side-length);
   }
 
   &-endless &-item:last-child &-item-tail {
@@ -90,13 +90,13 @@
 
   // Align alternate
   &-align-alternate &-item-dot {
-    @dot-offset: @time-line-dot-side-length / 2;
+    @dot-offset: (@time-line-dot-side-length / 2);
 
     left: ~'calc(50% - @{dot-offset})';
   }
 
   &-align-alternate &-item-tail {
-    @tail-offset: @time-line-tail-width / 2;
+    @tail-offset: (@time-line-tail-width / 2);
 
     left: ~'calc(50% - @{tail-offset})';
   }
@@ -123,13 +123,13 @@
   }
 
   &-with-time &-item-dot {
-    @dot-offset: @time-line-dot-side-length / 2;
+    @dot-offset: (@time-line-dot-side-length / 2);
 
     left: ~'calc(50% - @{dot-offset})';
   }
 
   &-with-time &-item-tail {
-    @tail-offset: @time-line-tail-width / 2;
+    @tail-offset: (@time-line-tail-width / 2);
 
     left: ~'calc(50% - @{tail-offset})';
   }

package/src/Timeline/styles/mixin.less

@@ -4,7 +4,7 @@
   }
 
   &-align-@{align} &-item-tail {
-    @{align}: (@time-line-dot-side-length - @time-line-tail-width)/2;
+    @{align}: ((@time-line-dot-side-length - @time-line-tail-width)/2);
   }
 
   &-align-@{align} &-item {

package/src/Toggle/styles/mixin.less

@@ -1,27 +1,27 @@
 .toggle-size-variant(@toogle-height,@min-width,@toggle-handle-gap,@toggle-inner-margin,@toggle-inner-font-size) {
-  @handle-diameter: @toogle-height - @toggle-handle-gap*2;
+  @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
 
   height: @toogle-height;
   min-width: @min-width;
-  border-radius: @toogle-height / 2;
+  border-radius: (@toogle-height / 2);
 
   &::after {
     width: @handle-diameter;
     height: @handle-diameter;
     left: @toggle-handle-gap;
     top: @toggle-handle-gap;
-    border-radius: @handle-diameter / 2;
+    border-radius: (@handle-diameter / 2);
   }
 
   &:active::after {
-    width: @handle-diameter * @toggle-active-scale;
+    width: (@handle-diameter * @toggle-active-scale);
   }
 
   .@{ns}btn-toggle-inner {
     margin-left: @toogle-height;
     margin-right: @toggle-inner-margin;
     height: @toogle-height;
-    line-height: unit(@toogle-height / @toggle-inner-font-size);
+    line-height: unit((@toogle-height / @toggle-inner-font-size));
     font-size: @toggle-inner-font-size;
 
     .@{ns}icon {

package/src/Tooltip/styles/common.less

@@ -45,7 +45,7 @@
 
 // Common style for .placement-top*
 .@{ns}tooltip[class*='placement-top'] {
-  margin-top: -@tooltip-arrow-width;
+  margin-top: -(@tooltip-arrow-width + 2px);
   .set-translate-transition(0, -@tooltip-translate-distance);
 
   .@{ns}tooltip-arrow {
@@ -62,7 +62,7 @@
 
 // Common style for .placement-bottom*
 .@{ns}tooltip[class*='placement-bottom'] {
-  margin-top: @tooltip-arrow-width;
+  margin-top: (@tooltip-arrow-width + 2px);
   .set-translate-transition(0, @tooltip-translate-distance);
 
   .@{ns}tooltip-arrow {
@@ -80,7 +80,7 @@
 /* rtl:begin:ignore */
 // Common style for .placement-right*
 .@{ns}tooltip[class*='placement-right'] {
-  margin-left: @tooltip-arrow-width;
+  margin-left: (@tooltip-arrow-width + 2px);
   .set-translate-transition(@tooltip-translate-distance, 0);
 
   .@{ns}tooltip-arrow {
@@ -97,7 +97,7 @@
 
 // Common style for .placement-lef*
 .@{ns}tooltip[class*='placement-left'] {
-  margin-left: -@tooltip-arrow-width;
+  margin-left: -(@tooltip-arrow-width + 2px);
   .set-translate-transition(-@tooltip-translate-distance, 0);
 
   .@{ns}tooltip-arrow {

package/src/TreePicker/TreePicker.tsx

@@ -1123,6 +1123,7 @@ class TreePicker extends React.Component<TreePickerProps, TreePickerState> {
             componentClass={toggleComponentClass}
             hasValue={hasValidValue}
             active={this.state.active}
+            aria-disabled={disabled}
           >
             {selectedElement || locale.placeholder}
           </PickerToggle>

package/src/TreePicker/styles/common.less

@@ -43,7 +43,7 @@
   margin: 0 0 4px 0;
 
   &-active > .@{tpns}-node-label > .@{tpns}-node-label-content {
-    .picker-item-active;
+    .picker-item-active();
 
     color: @picker-tree-node-active-color;
     background-color: @picker-tree-node-active-bg;
@@ -197,7 +197,7 @@
   }
 
   > .@{tpns}-node-custom-icon {
-    .node-item-prepend-icon;
+    .node-item-prepend-icon();
   }
 }
 
@@ -228,7 +228,7 @@
       margin: 0;
 
       > .@{tpns}-node-label > .@{tpns}-node-label-content {
-        .ellipsis;
+        .ellipsis();
 
         display: block;
       }

package/src/TreePicker/test/TreePickerSpec.js

@@ -73,6 +73,7 @@ describe('TreePicker', () => {
     const instance = getDOMNode(<TreePicker disabled data={[]} />);
 
     assert.ok(instance.className.match(/\bdisabled\b/));
+    assert.equal(instance.querySelector('[role=combobox]').getAttribute('aria-disabled'), 'true');
   });
 
   it('Should be block', () => {

package/src/Uploader/styles/common.less

@@ -83,7 +83,7 @@
     &-icon-loading {
       .@{uplns}-file-item-icon {
         .set-side-length(@loader-default-diameter);
-        .loader-spin;
+        .loader-spin();
       }
     }
 
@@ -94,7 +94,7 @@
         font-style: normal;
         color: @uploader-default-font-color;
         font-size: @uploader-file-item-icon-font-size;
-        line-height: unit(@line-height-computed / @uploader-file-item-icon-font-size);
+        line-height: unit((@line-height-computed / @uploader-file-item-icon-font-size));
       }
     }
 
@@ -117,7 +117,7 @@
     }
 
     &-title {
-      .ellipsis;
+      .ellipsis();
 
       flex: 1 1 auto;
     }
@@ -134,7 +134,7 @@
       .ie-display(table);
 
       > a {
-        .reset-link-text-decoration;
+        .reset-link-text-decoration();
       }
     }
 
@@ -146,7 +146,7 @@
       right: @padding-base-horizontal;
       color: @uploader-light-font-color;
       cursor: pointer;
-      .icon-font;
+      .icon-font();
 
       &:hover,
       &:focus {
@@ -154,7 +154,7 @@
       }
 
       &::before {
-        .icon-font;
+        .icon-font();
 
         content: @default-close-btn-content;
       }
@@ -192,12 +192,12 @@
 
 .@{uplns}-picture {
   display: inline-block;
-  .clearfix;
+  .clearfix();
 
   .@{uplns}-trigger-btn {
     .btn(base);
-    .button-ripple;
-    .btn-subtle;
+    .button-ripple();
+    .btn-subtle();
 
     width: @uploader-picture-side-length;
     height: @uploader-picture-side-length;
@@ -244,7 +244,7 @@
       z-index: @zindex-uploader-picture-preview;
 
       > img {
-        .img-cover;
+        .img-cover();
       }
     }
 
@@ -297,7 +297,7 @@
       }
 
       &::before {
-        .icon-font;
+        .icon-font();
 
         content: @default-close-btn-content;
       }
@@ -326,7 +326,7 @@
 
       .@{uplns}-file-item-icon {
         .set-side-length(@loader-default-diameter);
-        .loader-spin;
+        .loader-spin();
 
         display: inline-block;
         position: relative;
@@ -355,7 +355,7 @@
   }
 
   .@{uplns}-trigger:not(.@{uplns}-trigger-disabled) .@{uplns}-trigger-btn {
-    .button-ripple;
+    .button-ripple();
 
     &:focus,
     &.focus {
@@ -417,7 +417,7 @@
       border-radius: @border-radius-base 0 0 @border-radius-base;
 
       > img {
-        .img-cover;
+        .img-cover();
       }
     }
 
@@ -430,7 +430,7 @@
       }
 
       .@{uplns}-file-item-title {
-        .ellipsis;
+        .ellipsis();
 
         color: @uploader-default-font-color;
 
@@ -461,7 +461,7 @@
       }
 
       &::before {
-        .icon-font;
+        .icon-font();
 
         content: @default-close-btn-content;
       }
@@ -499,7 +499,7 @@
 
       .@{uplns}-file-item-icon {
         .set-side-length(@loader-default-diameter);
-        .loader-spin;
+        .loader-spin();
 
         display: inline-block;
         position: relative;

package/src/styles/mixins/utilities.less

@@ -42,7 +42,7 @@
 }
 
 .ellipsis-basic() {
-  .text-overflow;
+  .text-overflow();
 }
 
 .ellipsis(@substract:0) {