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.

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

[EuiDatePicker] Add alert icon when isInvalid #6677

Merged
merged 6 commits into from
Apr 4, 2023

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Apr 4, 2023

Summary

As part of my on-call work this week, I'm finishing up some older backlog work, in this case #2017.

This PR:

  • Adds the alert icon (and icon offset/padding affordance) to EuiDatePicker
  • Converts EuiDatePicker from a class component to a function component
  • Removes the need for .euiFieldText-isInvalid by adding a new useEuiValidatableControl hook that allows passing in control/input elements instead of relying on direct children
  • Updates EuiDatePickerRange to account for the underlying date picker component using :invalid styling

I strongly recommend following along by commit with whitespace changes turned off, as there are a lot of "lines" changed that are just indentation changes.

Before

After

QA

General checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Added or updated jest and cypress tests
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

- [ ] Added documentation
- [ ] Checked Code Sandbox works for any docs examples
- [ ] Checked for breaking changes and labeled appropriately

  • Updated the Figma library counterpart

cee-chen added 5 commits April 3, 2023 16:15
- so we can use hooks later on for invalid/EuiValidatableControl work
- with the new `useEuiValidatableControl` hook, the datepicker component now correctly sets `:invalid` on the underlying input
- delimiter should stay an arrow now that each picker input displays its own warning icon

- underline style should be removed when disabled/readonly (which matches other basic EUI field/input components)
@cee-chen cee-chen requested a review from 1Copenut April 4, 2023 00:17
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6677/

@cee-chen cee-chen changed the title [EuiDatePicker] Add alert icon to isInvalid state [EuiDatePicker] Add alert icon when isInvalid Apr 4, 2023
@cee-chen cee-chen force-pushed the datepicker/invalid branch from 8c1c33c to 2392b9c Compare April 4, 2023 03:14
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6677/

Copy link
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 LGTM.

The DatePicker aria-invalid="true" logic is working as expected and gives screen readers a text readout of "invalid text" as expected.

@cee-chen cee-chen merged commit a39d7bc into elastic:main Apr 4, 2023
@cee-chen cee-chen deleted the datepicker/invalid branch April 4, 2023 20:09
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6677/

jbudz added a commit to elastic/kibana that referenced this pull request Apr 18, 2023
EUI `77.0.0` ➡️ `77.1.1`

## [`77.1.0`](https://github.com/elastic/eui/tree/v77.1.0)

- Updated `EuiDatePicker` to display a warning icon and correctly set
`aria-invalid` when `isInvalid` is passed
([#6677](elastic/eui#6677))
- Updated `EuiFilePicker` to display an alert icon when `isInvalid`
([#6678](elastic/eui#6678))
- Updated `EuiTextArea` to display an alert icon when `isInvalid`
([#6679](elastic/eui#6679))
- Updated `EuiTextArea` to support the `isLoading` prop
([#6679](elastic/eui#6679))
- Updated `EuiComboBox` to display a warning icon and correctly set
`aria-invalid` when `isInvalid` is passed
([#6680](elastic/eui#6680))

**Bug fixes**

- Fixed `EuiAccordion` to not set an `aria-expanded` attribute on
non-interactive `buttonElement`s
([#6694](elastic/eui#6694))
- Fixed an `EuiPopoverFooter` bug causing nested popovers within
popovers (note: not a recommended use-case) to unintentionally override
its panel padding size inherited from context
([#6698](elastic/eui#6698))
- Fixed `EuiComboBox` to only delete the last selected item on backspace
if the input caret is present
([#6699](elastic/eui#6699))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Jon <jon@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants