Skip to content

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

Merged
cchaos merged 7 commits intoelastic:mainfrom
cchaos:date-picker-range/invalid
May 31, 2022
Merged

[EuiDatePickerRange] & [EuiSuperDatePicker] Fix up disabled and isInvalid states#5918
cchaos merged 7 commits intoelastic:mainfrom
cchaos:date-picker-range/invalid

Conversation

@cchaos
Copy link
Copy Markdown
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
Copy Markdown

kibanamachine commented May 20, 2022

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

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

@1Copenut
Copy link
Copy Markdown
Contributor

1Copenut commented May 23, 2022

@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
Copy Markdown
Contributor

cee-chen commented May 26, 2022

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

cee-chen
cee-chen reviewed May 26, 2022
View reviewed changes
cee-chen
cee-chen reviewed May 26, 2022
View reviewed changes
@cee-chen
Copy link
Copy Markdown
Contributor

cee-chen commented May 26, 2022

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 26, 2022

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
Copy Markdown
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
Copy Markdown

kibanamachine commented May 31, 2022

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
Copy Markdown
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
Copy Markdown

kibanamachine commented May 31, 2022

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

2 more reviewers

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

@1Copenut 1Copenut 1Copenut approved these changes

Reviewers whose approvals may not affect merge requirements

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