rsuite 5.0.0-beta.5 → 5.0.0

package/Navbar/styles/index.less

@@ -33,65 +33,95 @@
   }
 
   &:focus {
-    .rs-nav-item:focus-visible,
-    .rs-nav-item.rs-nav-item-focus,
+    .rs-navbar-item:focus-visible,
+    .rs-navbar-item.rs-navbar-item-focus,
     .rs-dropdown .rs-dropdown-toggle:focus-visible,
     .rs-dropdown.rs-dropdown-focus .rs-dropdown-toggle {
+      z-index: 1;
+
       .focus-ring();
 
-      z-index: 1;
+      .high-contrast-mode({
+        .focus-ring(slim-inset);
+      });
     }
   }
+}
 
-  // Nav item content
-  > .rs-nav-item {
-    // Reset padding
-    padding: @navbar-item-padding-y @navbar-item-padding-x;
-    height: @navbar-height;
-    border-radius: 0;
-    color: inherit;
-  }
+// Nav item content
+.rs-navbar-item {
+  // Reset padding
+  padding: @navbar-item-padding-y @navbar-item-padding-x;
+  height: @navbar-height;
+  border-radius: 0;
+  color: inherit;
+  float: left;
+  background-color: transparent;
+  position: relative;
+  overflow: hidden;
+}
 
-  .rs-nav-item,
-  .rs-dropdown-item {
-    &:focus-visible {
-      .focus-ring();
+// Focus style
+.rs-navbar-brand,
+.rs-navbar-item,
+.rs-navbar-nav > .rs-dropdown-item {
+  outline: 0;
 
-      z-index: 1;
-    }
-  }
+  &:focus-visible {
+    .focus-ring();
+
+    .high-contrast-mode({
+      .focus-ring(slim-inset);
+    });
 
-  > .rs-nav-item,
-  > .rs-dropdown {
-    margin: 0 !important;
+    z-index: 2;
   }
+}
+
+.rs-navbar-item,
+.rs-navbar-nav > .rs-dropdown {
+  margin: 0 !important;
+}
 
-  // DropDown
-  > .rs-dropdown .rs-dropdown-toggle {
-    &:extend(.rs-navbar-nav > .rs-nav-item);
+// DropDown
+.rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
+  &:extend(.rs-navbar-item);
 
-    padding-right: @navbar-item-padding-x+ @dropdown-caret-width+ @dropdown-caret-padding;
+  padding-right: @navbar-item-padding-x+ @dropdown-caret-width+ @dropdown-caret-padding;
 
-    .rs-dropdown-toggle-caret {
-      top: @navbar-item-padding-y;
-      right: @navbar-item-padding-x;
+  .high-contrast-mode({
+    border: none;
+
+    &:focus-visible {
+      .focus-ring(slim-inset);
     }
+  });
+
+  .rs-dropdown-toggle-caret {
+    top: @navbar-item-padding-y;
+    right: @navbar-item-padding-x;
   }
 }
 
+.rs-navbar-item.rs-navbar-item-active {
+  .high-contrast-mode({
+    text-decoration: underline;
+  });
+}
+
 // Default Navbar
 .rs-navbar-default {
   background-color: var(--rs-navbar-default-bg);
   color: var(--rs-navbar-default-text);
 
-  .rs-nav-item:hover,
+  .rs-navbar-item:hover,
   .rs-dropdown .rs-dropdown-toggle:hover,
   .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
     background-color: var(--rs-navbar-default-hover-bg);
     color: var(--rs-navbar-default-hover-text);
   }
 
-  .rs-nav-item.rs-nav-item-active,
+  .rs-navbar-item.rs-navbar-item-active,
   .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
     color: var(--rs-navbar-default-selected-text);
   }
@@ -102,7 +132,7 @@
   background-color: var(--rs-navbar-inverse-bg);
   color: var(--rs-navbar-inverse-text);
 
-  .rs-nav-item,
+  .rs-navbar-item,
   .rs-dropdown .rs-dropdown-toggle {
     &:hover,
     &:focus {
@@ -111,9 +141,13 @@
   }
 
   // Active
-  .rs-nav-item.rs-nav-item-active,
+  .rs-navbar-item.rs-navbar-item-active,
   .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
     background-color: var(--rs-navbar-inverse-selected-bg);
+
+    .high-contrast-mode({
+      color: var(--rs-navbar-inverse-selected-text);
+    });
   }
 }
 
@@ -122,7 +156,7 @@
   background-color: transparent;
   color: var(--rs-navbar-subtle-text);
 
