Merge pull request #1943 from ant-design/feat-form-item-colon

Remove colon and add it via FormItem

components/form/FormItem.jsx

@@ -162,9 +162,15 @@ export default class FormItem extends React.Component {
       [`${props.prefixCls}-item-required`]: required,
     });
 
+    // remove user input colon
+    let label = props.label;
+    if (typeof props.label === 'string') {
+      label = props.label.replace(/：|:$/, '');
+    }
+
     return props.label ? (
       <label htmlFor={props.id || this.getId()} className={className} key="label">
-        {props.label}
+        {label}
       </label>
     ) : null;
   }

components/form/demo/advanced-search-form.md

@@ -16,19 +16,19 @@ ReactDOM.render(
     <Row gutter={16}>
       <Col sm={8}>
         <FormItem
-          label="搜索名称："
+          label="搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <Input placeholder="请输入搜索名称" size="default" />
         </FormItem>
         <FormItem
-          label="较长搜索名称："
+          label="较长搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <DatePicker size="default" />
         </FormItem>
         <FormItem
-          label="搜索名称："
+          label="搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <Input placeholder="请输入搜索名称" size="default" />
@@ -36,19 +36,19 @@ ReactDOM.render(
       </Col>
       <Col sm={8}>
         <FormItem
-          label="搜索名称："
+          label="搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <Input placeholder="请输入搜索名称" size="default" />
         </FormItem>
         <FormItem
-          label="较长搜索名称："
+          label="较长搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <DatePicker size="default" />
         </FormItem>
         <FormItem
-          label="搜索名称："
+          label="搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <Input placeholder="请输入搜索名称" size="default" />
@@ -56,19 +56,19 @@ ReactDOM.render(
       </Col>
       <Col sm={8}>
         <FormItem
-          label="搜索名称："
+          label="搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <Input placeholder="请输入搜索名称" size="default" />
         </FormItem>
         <FormItem
-          label="较长搜索名称："
+          label="较长搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <DatePicker size="default" />
         </FormItem>
         <FormItem
-          label="搜索名称："
+          label="搜索名称"
           labelCol={{ span: 10 }}
           wrapperCol={{ span: 14 }}>
           <Input placeholder="请输入搜索名称" size="default" />

components/form/demo/form-controls.md

@@ -21,7 +21,7 @@ ReactDOM.render(
   <Form horizontal>
     <FormItem
       id="control-input"
-      label="输入框："
+      label="输入框"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 14 }}>
       <Input id="control-input" placeholder="Please enter..." />
@@ -29,7 +29,7 @@ ReactDOM.render(
 
     <FormItem
       id="control-textarea"
-      label="文本域："
+      label="文本域"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 14 }}>
       <Input type="textarea" id="control-textarea" rows="3" />
@@ -37,7 +37,7 @@ ReactDOM.render(
 
     <FormItem
       id="select"
-      label="Select 选择器："
+      label="Select 选择器"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 14 }}>
       <Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
@@ -49,7 +49,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="Checkbox 多选框："
+      label="Checkbox 多选框"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 18 }} >
       <Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
@@ -58,7 +58,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="Checkbox 多选框："
+      label="Checkbox 多选框"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 18 }} >
       <Checkbox className="ant-checkbox-inline">选项一</Checkbox>
@@ -67,7 +67,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="Radio 单选框："
+      label="Radio 单选框"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 18 }} >
       <RadioGroup defaultValue="b">

components/form/demo/form-in-modal.md

