From c2b8914a50a2dd0a2b05b0a9f7f5d712e8cceb90 Mon Sep 17 00:00:00 2001 From: Akash Gupta Date: Sat, 6 Feb 2021 20:50:52 +0530 Subject: [PATCH 1/9] show error callout in the bottom of the form --- src/components/form/form.tsx | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index 4c7c2dce7a57..db8a9ed1c90b 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -42,7 +42,7 @@ export type EuiFormProps = CommonProps & /** * Where to display the callout with the list of errors */ - invalidCallout?: 'above' | 'none'; + invalidCallout?: 'above' | 'none' | 'below'; }; export const EuiForm: FunctionComponent = ({ @@ -73,7 +73,7 @@ export const EuiForm: FunctionComponent = ({ let optionalErrorAlert; - if (isInvalid && invalidCallout === 'above') { + if (isInvalid && (invalidCallout === 'above' || invalidCallout === 'below')) { optionalErrorAlert = ( = ({ } const Element = component; - - return ( - )}> - {optionalErrorAlert} - {children} - - ); + if (invalidCallout === 'above') { + return ( + )}> + {optionalErrorAlert} + {children} + + ); + } else { + return ( + )}> + {children} + {optionalErrorAlert} + + ); + } }; From b9db5cf85e0a32adaf9d0745367e009ca8ad1293 Mon Sep 17 00:00:00 2001 From: Akash Gupta Date: Sat, 6 Feb 2021 21:02:28 +0530 Subject: [PATCH 2/9] updated docs --- CHANGELOG.md | 4 ++++ .../src/views/form_validation/form_validation_example.js | 5 ++++- src-docs/src/views/form_validation/validation.js | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 92f6763c54e8..39000778cafb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +<<<<<<< HEAD No public interface changes since `31.7.0`. ## [`31.7.0`](https://github.com/elastic/eui/tree/v31.7.0) @@ -15,6 +16,9 @@ No public interface changes since `31.7.0`. ## [`31.6.0`](https://github.com/elastic/eui/tree/v31.6.0) - Migrated dependency `axe-puppeteer v1.1.1` to `@axe-core/puppeteer v4.1.1` ([#4482](https://github.com/elastic/eui/pull/4482)) +======= +- Added `below` as an option for `invalidCallout` prop of `EuiForm` to render callout at the bottom ([#4497](https://github.com/elastic/eui/pull/4497)) +>>>>>>> updated docs - Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480)) - Added `paddingSize` prop to `EuiFlyout` ([#4448](https://github.com/elastic/eui/pull/4448)) - Added `size='l'` prop to `EuiTabs` ([#4501](https://github.com/elastic/eui/pull/4501)) diff --git a/src-docs/src/views/form_validation/form_validation_example.js b/src-docs/src/views/form_validation/form_validation_example.js index 9a8944d61be8..91aa5f1db3ae 100644 --- a/src-docs/src/views/form_validation/form_validation_example.js +++ b/src-docs/src/views/form_validation/form_validation_example.js @@ -27,7 +27,10 @@ export const FormValidationExample = { optionally error props onto the EuiForm or{' '} EuiFormRow components. Errors are optional and are passed as an array in case you need to list more than one. You can - also hide the callout by passing + display the callout above or below by passing + invalidCallout=“above“(default) or + invalidCallout=“below“ depending upon + your choice. Additionally you can also hide the callout by passing invalidCallout=“none“

), diff --git a/src-docs/src/views/form_validation/validation.js b/src-docs/src/views/form_validation/validation.js index 1d25d498a2cb..1797f5f6f9d2 100644 --- a/src-docs/src/views/form_validation/validation.js +++ b/src-docs/src/views/form_validation/validation.js @@ -63,8 +63,8 @@ export default () => { - {button} + ); From d0b8c78508b8c4100691835021ec86c2cc371290 Mon Sep 17 00:00:00 2001 From: Akash Gupta Date: Tue, 9 Feb 2021 06:31:41 +0530 Subject: [PATCH 3/9] added EuiButtonGroup and other changes --- .../form_validation_example.js | 6 ++--- .../src/views/form_validation/validation.js | 19 +++++++++++++- src/components/form/form.tsx | 25 +++++++------------ 3 files changed, 30 insertions(+), 20 deletions(-) diff --git a/src-docs/src/views/form_validation/form_validation_example.js b/src-docs/src/views/form_validation/form_validation_example.js index 91aa5f1db3ae..cddbfd8edc3b 100644 --- a/src-docs/src/views/form_validation/form_validation_example.js +++ b/src-docs/src/views/form_validation/form_validation_example.js @@ -27,10 +27,10 @@ export const FormValidationExample = { optionally error props onto the EuiForm or{' '} EuiFormRow components. Errors are optional and are passed as an array in case you need to list more than one. You can - display the callout above or below by passing + display the callout above or below the form by passing invalidCallout=“above“(default) or - invalidCallout=“below“ depending upon - your choice. Additionally you can also hide the callout by passing + invalidCallout=“below“. Additionally, + you can hide the callout by passing invalidCallout=“none“

), diff --git a/src-docs/src/views/form_validation/validation.js b/src-docs/src/views/form_validation/validation.js index 1797f5f6f9d2..f5429d6c199c 100644 --- a/src-docs/src/views/form_validation/validation.js +++ b/src-docs/src/views/form_validation/validation.js @@ -8,6 +8,7 @@ import { EuiTextArea, EuiFieldText, EuiSpacer, + EuiButtonGroup, } from '../../../../src/components'; export default () => { @@ -32,9 +33,25 @@ export default () => { ]; } + const [calloutPosition, setCalloutPosition] = useState('above'); + return ( - + + + + diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index db8a9ed1c90b..e6589e807abd 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -73,7 +73,7 @@ export const EuiForm: FunctionComponent = ({ let optionalErrorAlert; - if (isInvalid && (invalidCallout === 'above' || invalidCallout === 'below')) { + if (isInvalid && invalidCallout !== 'none') { optionalErrorAlert = ( = ({ } const Element = component; - if (invalidCallout === 'above') { - return ( - )}> - {optionalErrorAlert} - {children} - - ); - } else { - return ( - )}> - {children} - {optionalErrorAlert} - - ); - } + + return ( + )}> + {invalidCallout === 'above' && optionalErrorAlert} + {children} + {invalidCallout === 'below' && optionalErrorAlert} + + ); }; From 56755a0a84d4f55e93ea23916b921c2fed4607e6 Mon Sep 17 00:00:00 2001 From: Akash Gupta Date: Thu, 18 Feb 2021 17:17:47 +0530 Subject: [PATCH 4/9] added focus on error --- CHANGELOG.md | 6 +----- .../form_validation_example.js | 5 +---- .../src/views/form_validation/validation.js | 21 ++----------------- .../form/__snapshots__/form.test.tsx.snap | 8 +++++-- src/components/form/form.tsx | 13 +++++++----- 5 files changed, 18 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39000778cafb..1c61824f3ba4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -<<<<<<< HEAD -No public interface changes since `31.7.0`. +- Added `below` as an option for `invalidCallout` prop of `EuiForm` to render callout at the bottom ([#4497](https://github.com/elastic/eui/pull/4497)) ## [`31.7.0`](https://github.com/elastic/eui/tree/v31.7.0) @@ -16,9 +15,6 @@ No public interface changes since `31.7.0`. ## [`31.6.0`](https://github.com/elastic/eui/tree/v31.6.0) - Migrated dependency `axe-puppeteer v1.1.1` to `@axe-core/puppeteer v4.1.1` ([#4482](https://github.com/elastic/eui/pull/4482)) -======= -- Added `below` as an option for `invalidCallout` prop of `EuiForm` to render callout at the bottom ([#4497](https://github.com/elastic/eui/pull/4497)) ->>>>>>> updated docs - Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480)) - Added `paddingSize` prop to `EuiFlyout` ([#4448](https://github.com/elastic/eui/pull/4448)) - Added `size='l'` prop to `EuiTabs` ([#4501](https://github.com/elastic/eui/pull/4501)) diff --git a/src-docs/src/views/form_validation/form_validation_example.js b/src-docs/src/views/form_validation/form_validation_example.js index cddbfd8edc3b..9a8944d61be8 100644 --- a/src-docs/src/views/form_validation/form_validation_example.js +++ b/src-docs/src/views/form_validation/form_validation_example.js @@ -27,10 +27,7 @@ export const FormValidationExample = { optionally error props onto the EuiForm or{' '} EuiFormRow components. Errors are optional and are passed as an array in case you need to list more than one. You can - display the callout above or below the form by passing - invalidCallout=“above“(default) or - invalidCallout=“below“. Additionally, - you can hide the callout by passing + also hide the callout by passing invalidCallout=“none“

), diff --git a/src-docs/src/views/form_validation/validation.js b/src-docs/src/views/form_validation/validation.js index f5429d6c199c..1d25d498a2cb 100644 --- a/src-docs/src/views/form_validation/validation.js +++ b/src-docs/src/views/form_validation/validation.js @@ -8,7 +8,6 @@ import { EuiTextArea, EuiFieldText, EuiSpacer, - EuiButtonGroup, } from '../../../../src/components'; export default () => { @@ -33,25 +32,9 @@ export default () => { ]; } - const [calloutPosition, setCalloutPosition] = useState('above'); - return ( - - - - + @@ -80,8 +63,8 @@ export default () => { + {button} - ); diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap index 2fa55d638644..3ed482b4053b 100644 --- a/src/components/form/__snapshots__/form.test.tsx.snap +++ b/src/components/form/__snapshots__/form.test.tsx.snap @@ -63,7 +63,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has mul
-
    +
    • @@ -107,7 +109,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has one
      -
        +
        • diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index e6589e807abd..5492e6cfa3fb 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -42,7 +42,7 @@ export type EuiFormProps = CommonProps & /** * Where to display the callout with the list of errors */ - invalidCallout?: 'above' | 'none' | 'below'; + invalidCallout?: 'above' | 'none'; }; export const EuiForm: FunctionComponent = ({ @@ -61,7 +61,11 @@ export const EuiForm: FunctionComponent = ({ if (error) { const errorTexts = Array.isArray(error) ? error : [error]; optionalErrors = ( -
            +
              { + node && node.focus(); + }}> {errorTexts.map((error, index) => (
            • {error} @@ -73,7 +77,7 @@ export const EuiForm: FunctionComponent = ({ let optionalErrorAlert; - if (isInvalid && invalidCallout !== 'none') { + if (isInvalid && invalidCallout === 'above') { optionalErrorAlert = ( = ({ return ( )}> - {invalidCallout === 'above' && optionalErrorAlert} + {optionalErrorAlert} {children} - {invalidCallout === 'below' && optionalErrorAlert} ); }; From c018b238e62d8f5188174616db3e1dd9add23ec5 Mon Sep 17 00:00:00 2001 From: Akash Gupta Date: Thu, 18 Feb 2021 18:01:18 +0530 Subject: [PATCH 5/9] updated --- CHANGELOG.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c61824f3ba4..eae171dab27f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,20 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `below` as an option for `invalidCallout` prop of `EuiForm` to render callout at the bottom ([#4497](https://github.com/elastic/eui/pull/4497)) +- Added exports for all EUI component props matching `EuiComponentProps` name pattern. ([#4517](https://github.com/elastic/eui/pull/4517)) +- Added `truncate`, `disabled`, and `emphasize` props to `EuiSideNavItem` ([#4488](https://github.com/elastic/eui/pull/4488)) +- Added `truncate` prop to `EuiSideNav` ([#4488](https://github.com/elastic/eui/pull/4488)) +- Reverted part of [#4509](https://github.com/elastic/eui/pull/4509) and returned `EuiDataGrid`'s background content area to an empty shade ([#4542](https://github.com/elastic/eui/pull/4542)) + +**Bug fixes** + +- Fixed nested indicator of last `EuiSideNav` item ([#4488](https://github.com/elastic/eui/pull/4488)) +- Fixed override possibility of text `color` in `EuiSideNavItem` ([#4488](https://github.com/elastic/eui/pull/4488)) +- Fixed blurry animation of popovers in Chrome ([#4527](https://github.com/elastic/eui/pull/4527)) +- Fixed styles of `disabled` times in `EuiDatePicker` ([#4524](https://github.com/elastic/eui/pull/4524)) + +**Theme: Amsterdam** + +- Removed letter-spacing from `euiFont` Sass mixin ([#4488](https://github.com/elastic/eui/pull/4488)) ## [`31.7.0`](https://github.com/elastic/eui/tree/v31.7.0) From e160e1066eaf135ed9acf071461cb2ca123e696e Mon Sep 17 00:00:00 2001 From: Akash Gupta Date: Fri, 19 Feb 2021 23:28:25 +0530 Subject: [PATCH 6/9] Implemented forwardRef route --- src/components/call_out/call_out.tsx | 110 +++++++++--------- .../form/__snapshots__/form.test.tsx.snap | 11 +- src/components/form/form.tsx | 10 +- 3 files changed, 68 insertions(+), 63 deletions(-) diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx index 519cf719e87e..05c1b738b52c 100644 --- a/src/components/call_out/call_out.tsx +++ b/src/components/call_out/call_out.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { forwardRef, Ref, HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; @@ -54,59 +54,65 @@ const sizeToClassNameMap: { [size in Size]: string } = { m: '', }; -export const EuiCallOut: FunctionComponent = ({ - title, - color = 'primary', - size = 'm', - iconType, - children, - className, - heading, - ...rest -}) => { - const classes = classNames( - 'euiCallOut', - colorToClassNameMap[color], - sizeToClassNameMap[size], - className - ); - - let headerIcon; - - if (iconType) { - headerIcon = ( -