-  .rs-nav-item,
+  .rs-navbar-item,
   .rs-dropdown .rs-dropdown-toggle {
     &:hover,
     &:focus {
@@ -132,7 +166,7 @@
   }
 
   // Active
-  .rs-nav-item.rs-nav-item-active,
+  .rs-navbar-item.rs-navbar-item-active,
   .rs-dropdown .rs-dropdown-menu-active ~ .rs-dropdown-toggle {
     color: var(--rs-navbar-subtle-selected-text);
   }

package/Notification/styles/index.less

@@ -1,3 +1,4 @@
+@import '../../styles/common';
 @import '../../toaster/styles/animation';
 @import 'mixin';
 
@@ -14,6 +15,10 @@
   display: inline-block;
   flex: 0 0 auto;
   animation-fill-mode: forwards;
+  border-radius: @notify-border-radius;
+  background: var(--rs-bg-overlay);
+  box-shadow: @notify-box-shadow;
+  overflow: hidden;
 
   // Multiple notification should have spacing
   // Hiding notification haven't spacing.
@@ -21,12 +26,13 @@
     margin-top: 10px;
   }
 
+  .high-contrast-mode({
+    border: 1px solid var(--rs-border-primary);
+  });
+
   // Notification content
   &-content {
-    background: var(--rs-bg-overlay);
-    box-shadow: @notify-box-shadow;
     padding: @notify-padding;
-    border-radius: @notify-border-radius;
     max-width: @notify-max-width;
   }
 

package/Pagination/styles/index.less

@@ -86,7 +86,18 @@
     height: @line-height-computed;
   }
 
-  &-active {
+  .high-contrast-mode({
+    transition: none;
+    color: var(--rs-pagination-item-text);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--rs-pagination-item-current-text);
+      text-decoration: underline;
+    }
+  });
+
+  &&-active {
     .pagination-active();
   }
 }

package/Pagination/styles/mixin.less