@@ -42,12 +42,12 @@ let Demo = React.createClass({
           <Form horizontal form={this.props.form}>
             <FormItem
               {...formItemLayout}
-              label="用户名：">
+              label="用户名">
               <Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
             </FormItem>
             <FormItem
               {...formItemLayout}
-              label="密码：">
+              label="密码">
               <Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
             </FormItem>
           </Form>

components/form/demo/horizontal-form.md

@@ -26,17 +26,17 @@ let Demo = React.createClass({
       <Form horizontal onSubmit={this.handleSubmit}>
         <FormItem
           {...formItemLayout}
-          label="用户名：">
+          label="用户名">
           <p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label="密码：">
+          label="密码">
           <Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label="您的性别：">
+          label="您的性别">
           <RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
             <Radio value="male">男的</Radio>
             <Radio value="female">女的</Radio>
@@ -44,13 +44,13 @@ let Demo = React.createClass({
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label="备注："
+          label="备注"
           help="随便写点什么">
           <Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip> ：</span>}>
+          label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
           <Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
         </FormItem>
         <FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>

components/form/demo/inline-form.md

@@ -20,12 +20,12 @@ let Demo = React.createClass({
     return (
       <Form inline onSubmit={this.handleSubmit}>
         <FormItem
-          label="账户：">
+          label="账户">
           <Input placeholder="请输入账户名"
             {...getFieldProps('userName')} />
         </FormItem>
         <FormItem
-          label="密码：">
+          label="密码">
           <Input type="password" placeholder="请输入密码"
             {...getFieldProps('password')} />
         </FormItem>

components/form/demo/input-group.md

@@ -14,14 +14,14 @@ const Option = Select.Option;
 ReactDOM.render(
   <Form horizontal>
     <FormItem
-      label="标签输入框："
+      label="标签输入框"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 16 }}>
       <Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
     </FormItem>
 
     <FormItem
-      label="标签输入框："
+      label="标签输入框"
       labelCol={{ span: 6 }}
       validateStatus="success"
       wrapperCol={{ span: 16 }}>
@@ -29,7 +29,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="select 标签输入框："
+      label="select 标签输入框"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 16 }}>
       <InputGroup>
@@ -46,7 +46,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="输入身份证："
+      label="输入身份证"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 16 }}>
       <InputGroup>
@@ -66,7 +66,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="电话号码："
+      label="电话号码"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 16 }}>
       <InputGroup>

components/form/demo/mix.md

@@ -44,7 +44,7 @@ let Demo = React.createClass({
     return (
       <Form horizontal onSubmit={this.handleSubmit} >
         <FormItem
-          label="InputNumber 数字输入框："
+          label="InputNumber 数字输入框"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 10 }}>
           <InputNumber min={1} max={10} style={{ width: 100 }}
@@ -53,7 +53,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="我是标题："
+          label="我是标题"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 10 }}>
           <p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
@@ -63,7 +63,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="Switch 开关："
+          label="Switch 开关"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 10 }}
           required>
@@ -71,7 +71,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="Slider 滑动输入条："
+          label="Slider 滑动输入条"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 10 }}
           required>
@@ -79,7 +79,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="Select 选择器："
+          label="Select 选择器"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           required>
@@ -93,7 +93,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="级联选择："
+          label="级联选择"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           required
@@ -102,7 +102,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="DatePicker 日期选择框："
+          label="DatePicker 日期选择框"
           labelCol={{ span: 8 }}
           required>
           <Col span="6">
