[EuiRange/EuiDualRange] Add alert icon when isInvalid and showInput
#6704
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nstead of text - to more correctly matches the current Figma designs + add a screen reader label
- color arrow + extend line under arrow and icons + fix background colors of icons
…utWithPopover"` - the input was rendering the padding offset for the invalid icon, without actually rendering said icons (due to `controlOnly` prop)
…ting `aria-invalid` Browsers natively set their own custom `validity` based on min/max/value/step/etc - we should hook into these and extend them (as opposed to overriding them) + switch Jest tests from Enzyme to RTL while here
…lRange - account for `invalid` icon (which now automatically displays for out of range inputs) - dynamically adjust width based on # of characters in actual input - adjust width affordances based on `compressed` - width changes are especially a readability improvement in Firefox
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6704/ |
breehall
approved these changes
Apr 11, 2023
Comment on lines
+120
to
+129
| const onKeyDown = useCallback( | ||
| (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| _onKeyDown?.(e); | ||
| // Wait a beat before checking validity - we can't use `e.target` as it's stale | ||
| requestAnimationFrame(() => { | ||
| setIsNativelyInvalid(!validityRef.current!.validity.valid); | ||
| }); | ||
| }, | ||
| [_onKeyDown] | ||
| ); |
- after playing more with date range picker as well as a broader variety of delimited inputs, this change was too specific to EuiDualRange
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6704/ |
|
Whoops, thanks so much for the snapshot reminder! Saw that this morning and then totally forgot. Much appreciated Bree! |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6704/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6704/ |
mistic
pushed a commit
to elastic/kibana
that referenced
this pull request
May 5, 2023
## Summary `eui@77.1.1` ⏩ `eui@77.2.2` Closes elastic/eui#6724 --- ## [`77.2.2`](https://github.com/elastic/eui/tree/v77.2.2) - Updated `EuiFocusTrap` to support the `gapMode` prop configuration (now defaults to `padding`) ([#6744](elastic/eui#6744)) **Bug fixes** - Fixed the `scrollLock` property on `EuiFocusTrap` (and other components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to no longer block scrolling on nested portalled content, such as combobox dropdowns ([#6744](elastic/eui#6744)) ## [`77.2.1`](https://github.com/elastic/eui/tree/v77.2.1) **Bug fixes** - Fixed `EuiFieldNumber`'s native browser validity detection causing extra unnecessary rerenders ([#6741](elastic/eui#6741)) ## [`77.2.0`](https://github.com/elastic/eui/tree/v77.2.0) - Updated `EuiFieldNumber` to detect native browser invalid state and show an invalid icon ([#6704](elastic/eui#6704)) - Improved the input widths of `EuiRange` and `EuiDualRange` when `showInput={true}` to account for invalid icons ([#6704](elastic/eui#6704)) - Improved the `isInvalid` styling of `EuiDualRange` when `showInput="inputWithPopover"` ([#6704](elastic/eui#6704)) - Updated `EuiFormControlLayoutIcons` to render left icons in expected DOM order ([#6705](elastic/eui#6705)) - Updated `EuiDatePickerRange`'s `isInvalid` state to match other range inputs ([#6705](elastic/eui#6705)) - Updated `EuiSuperDatePicker`'s `isInvalid` state to match other range inputs ([#6705](elastic/eui#6705)) **Bug fixes** - Fixed `EuiValidatableControl` to correctly display `isInvalid` states on mount ([#6705](elastic/eui#6705)) - Fixed an issue with `EuiSearchBar` where quoted phrases were not quoted when generating an Elasticsearch query. ([#6714](elastic/eui#6714)) --------- Co-authored-by: Constance Chen <constance.chen.3@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Constance Chen <constance.chen@elastic.co>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
EuiFieldNumberandEuiRange/EuiDualRangenumber fields when invalid numbers are typed by users)I strongly recommend following along by commit as this PR touches and cleans up various sub-components that
EuiRange/EuiDualRangerely on.Dynamic validation based on user input and browser/native
:invalidstateBefore/After
QA
General checklist