@@ -1,5 +1,12 @@
+@import '../../styles/mixins/color-modes';
+
 .pagination-active() {
   .rs-btn-ghost();
+
+  .high-contrast-mode({
+    color: var(--rs-pagination-item-current-text);
+    text-decoration: underline;
+  });
 }
 
 .pagination-active-size(@padding-vertical:@padding-y, @padding-horizontal:@padding-x) {

package/Picker/styles/index.less

@@ -60,8 +60,8 @@
 
   &-value-count {
     margin: 0 @picker-value-count-margin;
-    background-color: var(--rs-picker-count);
-    color: #fff;
+    background-color: var(--rs-picker-count-bg);
+    color: var(--rs-picker-count-text);
     border-radius: @picker-value-count-border-radius;
     padding: 0 @picker-value-count-padding;
     line-height: @line-height-computed;
@@ -128,6 +128,10 @@
 .rs-picker-toggle {
   .rs-picker-default & {
     transition: @picker-transition;
+
+    .high-contrast-mode({
+      transition: none;
+    });
   }
 
   .rs-picker-default:not(.rs-picker-disabled) & {
@@ -270,6 +274,10 @@
   // Remove transition
   transition: none;
 
+  .high-contrast-mode({
+    border: 1px solid var(--rs-border-primary);
+  });
+
   // Increase z-index when modal opened.
   .rs-modal-open & {
     z-index: (@zindex-modal + @zindex-picker-toggle);
@@ -345,8 +353,14 @@
 
   &:not(.rs-checkbox-disabled):hover,
   &:focus,
-  &-focus {
+  &&-focus {
     .listbox-option-active(true);
+
+    .high-contrast-mode({
+      .rs-check-tree-node-text-wrapper {
+        text-decoration: underline;
+      }
+    });
   }
 
   .rs-checkbox-checker {
@@ -361,8 +375,16 @@
       transition: @picker-item-transition;
       line-height: @line-height-computed;
 
+      .high-contrast-mode({
+        transition: none;
+      });
+
       &::before {
         background-color: var(--rs-bg-overlay);
+
+        .high-contrast-mode({
+          background: none;
+        });
       }
 
       /* stylelint-disable-next-line */ // This class name provide by Virtualized.

package/Picker/styles/mixin.less

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import '../../styles/mixins/color-modes';
 @import '../../Dropdown/styles/mixin';
 
 // Picker Menu items common styles
@@ -100,9 +101,13 @@
 }
 
 .picker-calendar-cell-content-selected() {
-  color: #fff;
+  color: var(--rs-calendar-date-selected-text);
   background-color: var(--rs-bg-active);
   box-shadow: none;
+
+  .high-contrast-mode({
+    text-decoration: underline;
+  });
 }
 
 .picker-calendar-title-show() {
@@ -120,7 +125,7 @@
   .rs-picker-cleanable & {
     padding-right: (
       @padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding + @clean-btn-width +
-      @clean-btn-margin
+        @clean-btn-margin
     );
   }
 

package/Popover/styles/index.less

@@ -1,4 +1,5 @@
 @import '../../styles/common';
+@import 'mixins';
 
 //
 // Popovers
@@ -17,20 +18,25 @@
   opacity: 0;
   .drop-shadow(var(--rs-popover-shadow));
 
-  &.fade {
+  &.rs-anim-fade {
     transition: opacity 0.1s linear, transform 0.1s ease-out;
   }
 
-  &.in {
+  &.rs-anim-in {
     opacity: 1;
     transition: opacity 0.15s linear, transform 0.15s ease-in;
   }
 
+  .high-contrast-mode({
+    border: 1px solid var(--rs-border-primary);
+  });
+
   // Arrow is outer, Arrow:after is inner
   > .rs-popover-arrow {
     border-width: @popover-arrow-outer-width;
 
     &,
+    &::before,
     &::after {
       position: absolute;
       display: block;
@@ -40,10 +46,21 @@
       border-style: solid;
     }
 
+    &::before,
     &::after {
       border-width: @popover-arrow-width;
       content: '';
     }
+
+    &::before {
+      display: none;
+    }
+
+    .high-contrast-mode({
+      &::before {
+        display: block;
+      }
+    });
   }
 
   // Popover Title
@@ -71,15 +88,9 @@
 
   > .rs-popover-arrow {
     margin-left: -@popover-arrow-outer-width;
-    border-bottom-width: 0;
     bottom: -@popover-arrow-outer-width;
 
-    &::after {
-      bottom: 1px;
-      margin-left: -@popover-arrow-width;
-      border-bottom-width: 0;
-      border-top-color: var(--rs-bg-overlay);
-    }
+    .with-popover-arrow(bottom);
   }
 }
 
@@ -92,14 +103,8 @@
   > .rs-popover-arrow {
     left: -@popover-arrow-outer-width;
     margin-top: -@popover-arrow-outer-width;
-    border-left-width: 0;
 
-    &::after {
-      left: 1px;
-      bottom: -@popover-arrow-width;
-      border-left-width: 0;
-      border-right-color: var(--rs-bg-overlay);
-    }
+    .with-popover-arrow(left);
   }
 }
 
@@ -111,14 +116,8 @@
   > .rs-popover-arrow {
     right: -@popover-arrow-outer-width;
     margin-top: -@popover-arrow-outer-width;
-    border-right-width: 0;
 
-    &::after {
-      right: 1px;
-      border-right-width: 0;
-      border-left-color: var(--rs-bg-overlay);
-      bottom: -@popover-arrow-width;
-    }
+    .with-popover-arrow(right);
   }
 }
 
@@ -131,15 +130,9 @@
 
   > .rs-popover-arrow {
     margin-left: -@popover-arrow-outer-width;
-    border-top-width: 0;
     top: -@popover-arrow-outer-width;
 
-    &::after {
-      top: 1px;
-      margin-left: -@popover-arrow-width;
-      border-top-width: 0;
-      border-bottom-color: var(--rs-bg-overlay);
-    }
+    .with-popover-arrow(top);
   }
 }
 

package/Popover/styles/mixins.less

@@ -0,0 +1,72 @@
+@import '../../styles/variables';
+@import '../../styles/mixins/hacks';
+@import '../../styles/mixins/color-modes';
+
+// Draw a triangle towards given direction
+// .popover-arrow(@direction, @size, @color)
+//
+// @direction: top | right | bottom | left
+// @size:      Size (height) of the triangle
+// @color:     Filling color of the triangle
+
+.popover-arrow(top, @size, @color) {
+  top: -@size;
+  // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
+  .ie11-edge-direction(top, -(@size+1px));
+
+  margin-left: -@size;
+  border-width: 0 @size @size;
+  border-bottom-color: @color;
+}
+
+.popover-arrow(bottom, @size, @color) {
+  bottom: -@size;
+  // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
+  .ie11-edge-direction(bottom, -(@size+1px));
+
+  margin-left: -@size;
+  border-width: @size @size 0;
+  border-top-color: @color;
+}
+
+/* rtl:begin:ignore */
+.popover-arrow(right, @size, @color) {
+  right: -@size;
+  // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
+  .ie11-edge-direction(right, -(@size+1px));
+
+  margin-top: -@size;
+  border-width: @size 0 @size @size;
+  border-left-color: @color;
+}
+
+.popover-arrow(left, @size, @color) {
+  left: -@size;
+  // FIXED: The problem of the  1 pixel white border in Edge/IE11 browser .
+  .ie11-edge-direction(left, -(@size+1px));
+
+  margin-top: -@size;
+  border-width: @size @size @size 0;
+  border-right-color: @color;
+}
+
+/* rtl:end:ignore */
+
+// Append Popover's arrow to Popover
+// @direction: The arrow's pointing direction. It's usually opposite of popover's placement
+//             e.g. popover[placement="top"] has an arrow[direction="bottom"]
+// @size:      The arrow's size (height)
+// @bg:        The arrow's background color, usually equal to popover's background
+// @border:    The arrow's border color, usually equal to popover's border (which only take effect
+//             in high-contrast theme)
+.with-popover-arrow(@direction, @size: @popover-arrow-width, @bg: var(--rs-bg-overlay), @border: var(--rs-border-primary)) {
+  &::after {
+    .popover-arrow(@direction, @size, @bg);
+  }
+
+  .high-contrast-mode({
+    &::before {
+      .popover-arrow(@direction, @size + 1px, @border);
+    }
+  });
+}

package/README.md

@@ -1,4 +1,3 @@
-
 <p align="center">
   <a href="https://rsuitejs.com" target="_blank" rel="noopener noreferrer">
    <img src="https://user-images.githubusercontent.com/1203827/65102389-7be3f100-d9fd-11e9-859e-ae9617ed2f91.png" alt="React Suite logo">
@@ -47,13 +46,13 @@ React Suite supports server side rendering. Support [Next.js](https://github.com
 React Suite is available as an [npm package][npm-home].
 
 ```bash
-npm i rsuite@next --save
+npm i rsuite --save
 ```
 
 or if you prefer Yarn
 
 ```bash
-yarn add rsuite@next
+yarn add rsuite
 ```
 
 ## Usage
@@ -79,8 +78,9 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
 - [Right-to-left][rsuite-doc-guide-rtl]
 - [Components][rsuite-components-overview]
 
-**Previous old version**
+**Historic version**
 
+- [Version 4.\*](https://v3.rsuitejs.com/)
 - [Version 3.\*](https://v3.rsuitejs.com/)
 - [Version 2.\*](https://v2.rsuitejs.com/)
 

package/Radio/styles/index.less

@@ -58,6 +58,10 @@
     visibility: hidden;
     transition: transform 0.2s linear, opacity 0.2s linear;
 
+    .high-contrast-mode({
+      transition: none;
+    });
+
     .rs-radio-checked & {
       transform: scale(1.5);
       opacity: 0;
@@ -81,6 +85,10 @@
 
     transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
 
+    .high-contrast-mode({
+      transition: none;
+    });
+
     .rs-radio:hover & {
       border-color: var(--rs-radio-checked-bg);
     }
@@ -97,6 +105,10 @@
 
     .rs-radio.rs-radio-disabled.rs-radio-checked & {
       opacity: 0.3;
+
+      .high-contrast-mode({
+        opacity: 0.5;
+      });
     }
   }
 
@@ -112,6 +124,10 @@
     transform: scale(0);
     transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 
+    .high-contrast-mode({
+      transition: none;
+    });
+
     .rs-radio-checked & {
       transform: scale(1);
       opacity: 1;

package/RadioGroup/styles/index.less

@@ -44,6 +44,10 @@
     transition: color 0.3s linear;
     padding: (@padding-y - 1px) 0;
 
+    .high-contrast-mode({
+      transition: none;
+    });
+
     &:hover,
     &:active {
       color: var(--rs-text-active);

package/Rate/styles/index.less

@@ -6,7 +6,7 @@
 .rs-rate {
   position: relative;
   display: inline-flex;
-  color: var(--rs-yellow-500);
+  color: var(--rs-rate-symbol-checked);
   list-style: none;
   vertical-align: middle;
   margin: 0;
@@ -29,8 +29,15 @@
     }
 
     &-after {
-      color: var(--rs-border-primary);
+      color: var(--rs-rate-symbol);
       filter: grayscale(1);
+
+      .high-contrast-mode({
+        > .rs-icon {
+          fill: none;
+          stroke: currentColor;
+        }
+      });
     }
 
     &-before,
@@ -51,6 +58,10 @@
     &-full &-after {
       color: inherit;
       filter: none;
+
+      > .rs-icon {
+        fill: currentColor;
+      }
     }
 
     &-vertical {

package/Ripple/styles/index.less

@@ -8,10 +8,6 @@
   transform: scale(0);
   transition: 0s;
 
-  & when (@enable-ripple-effect = false) {
-    display: none !important;
-  }
-
   &-rippling {
     transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
       opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
@@ -28,5 +24,13 @@
     top: 0;
     left: 0;
     pointer-events: none;
+
+    & when (@enable-ripple-effect = false) {
+      display: none !important;
+    }
+
+    .high-contrast-mode({
+      display: none !important;
+    });
   }
 }