@@ -122,7 +122,7 @@ let Demo = React.createClass({
 
 
         <FormItem
-          label="TimePicker 时间选择器："
+          label="TimePicker 时间选择器"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           required>
@@ -130,7 +130,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="选项："
+          label="选项"
           labelCol={{ span: 8 }}>
           <RadioGroup {...getFieldProps('rg')}>
             <RadioButton value="a">选项一</RadioButton>
@@ -140,7 +140,7 @@ let Demo = React.createClass({
         </FormItem>
 
         <FormItem
-          label="logo图："
+          label="logo图"
           labelCol={{ span: 8 }}
           wrapperCol={{ span: 16 }}
           help="提示信息要长长长长长长长长长长长长长长">

components/form/demo/validate-basic.md

@@ -112,7 +112,7 @@ let BasicDemo = React.createClass({
       <Form horizontal form={this.props.form}>
         <FormItem
           {...formItemLayout}
-          label="用户名："
+          label="用户名"
           hasFeedback
           help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
           <Input {...nameProps} placeholder="实时校验，输入 JasonWood 看看" />
@@ -120,14 +120,14 @@ let BasicDemo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="邮箱："
+          label="邮箱"
           hasFeedback>
           <Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
         </FormItem>
 
         <FormItem
           {...formItemLayout}
-          label="密码："
+          label="密码"
           hasFeedback>
           <Input {...passwdProps} type="password" autoComplete="off"
             onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
@@ -135,7 +135,7 @@ let BasicDemo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="确认密码："
+          label="确认密码"
           hasFeedback>
           <Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
             onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
@@ -143,7 +143,7 @@ let BasicDemo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="备注：">
+          label="备注">
           <Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
         </FormItem>
 

components/form/demo/validate-customized.md

@@ -145,7 +145,7 @@ let Demo = React.createClass({
             <Col span="18">
               <FormItem
                 {...formItemLayout}
-                label="密码：">
+                label="密码">
                 <Input {...passProps} type="password"
                   onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                   autoComplete="off" id="pass"
@@ -161,7 +161,7 @@ let Demo = React.createClass({
             <Col span="18">
               <FormItem
                 {...formItemLayout}
-                label="确认密码：">
+                label="确认密码">
                 <Input {...rePassProps} type="password"
                   onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                   autoComplete="off" id="rePass"

components/form/demo/validate-other.md

@@ -110,7 +110,7 @@ let Demo = React.createClass({
       <Form horizontal form={this.props.form}>
         <FormItem
           {...formItemLayout}
-          label="国籍：">
+          label="国籍">
           <Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
             <Option value="china">中国</Option>
             <Option value="use">美国</Option>
@@ -122,7 +122,7 @@ let Demo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="喜欢的颜色：">
+          label="喜欢的颜色">
           <Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
             <Option value="red">红色</Option>
             <Option value="orange">橙色</Option>
@@ -134,7 +134,7 @@ let Demo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="性别：">
+          label="性别">
           <RadioGroup {...radioProps}>
             <Radio value="male">男</Radio>
             <Radio value="female">女</Radio>
@@ -144,7 +144,7 @@ let Demo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="兴趣爱好：">
+          label="兴趣爱好">
           <Checkbox {...getFieldProps('eat', {
             valuePropName: 'checked',
           })}>吃饭饭</Checkbox>
@@ -158,25 +158,25 @@ let Demo = React.createClass({
 
         <FormItem
           {...formItemLayout}
-          label="生日：">
+          label="生日">
           <DatePicker {...birthdayProps} />
         </FormItem>
 
         <FormItem
           {...formItemLayout}
-          label="选一个时间：">
+          label="选一个时间">
           <TimePicker {...timeProps} />
         </FormItem>
 
         <FormItem
           {...formItemLayout}
-          label="8~12间的质数：">
+          label="8~12间的质数">
           <InputNumber {...primeNumberProps} min={8} max={12} />
         </FormItem>
 
         <FormItem
           {...formItemLayout}
-          label="选择地址：">
+          label="选择地址">
           <Cascader {...addressProps} options={address} />
         </FormItem>
 

components/form/demo/validate-static.md

@@ -18,7 +18,7 @@ const FormItem = Form.Item;
 ReactDOM.render(
   <Form horizontal>
     <FormItem
-      label="失败校验："
+      label="失败校验"
       labelCol={{ span: 5 }}
       wrapperCol={{ span: 12 }}
       validateStatus="error"
@@ -27,7 +27,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="警告校验："
+      label="警告校验"
       labelCol={{ span: 5 }}
       wrapperCol={{ span: 12 }}
       validateStatus="warning">
@@ -35,7 +35,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="校验中："
+      label="校验中"
       labelCol={{ span: 5 }}
       wrapperCol={{ span: 12 }}
       hasFeedback
@@ -45,7 +45,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="成功校验："
+      label="成功校验"
       labelCol={{ span: 5 }}
       wrapperCol={{ span: 12 }}
       hasFeedback
@@ -54,7 +54,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="警告校验："
+      label="警告校验"
       labelCol={{ span: 5 }}
       wrapperCol={{ span: 12 }}
       hasFeedback
@@ -63,7 +63,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="失败校验："
+      label="失败校验"
       labelCol={{ span: 5 }}
       wrapperCol={{ span: 12 }}
       hasFeedback
@@ -73,7 +73,7 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
-      label="行内校验："
+      label="行内校验"
       labelCol={{ span: 5 }}
       help>
       <Col span="6">

components/form/style/index.less

@@ -84,11 +84,13 @@ input[type="checkbox"] {
     color: @label-color;
     text-align: right;
     vertical-align: middle;
-    padding-top: 7px;
+    padding: 7px 0;
-    padding-bottom: 7px;
 
-    &:lang(en) {
+    &:after {
-      padding-right: 8px;
+      content: ":";
+      margin: 0 8px 0 2px;
+      position: relative;
+      top: -0.5px;
     }
   }