rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/FormErrorMessage/styles/index.less

@@ -1,25 +1,58 @@
-@import '../../styles/common';
-@import 'animation';
+@import '../../styles/common.less';
+@import './animation.less';
+
+@arrow-width: @form-err-msg-triangle-width;
+@arrow-gap: @form-err-msg-triangle-gap;
+
+// Mixins for common arrow styles
+.arrow-base() {
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+
+.arrow-position(@position, @offset) {
+  &::before,
+  &::after {
+    @{position}: @offset;
+  }
+}
+
+.arrow-border(@direction, @w1, @w2, @w3, @position, @offset) {
+  &::before,
+  &::after {
+    border-width: @w1 @w2 @w3;
+    border-@{direction}-color: var(--rs-form-errormessage-border);
+    @{position}: -1 * @offset;
+  }
+
+  &::after {
+    @{position}: -1 * (@offset - 1);
+    border-@{direction}-color: var(--rs-form-errormessage-bg);
+  }
+}
 
 .rs-form-error-message {
+  --rs-form-errormessage-font-size: var(--rs-font-size-xs);
+  --rs-form-errormessage-line-height: 1.25rem;
+
   position: absolute;
   padding: 3px 7px;
   background-color: var(--rs-form-errormessage-bg);
   border: 1px solid var(--rs-form-errormessage-border);
-  border-radius: @border-radius;
+  border-radius: var(--rs-radius-md);
   filter: ~'drop-shadow(0 0 6px rgba(0,0,0,.1))';
   z-index: @zindex-form-error-message;
   color: var(--rs-form-errormessage-text);
-  font-size: @form-error-message-font-size;
-  line-height: 20px;
+  font-size: var(--rs-form-errormessage-font-size);
+  line-height: var(--rs-form-errormessage-line-height);
   display: none;
   white-space: nowrap;
 
-  // Used to provide relation for error message
-  &-wrapper {
-    position: absolute;
-  }
-
   &-show {
     display: block;
     animation-duration: 0.3s;
@@ -27,196 +60,120 @@
   }
 
   &-arrow {
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      border-color: transparent;
-      border-style: solid;
-    }
+    .arrow-base();
   }
+}
+
+.rs-form-error-message-wrapper {
+  position: absolute;
 
-  // Placement
-  // == Bottom Left && Bottom Right && Top Left && Top Right
-  &-placement-bottom-start,
-  &-placement-bottom-end {
+  // Vertical placements (top/bottom)
+  &:where([data-placement='bottom-start'], [data-placement='bottom-end']) {
     bottom: 0;
 
     .rs-form-error-message {
       top: 0;
-
       &-show {
         animation-name: errorMessageSlideDownIn;
       }
     }
 
     .rs-form-error-message-arrow {
-      &::before,
-      &::after {
-        border-width: 0 @form-error-message-triangle-width @form-error-message-triangle-width;
-        border-bottom-color: var(--rs-form-errormessage-border);
-        top: -1 * @form-error-message-triangle-width;
-      }
-
-      &::after {
-        top: -1 * (@form-error-message-triangle-width - 1);
-        border-bottom-color: var(--rs-form-errormessage-bg);
-      }
+      .arrow-border(bottom, 0, @arrow-width, @arrow-width, top, @arrow-width);
     }
   }
 
-  &-placement-top-start,
-  &-placement-top-end {
+  &:where([data-placement='top-start'], [data-placement='top-end']) {
     top: 0;
 
     .rs-form-error-message {
       bottom: 0;
-
       &-show {
         animation-name: errorMessageSlideUpIn;
       }
     }
 
     .rs-form-error-message-arrow {
-      &::before,
-      &::after {
-        border-width: @form-error-message-triangle-width @form-error-message-triangle-width 0;
-        border-top-color: var(--rs-form-errormessage-border);
-        bottom: -1 * @form-error-message-triangle-width;
-      }
-
-      &::after {
-        bottom: -1 * (@form-error-message-triangle-width - 1);
-        border-top-color: var(--rs-form-errormessage-bg);
-      }
+      .arrow-border(top, @arrow-width, @arrow-width, 0, bottom, @arrow-width);
     }
   }
 
-  &-placement-bottom-start,
-  &-placement-top-start {
-    left: 0;
-
+  // Inline start/end positions
+  &:where([data-placement='bottom-start'], [data-placement='top-start']) {
+    inset-inline-start: 0;
     .rs-form-error-message {
-      left: 0;
+      inset-inline-start: 0;
     }
-
     .rs-form-error-message-arrow {
-      &::before,
-      &::after {
-        left: @form-error-message-triangle-gap;
-      }
+      .arrow-position(inset-inline-start, @arrow-gap);
     }
   }
 
-  &-placement-bottom-end,
-  &-placement-top-end {
-    right: 0;
-
+  &:where([data-placement='bottom-end'], [data-placement='top-end']) {
+    inset-inline-end: 0;
     .rs-form-error-message {
-      right: 0;
+      inset-inline-end: 0;
     }
-
     .rs-form-error-message-arrow {
-      &::before,
-      &::after {
-        right: @form-error-message-triangle-gap;
-      }
+      .arrow-position(inset-inline-end, @arrow-gap);
     }
   }
-}
 
-/* rtl:begin:ignore */
-
-// == Left Top && Left Bottom Right && Top && Right Bottom
-/* stylelint-disable-next-line */ // For RTL Scope
-.rs-form-error-message {
-  &-placement-left-start,
-  &-placement-left-end {
-    left: 0;
+  .horizontal-arrow-styles(@direction, @opposite) {
+    @{direction}: 0;
 
     .rs-form-error-message {
-      right: 0;
-
+      @{opposite}: 0;
       &-show {
-        animation-name: errorMessageSlideRightIn;
+        animation-name: if(@direction = left, errorMessageSlideRightIn, errorMessageSlideLeftIn);
       }
     }
 
     .rs-form-error-message-arrow {
       &::before,
       &::after {
-        border-width: @form-error-message-triangle-width 0 @form-error-message-triangle-width
-          @form-error-message-triangle-width;
-        border-left-color: var(--rs-form-errormessage-border);
-        right: -1 * @form-error-message-triangle-width;
+        border-width: @arrow-width
+          if(@direction = left, 0 @arrow-width @arrow-width, @arrow-width @arrow-width 0);
+        border-@{direction}-color: var(--rs-form-errormessage-border);
+        @{opposite}: -1 * @arrow-width;
       }
-
       &::after {
-        right: -1 * (@form-error-message-triangle-width - 1);
-        border-left-color: var(--rs-form-errormessage-bg);
+        @{opposite}: -1 * (@arrow-width - 1);
+        border-@{direction}-color: var(--rs-form-errormessage-bg);
       }
     }
   }
 
-  &-placement-right-start,
-  &-placement-right-end {
-    right: 0;
-
+  .vertical-alignment-styles(@position) {
+    @{position}: 0;
     .rs-form-error-message {
-      left: 0;
-
-      &-show {
-        animation-name: errorMessageSlideLeftIn;
-      }
+      @{position}: 0;
     }
-
     .rs-form-error-message-arrow {
       &::before,
       &::after {
-        border-width: @form-error-message-triangle-width @form-error-message-triangle-width
-          @form-error-message-triangle-width 0;
-        border-right-color: var(--rs-form-errormessage-border);
-        left: -1 * @form-error-message-triangle-width;
-      }
-
-      &::after {
-        left: -1 * (@form-error-message-triangle-width - 1);
-        border-right-color: var(--rs-form-errormessage-bg);
+        @{position}: @form-err-msg-triangle-vertical;
       }
     }
   }
 
-  &-placement-left-start,
-  &-placement-right-start {
-    top: 0;
-
-    .rs-form-error-message {
-      top: 0;
-    }
-
-    .rs-form-error-message-arrow {
-      &::before,
-      &::after {
-        top: @form-error-message-triangle-vertical;
-      }
-    }
+  /* rtl:begin:ignore */
+  // Horizontal placements (left/right)
+  &:where([data-placement='left-start'], [data-placement='left-end']) {
+    .horizontal-arrow-styles(left, right);
   }
 
-  &-placement-left-end,
-  &-placement-right-end {
-    bottom: 0;
+  &:where([data-placement='right-start'], [data-placement='right-end']) {
+    .horizontal-arrow-styles(right, left);
+  }
 
-    .rs-form-error-message {
-      bottom: 0;
-    }
+  // Vertical alignment for horizontal placements
+  &:where([data-placement='left-start'], [data-placement='right-start']) {
+    .vertical-alignment-styles(top);
+  }
 
-    .rs-form-error-message-arrow {
-      &::before,
-      &::after {
-        bottom: @form-error-message-triangle-vertical;
-      }
-    }
+  &:where([data-placement='left-end'], [data-placement='right-end']) {
+    .vertical-alignment-styles(bottom);
   }
+  /* rtl:end:ignore */
 }
-
-/* rtl:end:ignore */

package/FormGroup/styles/index.css

@@ -11,24 +11,27 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
-.rs-form-inline > *,
-.rs-form-inline > .rs-btn {
-  margin-right: 20px;
-  margin-bottom: 24px;
-  vertical-align: top;
+:root {
+  --rs-font-size-sm: 0.875rem;
+  --rs-spacing: 0.25rem;
 }
-.rs-form-inline .rs-form-control-label {
-  vertical-align: top;
-  margin-bottom: auto;
-  margin-right: 12px;
-  margin-top: 8px;
-  display: inline-block;
+.rs-form {
+  --rs-form-direction: column;
+  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+  display: flex;
+  flex-direction: var(--rs-form-direction);
+  gap: var(--rs-form-spacing);
+}
+.rs-form-inline {
+  --rs-form-direction: row;
 }
 .rs-form-group {
   position: relative;
-}
-.rs-form:not(.rs-form-inline) .rs-form-group:not(:last-child) {
-  margin-bottom: 24px;
+  display: flex;
+  flex-direction: var(--rs-form-group-direction);
+  gap: var(--rs-form-group-spacing);
 }
 .rs-form-group .rs-input {
   display: inline-block;
@@ -39,31 +42,28 @@
 .rs-form-vertical .rs-form-group .rs-form-control-label {
   display: block;
 }
-.rs-form-vertical .rs-form-group .rs-form-help-text:not(.rs-form-help-text-tooltip) {
-  padding-top: 4px;
+.rs-form-horizontal {
+  --rs-form-control-label-width: 170px;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+  --rs-form-group-direction: row;
 }
-.rs-form-horizontal .rs-form-group::before,
-.rs-form-horizontal .rs-form-group::after {
-  content: ' ';
-  display: table;
-}
-.rs-form-horizontal .rs-form-group::after {
-  clear: both;
+.rs-form-horizontal .rs-form-group {
+  align-items: baseline;
 }
 .rs-form-horizontal .rs-form-group .rs-form-control-label {
-  float: left;
   display: inline-block;
-  min-height: 20px;
-  line-height: 1.42857143;
-  font-size: 14px;
-  padding: 8px 0;
-  width: 170px;
-  margin-right: 12px;
-  text-align: right;
+  font-size: var(--rs-font-size-sm);
+  width: var(--rs-form-control-label-width);
+  text-align: end;
 }
 .rs-form-horizontal .rs-form-group .rs-btn-toolbar {
-  padding-left: 182px;
+  padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
+}
+.rs-form-inline {
+  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+  --rs-form-group-direction: row;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
 }
 .rs-form-inline .rs-form-group {
-  display: inline-block;
+  align-items: center;
 }

package/FormGroup/styles/index.less

@@ -4,13 +4,11 @@
 //
 // FormGroup
 // --------------------------------------------------
-
 .rs-form-group {
   position: relative;
-
-  .rs-form:not(.rs-form-inline) &:not(:last-child) {
-    margin-bottom: @form-group-margin-bottom;
-  }
+  display: flex;
+  flex-direction: var(--rs-form-group-direction);
+  gap: var(--rs-form-group-spacing);
 
   .rs-input {
     display: inline-block;
@@ -27,10 +25,6 @@
   .rs-form-control-label {
     display: block;
   }
-
-  .rs-form-help-text:not(.rs-form-help-text-tooltip) {
-    padding-top: 4px;
-  }
 }
 
 // Horizontal forms
@@ -38,28 +32,33 @@
 // Horizontal forms are built on grid classes and allow you to create forms with
 // labels on the left and inputs on the right.
 
-.rs-form-horizontal .rs-form-group {
-  .clearfix();
+.rs-form-horizontal {
+  --rs-form-control-label-width: @form-control-label-width;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+  --rs-form-group-direction: row;
 
-  .rs-form-control-label {
-    float: left;
-    display: inline-block;
-    //Sometimes help info is more than one line，so height can't set a fixed value
-    min-height: @line-height-computed;
-    line-height: @line-height-base;
-    font-size: @font-size-base;
-    padding: @padding-y 0;
-    width: @form-control-label-width;
-    margin-right: @form-control-label-margin-right;
-    text-align: right;
-  }
+  .rs-form-group {
+    align-items: baseline;
 
-  .rs-btn-toolbar {
-    padding-left: @form-control-label-width + @form-control-label-margin-right;
+    .rs-form-control-label {
+      display: inline-block;
+      font-size: var(--rs-font-size-sm);
+      width: var(--rs-form-control-label-width);
+      text-align: end;
+    }
+
+    .rs-btn-toolbar {
+      padding-inline-start: calc(var(--rs-form-control-label-width) + var(--rs-form-group-spacing));
+    }
   }
 }
 
 // Inline
-.rs-form-inline .rs-form-group {
-  display: inline-block;
+.rs-form-inline {
+  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+  --rs-form-group-direction: row;
+  --rs-form-group-spacing: calc(var(--rs-spacing) * 3);
+  .rs-form-group {
+    align-items: center;
+  }
 }

package/FormHelpText/styles/index.css

@@ -3,6 +3,18 @@
   * @param {string} @size-name - The size name
   * @param {string} @suffix - The suffix
   */
+/* stylelint-disable */
+*[class*='rs-'] {
+  box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  box-sizing: border-box;
+}
+:root {
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-md: 1rem;
+}
 :root,
 .rs-theme-light {
   --rs-gray-200: #e5e5ea;
@@ -19,24 +31,15 @@
   --rs-gray-600: #3c3f43;
   --rs-text-secondary: var(--rs-gray-200);
 }
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
 .rs-form-help-text {
   display: block;
   color: var(--rs-text-secondary);
   min-height: 20px;
   line-height: 1.66666667;
-  font-size: 12px;
+  font-size: var(--rs-font-size-xs);
 }
 .rs-form-help-text-tooltip {
   display: inline-flex;
   align-items: center;
-  margin-left: 10px;
-  margin-top: 8px;
+  font-size: var(--rs-font-size-md);
 }

package/FormHelpText/styles/index.less

@@ -11,12 +11,11 @@
   //Sometimes help info is more than one line，so height can't set a fixed value
   min-height: @line-height-computed;
   line-height: @line-height-small;
-  font-size: @font-size-small;
+  font-size: var(--rs-font-size-xs);
 
   &-tooltip {
     display: inline-flex;
     align-items: center;
-    margin-left: @form-help-text-inline-gap;
-    margin-top: @padding-y;
+    font-size: var(--rs-font-size-md);
   }
 }

package/Grid/styles/columns.less

@@ -0,0 +1,22 @@
+// Columns
+//
+// Common styles for small and large grid columns
+.rs-col {
+  position: relative;
+  display: block;
+  max-width: 100%;
+  min-height: 1px;
+  padding-inline-start: var(--rs-col-gutter);
+  padding-inline-end: var(--rs-col-gutter);
+
+  &[class*='rs-col-auto-'] {
+    flex-grow: var(--rs-col-auto-flex-grow);
+    flex-basis: var(--rs-col-auto-flex-basis);
+    max-width: var(--rs-col-auto-max-width);
+  }
+}
+
+// Auto column styles for xs (default)
+.rs-col-auto-xs {
+  .rs-col-auto-styles();
+}

package/Grid/styles/grid-framework.less

@@ -4,22 +4,44 @@
     .rs-col-@{size}-@{value} {
       width: percentage((@value / 24));
     }
+
     .rs-col-@{size}-pull-@{value} {
-      right: percentage((@value / 24));
+      inset-inline-end: percentage((@value / 24));
     }
+
     .rs-col-@{size}-push-@{value} {
-      left: percentage((@value / 24));
+      inset-inline-start: percentage((@value / 24));
     }
 
     .rs-col-@{size}-offset-@{value} {
-      margin-left: percentage((@value / 24));
+      margin-inline-start: percentage((@value / 24));
+    }
+
+    .rs-col-@{size}-order-@{value} {
+      order: @value;
     }
   });
+
   .rs-col-@{size}-pull-0 {
-    right: auto;
+    inset-inline-end: auto;
   }
+
   .rs-col-@{size}-push-0 {
-    left: auto;
+    inset-inline-start: auto;
+  }
+
+  .rs-col-auto-@{size} {
+    .rs-col-auto-styles();
+  }
+
+  .rs-col {
+    --rs-col-gutter: calc(var(~'--rs-grid-gutter-@{size}', var(--rs-grid-gutter)) / 2);
+  }
+  .rs-row {
+    --rs-row-gutter: calc(var(~'--rs-grid-gutter-@{size}', var(--rs-grid-gutter)) / -2);
+
+    .responsive-align(@size);
+    .responsive-justify(@size);
   }
 }
 
@@ -28,3 +50,42 @@
     display: none;
   }
 }
+
+// Auto column styles
+.rs-col-auto-styles() {
+  --rs-col-auto-flex-grow: 1;
+  --rs-col-auto-flex-basis: 0;
+  --rs-col-auto-max-width: 100%;
+}
+
+// Mixin for responsive alignment
+.responsive-align(@size) {
+  &-@{size}-top {
+    align-items: flex-start;
+  }
+  &-@{size}-middle {
+    align-items: center;
+  }
+  &-@{size}-bottom {
+    align-items: flex-end;
+  }
+}
+
+// Mixin for responsive justify
+.responsive-justify(@size) {
+  &-@{size}-start {
+    justify-content: flex-start;
+  }
+  &-@{size}-end {
+    justify-content: flex-end;
+  }
+  &-@{size}-center {
+    justify-content: center;
+  }
+  &-@{size}-space-between {
+    justify-content: space-between;
+  }
+  &-@{size}-space-around {
+    justify-content: space-around;
+  }
+}