[EuiDatePickerRange] Add inline display behavior; [EuiDatePicker] Improve inline display behavior
#6795
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
|
jenkins test this |
- `.react-datepicker-popper` is no longer a class being set anywhere - shadow styles don't use a border
- fix `disabled` and `readOnly` styling & behavior - should match inputs and no longer be interactable - render form control icons below the datepicker - better docs - write tests (e2e for now, should likely be storybook)
+ remove unnecessary height style - appears to already work as-is thanks to `.euiFormControlLayoutDelimited`
- helps separate form control and date picker range concerns
… toggle - due to new `span` `isLoading` needs to be specified via typescript + pulled out of `...rest` tests - reorganize w/ `describe` - add missing props tests docs - convert to TSX - fix bad `isInvalid` use from min test - remove non-working `isInvalid` from `range.tsx` - the display toggle is overriding that prop
- use separate styles fn, since display is so different and has many extra conditions - requires a lot of resets and layout fixes - update docs examples with toggles & snippet - add unit test - but most permutations should likely be storybooks
…nd `prepend/append` display - they don't make sense to render, and the single datepicker doesn't render them either
- to get `@container` query support, which I'll want to use for responsive `inline` behavior
…siveness (sadly, jsdom errors on this, so we have to add another console error exclusion)
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/ |
cee-chen
force-pushed
the
daterange-inline
branch
from
e096f99 to
df16cc7
Compare
|
jenkins test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/ |
tkajtoch
reviewed
May 25, 2023
There was a problem hiding this comment.
This is a huge improvement! 🎉 Code looks great and the changes work as expected on all browsers. Visually I noticed a couple minor things:
- when
isInvalid = true, the bottom bar is spaced 1px off the date picker's edge due toeuiFormControlLayoutDelimitedhavingpadding: 1px
- EuiDatePickerRange layout wraps content at
700pxcontainer width but some of theendDateControlcontent becomes obstructed below740pxwhenshowTimeSelect = true.
|
Thanks for the great catches Tomasz! I'll fix the dependency conflicts and address the two visual items in your screenshot here shortly |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/ |
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Jun 5, 2023
## Summary `[email protected]` ⏩ `[email protected]` - Most changes to source code in this PR are CSS cleanups/deprecations in `EuiSuperDatePicker`/`EuiDatePickerRange` - One team (ML) had a `inline` specific usage of `EuiDatePickerRange` that they reached out to us about via Slack, and that we have fixed in this PR. - All other usages of date picker components should have remained working as-is with no changes, but please ping us if you see otherwise! ___ ## [`81.2.0`](https://github.com/elastic/eui/tree/v81.2.0) - Updated `EuiSuperDatePicker` to accept an object configuration for `isDisabled` ([#6821](elastic/eui#6821)) **Bug fixes** - Fixed broken `EuiSuperDatePicker` styles ([#6821](elastic/eui#6821)) ## [`81.1.0`](https://github.com/elastic/eui/tree/v81.1.0) - Added `EuiInlineEditText` and `EuiInlineEditTitle` components ([#6757](elastic/eui#6757)) - Updated `EuiDatePickerRange` to support `inline` display ([#6795](elastic/eui#6795)) - Added an `onError` callback prop to `EuiErrorBoundary` ([#6810](elastic/eui#6810)) - Updated `EuiDataGrid` to only render screen reader text announcing cell position if the cell is currently focused. This should improve the ability to copy and paste multiple cells without SR text. ([#6817](elastic/eui#6817)) **Bug fixes** - Fixed `EuiDatePicker`'s `inline` display to correctly render and prevent user interaction when `disabled` or `readOnly` ([#6795](elastic/eui#6795)) - Fixed `EuiDatePicker`'s `inline` display to correctly render `isInvalid` and `isLoading` icons ([#6795](elastic/eui#6795)) **CSS-in-JS conversions** - Converted `EuiDatePickerRange` to Emotion ([#6795](elastic/eui#6795)) --------- Co-authored-by: Kibana Machine <[email protected]>
3 tasks
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
The ML team was previously using
EuiDatePickerRangeandinlinetogether, which was an undocumented usage of the range picker and was only sorta working by accident (note the buggy shadow+border behavior):#6705 broke this accidental behavior by enforcing all the height/width styles a delimited form control normally enforces:
The solution to this is to make the
inlineprop an actual first class citizen forEuiDatePickerRange. In addition to correctly displaying the base inline state, responsive behavior needed to be implemented, and there were numerous issues and untested permutations ofinlineand, e.g.disabled/readOnly/isInvalidthat needed more thoughtful handling.EuiDatePicker
EuiDateRangePicker
QA
disabledandreadOnlystates for both the single and range picker display as visually expected, and cannot be clicked on or tabbed toloadingandisInvalidicons appear / set a bottom lineGeneral checklist
@defaultif default values are missing)and playground togglesand screenreader modes- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- there are className and DOM changes that we'll likely have to update several Kibana snapshots for, but I don't consider that to be breaking- [ ] Updated the Figma library counterpart- not seeing aninlineprop demo in Figma