fix: form rtl

xulingling0 · Apr 12, 2024 · aae6a9a · aae6a9a
1 parent 0b2d74e
commit aae6a9a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/components/Form/style/status.less b/components/Form/style/status.less
@@ -170,26 +170,28 @@
   }
 }
 
-.@{form-prefix-cls}-item-has-feedback {
+.form-item-has-feedback(@rtl) {
+  @direction: if(@rtl = ~'rtl', left, right);
+
   .select-view(@prefix) {
     .@{prefix}.@{prefix}-multiple .@{prefix}-view,
     .@{prefix}.@{prefix}-single .@{prefix}-view {
-      padding-right: 28px;
+      padding-@{direction}: 28px;
     }
 
     .@{prefix}.@{prefix}-multiple .@{prefix}-suffix {
-      padding-right: 0;
+      padding-@{direction}: 0;
     }
   }
 
   .@{prefix}-input,
   .@{prefix}-input-inner-wrapper,
   .@{prefix}-textarea {
-    padding-right: 28px;
+    padding-@{direction}: 28px;
   }
 
   .@{prefix}-input-number-mode-embed .@{prefix}-input-number-step-layer {
-    right: 24px;
+    @direction: 24px;
   }
 
   .select-view(~'@{prefix}-select');
@@ -198,7 +200,7 @@
 
   // datepicker timepicker
   .@{prefix}-picker {
-    padding-right: 28px;
+    padding-@{direction}: 28px;
   }
 
   .@{prefix}-picker-suffix {
@@ -211,10 +213,25 @@
 
   // InputTag
   .@{prefix}-input-tag {
-    padding-right: 23px;
+    padding-@{direction}: 23px;
 
     &-suffix {
-      padding-right: 0;
+      padding-@{direction}: 0;
     }
   }
 }
+
+.@{form-prefix-cls}-item-has-feedback {
+  .form-item-has-feedback(ltr);
+}
+
+// rtl
+
+.@{form-prefix-cls}-rtl .@{form-prefix-cls}-item-feedback {
+  right: unset;
+  left: 9px;
+}
+
+.@{form-prefix-cls}-rtl .@{form-prefix-cls}-item-has-feedback {
+  .form-item-has-feedback(rtl);
+}
diff --git a/components/InputNumber/index.tsx b/components/InputNumber/index.tsx
@@ -40,7 +40,7 @@ const defaultProps: InputNumberProps = {
 };
 
 function InputNumber(baseProps: InputNumberProps, ref) {
-  const { getPrefixCls, size: ctxSize, componentConfig } = useContext(ConfigContext);
+  const { getPrefixCls, size: ctxSize, componentConfig, rtl } = useContext(ConfigContext);
   const props = useMergeProps<InputNumberProps>(
     baseProps,
     defaultProps,
@@ -297,6 +297,7 @@ function InputNumber(baseProps: InputNumberProps, ref) {
         `${prefixCls}-mode-${mode}`,
         `${prefixCls}-size-${mergedSize}`,
         {
+          [`${prefixCls}-rtl`]: rtl,
           [`${prefixCls}-readonly`]: readOnly,
           [`${prefixCls}-illegal-value`]: !value.isEmpty && isOutOfRange,
         },

diff --git a/components/InputNumber/style/index.less b/components/InputNumber/style/index.less
@@ -92,6 +92,12 @@
     }
   }
 
+  // rtl embed mode
+  &-rtl&-mode-embed &-step-layer {
+    right: unset;
+    left: 4px;
+  }
+
   // button mode
   &-mode-button {
     .@{input-prefix-cls} {