Merge pull request #15252 from yoyo837/add-label-align

add labelAlign for Form and FormItem

components/form/Form.tsx

@@ -38,6 +38,7 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   className?: string;
   prefixCls?: string;
   hideRequiredMark?: boolean;
+  labelAlign?: 'left' | 'right';
   labelCol?: ColProps;
   wrapperCol?: ColProps;
 }
@@ -250,6 +251,7 @@ export default class Form extends React.Component<FormProps, any> {
       'form',
       'hideRequiredMark',
       'wrapperCol',
+      'labelAlign',
       'labelCol',
     ]);
 
@@ -257,9 +259,9 @@ export default class Form extends React.Component<FormProps, any> {
   };
 
   render() {
-    const { wrapperCol, labelCol, layout } = this.props;
+    const { wrapperCol, labelAlign, labelCol, layout } = this.props;
     return (
-      <FormContext.Provider value={{ wrapperCol, labelCol, vertical: layout === 'vertical' }}>
+      <FormContext.Provider value={{ wrapperCol, labelAlign, labelCol, vertical: layout === 'vertical' }}>
         <ConfigConsumer>{this.renderForm}</ConfigConsumer>
       </FormContext.Provider>
     );

components/form/FormItem.tsx

@@ -19,6 +19,7 @@ export interface FormItemProps {
   className?: string;
   id?: string;
   label?: React.ReactNode;
+  labelAlign?: 'left' | 'right';
   labelCol?: ColProps;
   wrapperCol?: ColProps;
   help?: React.ReactNode;
@@ -43,6 +44,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   static propTypes = {
     prefixCls: PropTypes.string,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    labelAlign: PropTypes.string,
     labelCol: PropTypes.object,
     help: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
     validateStatus: PropTypes.oneOf(ValidateStatuses),
@@ -329,14 +331,15 @@ export default class FormItem extends React.Component<FormItemProps, any> {
   renderLabel(prefixCls: string) {
     return (
       <FormContext.Consumer key="label">
-        {({ vertical, labelCol: contextLabelCol }: FormContextProps) => {
+        {({ vertical, labelAlign, labelCol: contextLabelCol }: FormContextProps) => {
           const { label, labelCol, colon, id } = this.props;
           const required = this.isRequired();
 
           const mergedLabelCol: ColProps =
             ('labelCol' in this.props ? labelCol : contextLabelCol) || {};
 
-          const labelColClassName = classNames(`${prefixCls}-item-label`, mergedLabelCol.className);
+          const labelClsBasic = `${prefixCls}-item-label`
+          const labelColClassName = classNames(labelClsBasic, labelAlign === 'left' && `${labelClsBasic}-left`, mergedLabelCol.className);
           const labelClassName = classNames({
             [`${prefixCls}-item-required`]: required,
           });

components/form/context.ts

@@ -3,10 +3,12 @@ import { ColProps } from '../grid/col';
 
 export interface FormContextProps {
   vertical: boolean;
+  labelAlign?: string;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
 }
 
 export const FormContext: Context<FormContextProps> = createReactContext({
+  labelAlign: 'right',
   vertical: false,
 });

components/form/index.en-US.md

@@ -36,6 +36,7 @@ A form field is defined using `<Form.Item />`.
 | -------- | ----------- | ---- | ------------- |
 | form | Decorated by `Form.create()` will be automatically set `this.props.form` property | object | n/a |
 | hideRequiredMark | Hide required mark of all form items | Boolean | false |
+| labelAlign | Label text align | 'left' \| 'right' | 'right' |
 | labelCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) |  |
 | layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
 | onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) |  |

components/form/index.zh-CN.md

@@ -38,6 +38,7 @@ title: Form
 | --- | --- | --- | --- |
 | form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性 | object | - |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
+| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' |
 | labelCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) |  |
 | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
 | onSubmit | 数据验证成功后回调事件 | Function(e:Event) |  |

components/form/style/index.less

@@ -101,6 +101,10 @@ input[type='checkbox'] {
     text-align: right;
     vertical-align: middle;
 
+    &-left {
+      text-align: left;
+    }
+
     label {
       color: @label-color;