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

Jump to bottom

[EuiDatePickerRange] & [EuiSuperDatePicker] Fix up disabled and isInvalid states #5918

Merged
merged 7 commits into from
May 31, 2022
Merged

[EuiDatePickerRange] & [EuiSuperDatePicker] Fix up disabled and isInvalid states #5918

merged 7 commits into from
May 31, 2022

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented May 20, 2022 •
edited
Loading

EuiDatePickerRange

  • Added isInvalid and disabled as top level props
  • Updated delimiter to an sortRight icon and swapped for alert when isInvalid
  • Ensured the whole input gets red border when isInvalid

The following screencasts shows the range starting with isInvalid and disabled on individual components to show how those will take precedence over the top level one passed in:

Before

CleanShot.2022-05-20.at.14.41.12.mp4

After

CleanShot.2022-05-20.at.14.37.03.mp4

And specifically the isInvalid state fixes #4612, and fixes a few items on #2017

Screen Shot 2022-05-20 at 14 49 43 PM

EuiSuperDatePicker

This one now gets styled similarly to the basic EuiDatePickerRange.

Before

Screen Shot 2022-05-20 at 14 54 13 PM

Screen Shot 2022-05-20 at 14 54 24 PM

Screen Shot 2022-05-20 at 15 02 58 PM

After
Screen Shot 2022-05-20 at 14 53 41 PM
Screen Shot 2022-05-20 at 15 01 00 PM
Screen Shot 2022-05-20 at 15 02 28 PM

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately

cchaos added 3 commits May 20, 2022 14:33
[EuiDatePickerRange] Added isInvalid and disabled as top level props
e11f345 
- Updated delimiter to an sortRight icon and swapped for alert when `isInvalid`
- Ensured the whole input gets red border when `isInvalid`
Cleanup docs
038eb3e
[EuiSuperDatePicker] Style isInvalid and disabled similarly to Eu…
1ef8785 
…iDatePickerRange
@cchaos cchaos requested a review from 1Copenut May 20, 2022 19:20
@kibanamachine
Copy link

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

1Copenut
1Copenut reviewed May 20, 2022
View reviewed changes
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.

I have one comment for now that hopefully quiets the TypeScript error you were asking about. I'll finish reviewing the component for keyboard and screen reader changes on Monday morning.

src-docs/src/views/date_picker/range.tsx Outdated Show resolved Hide resolved
@1Copenut
Copy link
Contributor

@cchaos I'm afraid I've reached the end of my helpful suggestions for TypeScript regarding the errors you're seeing. On the other hand, I was able to test the new top-level props with VoiceOver and Safari. I confirmed the isDisabled and readOnly props affected both inputs on the date range. I also noticed a couple of items for improvement around the live messaging and isInvalid. I'll file those as separate improvement items after lunch.

@cchaos cchaos requested a review from cee-chen May 26, 2022 17:37
@cee-chen
Copy link
Contributor

@cchaos Are you assigning this to me to investigate the Typescript 'help' issues or for a full review?

@cee-chen
Copy link
Contributor

Did a quick review pass and this LGTM with only 1 question about = undefined.

@kibanamachine
Copy link

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

cee-chen
cee-chen approved these changes May 26, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

I'm OOO all next week so going to go ahead and pre-approve as my 1 comment is minor/not a blocker. Feel free to address or merge, either way!

@cchaos cchaos requested a review from 1Copenut May 31, 2022 15:07
@kibanamachine
Copy link

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

1Copenut
1Copenut approved these changes May 31, 2022
View reviewed changes
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!

@cchaos cchaos merged commit 4ce30ba into elastic:main May 31, 2022
@cchaos cchaos deleted the date-picker-range/invalid branch May 31, 2022 19:15
@kibanamachine
Copy link

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

@thompsongl thompsongl mentioned this pull request Jun 8, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

@1Copenut 1Copenut 1Copenut approved these changes

Assignees
No one assigned
Labels
accessibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[EuiDatePickerRange] Error state relies on color alone
4 participants
@cchaos @kibanamachine @1Copenut @cee-chen