Skip to content

Commit

Permalink
fix: Mentions error style in Form (ant-design#32385)
Browse files Browse the repository at this point in the history
  • Loading branch information
@afc163
afc163 authored Oct 5, 2021
1 parent 27c3b51 commit d361537
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 38 deletions.
96 changes: 65 additions & 31 deletions components/form/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<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
class=""
Expand All @@ -6802,7 +6802,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -6845,7 +6845,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -6905,7 +6905,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -6971,7 +6971,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7027,7 +7027,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7083,7 +7083,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7149,7 +7149,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7238,7 +7238,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7330,7 +7330,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7435,7 +7435,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -7541,7 +7541,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
style="margin-bottom:0"
>
<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
class=""
Expand All @@ -7551,7 +7551,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -7620,7 +7620,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-explain-error"
role="alert"
>
Please select the correct date
Please select right date
</div>
</div>
</div>
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7704,7 +7704,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7827,7 +7827,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7910,7 +7910,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -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"
>
<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
class=""
Expand All @@ -7997,7 +7997,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</label>
</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
class="ant-form-item-control-input"
Expand Down Expand Up @@ -8090,6 +8090,40 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</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>
`;

Expand Down
12 changes: 8 additions & 4 deletions components/form/demo/validate-static.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,18 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo

```tsx
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 formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
sm: { span: 14 },
},
};

Expand Down Expand Up @@ -106,7 +106,7 @@ ReactDOM.render(
<Form.Item label="inline" style={{ marginBottom: 0 }}>
<Form.Item
validateStatus="error"
help="Please select the correct date"
help="Please select right date"
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
>
<DatePicker />
Expand Down Expand Up @@ -136,6 +136,10 @@ ReactDOM.render(
<Form.Item label="Error" hasFeedback validateStatus="error">
<Input.Password allowClear placeholder="with input password and allowClear" />
</Form.Item>

<Form.Item label="Fail" validateStatus="error">
<Mentions />
</Form.Item>
</Form>,
mountNode,
);
Expand Down
Loading

0 comments on commit d361537

Please sign in to comment.