refactor(ui): add mixin to provide component's style in form

Author: xiejay97

packages/ui/src/components/form/demos/3.IrregularLayout.md

@@ -41,8 +41,8 @@ export default function Demo() {
         >
           {({ username1, username2 }) => (
             <DCompose>
-              <DInput dFormControl={username1} dPlaceholder="Username" />
-              <DInput dFormControl={username2} dPlaceholder="Username" />
+              <DInput style={{ width: '50%' }} dFormControl={username1} dPlaceholder="Username" />
+              <DInput style={{ width: '50%' }} dFormControl={username2} dPlaceholder="Username" />
             </DCompose>
           )}
         </DForm.Item>

packages/ui/src/components/form/demos/5.ValidityResult.md

@@ -67,8 +67,8 @@ export default function Demo() {
         >
           {({ username3, username4 }) => (
             <DCompose>
-              <DInput dFormControl={username3} dPlaceholder="error" />
-              <DInput dFormControl={username4} dPlaceholder="required, minLength:warning,5" />
+              <DInput style={{ width: '50%' }} dFormControl={username3} dPlaceholder="error" />
+              <DInput style={{ width: '50%' }} dFormControl={username4} dPlaceholder="required, minLength:warning,5" />
             </DCompose>
           )}
         </DForm.Item>

packages/ui/src/components/input/Input.tsx

@@ -170,6 +170,7 @@ export function DInput(props: DInputProps): JSX.Element | null {
           <div
             {...restProps}
             className={getClassName(restProps.className, `${dPrefix}input`, {
+              [`${dPrefix}input--number`]: dType === 'number',
               [`${dPrefix}input--${size}`]: size,
               [`${dPrefix}input--button-right`]: dType === 'number' && dNumbetButton && !disabled && !checkNodeExist(dSuffix),
               'is-disabled': disabled,

packages/ui/src/styles/components/cascader.scss

@@ -1,8 +1,13 @@
+@import 'mixins/form';
 @import 'mixins/selectbox';
 
 $cascader-option-height: 32px;
 
 @include b(cascader) {
+  @include component-in-form('#{&}') {
+    width: 100%;
+  }
+
   @include component-selectbox;
 
   @include when(disabled) {

packages/ui/src/styles/components/compose.scss

@@ -1,6 +1,11 @@
+@import 'mixins/form';
 @import 'mixins/size';
 
 @include b(compose) {
+  @include component-in-form('#{&}') {
+    width: 100%;
+  }
+
   $compose-support: "[data-compose-support='true']";
   $compose-support--active: "[data-compose-support-active='true']";
   $compose-support--disabled: "[data-compose-support-disabled='true']";

packages/ui/src/styles/components/date-picker.scss

@@ -1,8 +1,13 @@
 @use 'sass:map';
+@import 'mixins/form';
 @import 'mixins/date-input';
 @import 'mixins/overwrite';
 
 @include b(date-picker) {
+  @include component-in-form('#{&}') {
+    max-width: 100%;
+  }
+
   @include component-date-input;
 
   @include e(popup) {

packages/ui/src/styles/components/form.scss

@@ -110,14 +110,6 @@
     flex-wrap: wrap;
     align-items: center;
     min-height: var(--#{$rd-prefix}size);
-
-    .#{$rd-prefix}select,
-    .#{$rd-prefix}cascader,
-    .#{$rd-prefix}tree-select,
-    .#{$rd-prefix}compose,
-    .#{$rd-prefix}input:not(.#{$rd-prefix}input--number) {
-      width: 100%;
-    }
   }
 
   @include e(pending) {

packages/ui/src/styles/components/input.scss

@@ -1,6 +1,14 @@
+@import 'mixins/form';
 @import 'mixins/size';
 
 @include b(input) {
+  @include component-in-form('#{&}:not(#{&}--number)') {
+    width: 100%;
+  }
+  @include component-in-form('#{&}--number') {
+    max-width: 100%;
+  }
+
   display: inline-flex;
   align-items: center;
   height: var(--#{$rd-prefix}size);

packages/ui/src/styles/components/mixins/_form.scss

@@ -0,0 +1,7 @@
+@mixin component-in-form($selector) {
+  @at-root {
+    .#{$rd-prefix}form__item-content > #{$selector} {
+      @content;
+    }
+  }
+}

packages/ui/src/styles/components/select.scss

@@ -1,8 +1,13 @@
+@import 'mixins/form';
 @import 'mixins/selectbox';
 
 $select-option-height: 32px;
 
 @include b(select) {
+  @include component-in-form('#{&}') {
+    width: 100%;
+  }
+
   @include component-selectbox;
 
   @include when(disabled) {