Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiForm] Added invalidCallout prop to allow conditional rendering of error callout #3585

Merged
merged 12 commits into from
Jun 11, 2020
Merged

[EuiForm] Added invalidCallout prop to allow conditional rendering of error callout #3585

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fdbb84d
Added optional rendering of callout error in form
shrey Jun 10, 2020
c4e6d6d
Changed the boolean showCallout
shrey Jun 10, 2020
31edcfd
changes
shrey Jun 10, 2020
f87e005
Added changelog entry and snapshot for new prop
shrey Jun 10, 2020
4dea105
Implemented changes
shrey Jun 10, 2020
f64503b
Updated tests and docs
shrey Jun 10, 2020
db2c68b
Quick change to docs text
cchaos Jun 10, 2020
50c3473
Updated snapshot
shrey Jun 10, 2020
80d43f7
Merge branch 'shrey5' of https://github.com/shrey/eui into shrey5
shrey Jun 10, 2020
19fde0d
Some more changes
shrey Jun 10, 2020
e29b3dd
Updated snapshots
shrey Jun 11, 2020
a88dd59
Fix prop doc syntax
cchaos Jun 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src-docs/src/views/form_validation/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default () => {

return (
<Fragment>
<EuiForm isInvalid={showErrors} error={errors}>
<EuiForm isInvalid={showErrors} error={errors} showCallout={true}>
<EuiFormRow label="Validation only" isInvalid={showErrors}>
<EuiFieldText name="first" isInvalid={showErrors} />
</EuiFormRow>
Expand Down
6 changes: 4 additions & 2 deletions src/components/form/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export type EuiFormProps = CommonProps &
*/
component?: 'form' | 'div';
error?: ReactNode | ReactNode[];
showCallout?: boolean;
cchaos marked this conversation as resolved.
Show resolved Hide resolved
};

export const EuiForm: FunctionComponent<EuiFormProps> = ({
Expand All @@ -47,6 +48,7 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({
isInvalid,
error,
component = 'div',
showCallout,
cchaos marked this conversation as resolved.
Show resolved Hide resolved
...rest
}) => {
const classes = classNames('euiForm', className);
Expand All @@ -68,11 +70,11 @@ export const EuiForm: FunctionComponent<EuiFormProps> = ({

let optionalErrorAlert;

if (isInvalid) {
if (isInvalid && showCallout) {
optionalErrorAlert = (
<EuiI18n
token="euiForm.addressFormErrors"
default="Please address the errors in your form.">
default="Please address the errors highlighted below.">
cchaos marked this conversation as resolved.
Show resolved Hide resolved
{(addressFormErrors: string) => (
<EuiCallOut
className="euiForm__errors"
Expand Down