mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-08 01:53:34 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: Mentions error style in Form (#32385)

Browse Source
This commit is contained in:
afc163 2021-10-05 15:56:31 +08:00 committed by GitHub
parent 27c3b51c18
commit d361537748
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6792,7 +6792,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -6802,7 +6802,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -6835,7 +6835,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -6845,7 +6845,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -6895,7 +6895,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating" class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -6905,7 +6905,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -6961,7 +6961,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -6971,7 +6971,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7017,7 +7017,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7027,7 +7027,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7073,7 +7073,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7083,7 +7083,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7139,7 +7139,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7149,7 +7149,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7228,7 +7228,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7238,7 +7238,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7320,7 +7320,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7330,7 +7330,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7425,7 +7425,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating" class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7435,7 +7435,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7541,7 +7541,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
style="margin-bottom:0" style="margin-bottom:0"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7551,7 +7551,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7620,7 +7620,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-explain-error" class="ant-form-item-explain-error"
role="alert" role="alert"
> >
Please select the correct date Please select right date
</div> </div>
</div> </div>
</div> </div>
@ -7694,7 +7694,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7704,7 +7704,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7817,7 +7817,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7827,7 +7827,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7900,7 +7900,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7910,7 +7910,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -7987,7 +7987,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
> >
<label <label
class="" class=""
@ -7997,7 +7997,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-12" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
> >
<div <div
class="ant-form-item-control-input" class="ant-form-item-control-input"
@ -8090,6 +8090,40 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-row ant-form-item ant-form-item-has-error"
>
<div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-6"
>
<label
class=""
title="Fail"
>
Fail
</label>
</div>
<div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-14"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-mentions"
>
<textarea
class="rc-textarea"
rows="1"
/>
</div>
</div>
</div>
</div>
</div>
</form> </form>
`; `;

12
components/form/demo/validate-static.md
View File

@ -23,18 +23,18 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
```tsx ```tsx
import { SmileOutlined } from '@ant-design/icons'; import { SmileOutlined } from '@ant-design/icons';
import { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber } from 'antd'; import { Form, Input, DatePicker, TimePicker, Select, Cascader, InputNumber, Mentions } from 'antd';
const { Option } = Select; const { Option } = Select;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 5 }, sm: { span: 6 },
}, },
wrapperCol: { wrapperCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 12 }, sm: { span: 14 },
}, },
}; };
@ -106,7 +106,7 @@ ReactDOM.render(
<Form.Item label="inline" style={{ marginBottom: 0 }}> <Form.Item label="inline" style={{ marginBottom: 0 }}>
<Form.Item <Form.Item
validateStatus="error" validateStatus="error"
help="Please select the correct date" help="Please select right date"
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }} style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
> >
<DatePicker /> <DatePicker />
@ -136,6 +136,10 @@ ReactDOM.render(
<Form.Item label="Error" hasFeedback validateStatus="error"> <Form.Item label="Error" hasFeedback validateStatus="error">
<Input.Password allowClear placeholder="with input password and allowClear" /> <Input.Password allowClear placeholder="with input password and allowClear" />
</Form.Item> </Form.Item>
<Form.Item label="Fail" validateStatus="error">
<Mentions />
</Form.Item>
</Form>, </Form>,
mountNode, mountNode,
); );

15
components/form/style/status.less
View File

@ -238,7 +238,7 @@
} }
} }
// cascader // Cascader
.@{ant-prefix}-cascader-picker { .@{ant-prefix}-cascader-picker {
&:hover &:hover
.@{ant-prefix}-cascader-picker-label:hover .@{ant-prefix}-cascader-picker-label:hover
@ -252,7 +252,7 @@
} }
} }
// transfer // Transfer
.@{ant-prefix}-transfer { .@{ant-prefix}-transfer {
&-list { &-list {
border-color: @error-color; border-color: @error-color;
@ -271,7 +271,7 @@
} }
} }
// RadioGroup // Radio.Group
.@{ant-prefix}-radio-button-wrapper { .@{ant-prefix}-radio-button-wrapper {
border-color: @error-color !important; border-color: @error-color !important;
@ -281,6 +281,15 @@
} }
} }
} }
// Mentions
.@{ant-prefix}-mentions {
border-color: @error-color !important;
&-focused,
&:focus {
.active(@error-color, @error-color-hover, @error-color-outline);
}
}
} }
// ====================== Validating ======================= // ====================== Validating =======================