fix: form inputGroup not response with formProps.wrapperCol & labelCol (#1147)

* fix: form inputGroup not response with formProps.wrapperCol & labelCol

* fix: formInputGroup wrapperCol

packages/semi-foundation/form/form.scss

@@ -66,6 +66,20 @@ $rating: #{$prefix}-rating;
                 }
             }
         }
+
+        .#{$field}-group {
+            .#{$col} {
+                &-right {
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                &-left {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+            }
+        }
+
         .#{$field}-pure {
             // padding-top: 0;
             // padding-bottom: 0;

packages/semi-ui/form/_story/Layout/layoutDemo.jsx

@@ -88,7 +88,7 @@ class LayoutDemo extends React.Component {
                     />
                     <Form.Switch field="agree" />
                     <Form.InputNumber field="price" />
-                    <Form.Select field="name">
+                    <Form.Select field="name" style={{ width: 300 }}>
                         <Option value="mike">mike</Option>
                         <Option value="jane">jane</Option>
                         <Option value="kate">kate</Option>
@@ -107,6 +107,10 @@ class LayoutDemo extends React.Component {
                     <Form.Slot label={{ text: 'texxt', required: true }}>
                         <div>slot</div>
                     </Form.Slot>
+                    <Form.InputGroup label='group text' style={{ width: 600 }}>
+                        <Form.Input field='inGroupName' style={{ width: 200 }}></Form.Input>
+                        <Form.Input field='inGroupType' style={{ width: 390 }}></Form.Input>
+                    </Form.InputGroup>
                 </Form>
             </>
         );

packages/semi-ui/form/group.tsx

@@ -12,7 +12,7 @@ import { useFormState } from './hooks/index';
 import InputGroup, { InputGroupProps as BacisInputGroupProps } from '../input/inputGroup';
 import { BaseFormProps, FormState } from './interface';
 import { FormUpdaterContextType } from '@douyinfe/semi-foundation/form/interface';
-
+import { Col, Row } from '../grid/index';
 interface GroupErrorProps {
     showValidateIcon?: boolean;
     isInInputGroup?: boolean;
@@ -60,7 +60,7 @@ class FormInputGroup extends Component<InputGroupProps> {
     render() {
         const { children, label, ...rest } = this.props;
         const updater = this.context;
-        const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon']);
+        const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol']);
         const labelPosition = this.props.labelPosition || formProps.labelPosition;
         const groupFieldSet: Array<string> = [];
         const inner = React.Children.map(children, (child: any) => {
@@ -74,18 +74,78 @@ class FormInputGroup extends Component<InputGroupProps> {
             }
             return null;
         });
+
         const groupCls = classNames({
             [`${prefix}-field-group`]: true
         });
+
+        const labelCol = formProps.labelCol;
+        const wrapperCol = formProps.wrapperCol;
+        const labelAlign = formProps.labelAlign;
+        const appendCol = labelCol && wrapperCol;
+
+        const labelColCls = labelCol ? `${prefix}-col-${labelAlign}` : '';
+
+        const labelContent = this.renderLabel(label, formProps);
+        const inputGroupContent = (
+            <InputGroup {...rest}>
+                {inner}
+            </InputGroup>
+        );
+        const groupErrorContent = (<GroupError fieldSet={groupFieldSet} showValidateIcon={formProps.showValidateIcon} isInInputGroup />);
+
+        let content: any;
+
+        switch (true) {
+            case !appendCol:
+                content = (
+                    <>
+                        {labelContent}
+                        <div>
+                            {inputGroupContent}
+                            {groupErrorContent}
+                        </div>
+                    </>
+                );
+                break;
+            case appendCol && labelPosition === 'top':
+                // When labelPosition is top, you need to add an overflow hidden div to the label, otherwise it will be arranged horizontally
+                content = (
+                    <>
+                        <div style={{ overflow: 'hidden' }}>
+                            <Col {...labelCol} className={labelColCls}>
+                                {labelContent}
+                            </Col>
+                        </div>
+                        <Col {...wrapperCol}>
+                            {inputGroupContent}
+                            {groupErrorContent}
+                        </Col>
+                    </>
+                );
+                break;
+            case appendCol && labelPosition !== 'top':
+                content = (
+                    <>
+                        <Col {...labelCol} className={labelColCls}>
+                            {labelContent}
+                        </Col>
+                        <Col {...wrapperCol}>
+                            {inputGroupContent}
+                            {groupErrorContent}
+                        </Col>
+                    </>
+                );
+                break;
+            default:
+                break;
+        }
+
+
+
         return (
             <div x-label-pos={labelPosition} className={groupCls}>
-                {this.renderLabel(label, formProps)}
-                <div>
-                    <InputGroup {...rest}>
-                        {inner}
-                    </InputGroup>
-                    <GroupError fieldSet={groupFieldSet} showValidateIcon={formProps.showValidateIcon} isInInputGroup />
-                </div>
+                {content}
             </div>
         );
     }