diff --git a/components/Form/style/status.less b/components/Form/style/status.less index 64e1ae4609..bd0dfeeb82 100644 --- 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 index f95624309c..1ea15e8f30 100644 --- 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( 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 index adaa831719..2aae5ff1dd 100644 --- 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} {