[EuiDatePicker] Fix inline rendering + add append/prepend support
#7987
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
- EuiFormControlLayout CSS changed from box-shadow to border, forgot to update this CSS as well
Several Kibana usages already bogart `EuiFormControlLayout` to mimic this UI/UX, so we should just support it OOTB (EuiDatePickerRange already does)
cee-chen
force-pushed
the
datepicker-kibana-fixes
branch
from
86ebe42
to
4685c69
Compare
mgadewoll
approved these changes
Aug 28, 2024
cee-chen
commented
Aug 28, 2024
💚 Build Succeeded
History
|
jbudz
pushed a commit
to elastic/kibana
that referenced
this pull request
Sep 10, 2024
`v95.9.0`⏩`v95.10.1` > [!note] > **EuiDataGrid**'s header cells have received a major UX change in order to support interactive children within header content. Column header actions now must be hovered and then clicked directly, or opened with the Enter key, as opposed to being able to click the entire header cell to see the actions popover. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.10.0`](https://github.com/elastic/eui/releases/v95.10.0) - Updated `EuiDataGrid` to support interactive header cell content ([#7898](elastic/eui#7898)) - Updated `EuiSearchBar`'s `field_value_selection` filter type with a new `autoSortOptions` config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list ([#7958](elastic/eui#7958)) - Updated `getDefaultEuiMarkdownPlugins` to support the following new default plugin configurations: ([#7985](elastic/eui#7985)) - `parsingConfig.linkValidator`, which allows configuring `allowRelative` and `allowProtocols` - `parsingConfig.emoji`, which allows configuring emoticon parsing - `processingConfig.linkProps`, which allows configuring rendered links with any props that `EuiLink` accepts - See our **Markdown plugins** documentation for example `EuiMarkdownFormat` and `EuiMarkdownEditor` usage - Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout ([#7987](elastic/eui#7987)) **Bug fixes** - Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}` ([#7987](elastic/eui#7987)) - Fixed `EuiSuperSelect`'s placeholder text color to match other form controls ([#7995](elastic/eui#7995)) **Accessibility** - Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells ([#7898](elastic/eui#7898)) ## [`v95.10.1`](https://github.com/elastic/eui/releases/v95.10.1) **Bug fixes** - Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible ([#7999](elastic/eui#7999)) --------- Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
gergoabraham
pushed a commit
to gergoabraham/kibana
that referenced
this pull request
Sep 13, 2024
`v95.9.0`⏩`v95.10.1` > [!note] > **EuiDataGrid**'s header cells have received a major UX change in order to support interactive children within header content. Column header actions now must be hovered and then clicked directly, or opened with the Enter key, as opposed to being able to click the entire header cell to see the actions popover. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.10.0`](https://github.com/elastic/eui/releases/v95.10.0) - Updated `EuiDataGrid` to support interactive header cell content ([elastic#7898](elastic/eui#7898)) - Updated `EuiSearchBar`'s `field_value_selection` filter type with a new `autoSortOptions` config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list ([elastic#7958](elastic/eui#7958)) - Updated `getDefaultEuiMarkdownPlugins` to support the following new default plugin configurations: ([elastic#7985](elastic/eui#7985)) - `parsingConfig.linkValidator`, which allows configuring `allowRelative` and `allowProtocols` - `parsingConfig.emoji`, which allows configuring emoticon parsing - `processingConfig.linkProps`, which allows configuring rendered links with any props that `EuiLink` accepts - See our **Markdown plugins** documentation for example `EuiMarkdownFormat` and `EuiMarkdownEditor` usage - Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout ([elastic#7987](elastic/eui#7987)) **Bug fixes** - Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}` ([elastic#7987](elastic/eui#7987)) - Fixed `EuiSuperSelect`'s placeholder text color to match other form controls ([elastic#7995](elastic/eui#7995)) **Accessibility** - Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells ([elastic#7898](elastic/eui#7898)) ## [`v95.10.1`](https://github.com/elastic/eui/releases/v95.10.1) **Bug fixes** - Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible ([elastic#7999](elastic/eui#7999)) --------- Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
markov00
pushed a commit
to markov00/kibana
that referenced
this pull request
Sep 18, 2024
`v95.9.0`⏩`v95.10.1` > [!note] > **EuiDataGrid**'s header cells have received a major UX change in order to support interactive children within header content. Column header actions now must be hovered and then clicked directly, or opened with the Enter key, as opposed to being able to click the entire header cell to see the actions popover. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.10.0`](https://github.com/elastic/eui/releases/v95.10.0) - Updated `EuiDataGrid` to support interactive header cell content ([elastic#7898](elastic/eui#7898)) - Updated `EuiSearchBar`'s `field_value_selection` filter type with a new `autoSortOptions` config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list ([elastic#7958](elastic/eui#7958)) - Updated `getDefaultEuiMarkdownPlugins` to support the following new default plugin configurations: ([elastic#7985](elastic/eui#7985)) - `parsingConfig.linkValidator`, which allows configuring `allowRelative` and `allowProtocols` - `parsingConfig.emoji`, which allows configuring emoticon parsing - `processingConfig.linkProps`, which allows configuring rendered links with any props that `EuiLink` accepts - See our **Markdown plugins** documentation for example `EuiMarkdownFormat` and `EuiMarkdownEditor` usage - Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout ([elastic#7987](elastic/eui#7987)) **Bug fixes** - Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}` ([elastic#7987](elastic/eui#7987)) - Fixed `EuiSuperSelect`'s placeholder text color to match other form controls ([elastic#7995](elastic/eui#7995)) **Accessibility** - Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells ([elastic#7898](elastic/eui#7898)) ## [`v95.10.1`](https://github.com/elastic/eui/releases/v95.10.1) **Bug fixes** - Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible ([elastic#7999](elastic/eui#7999)) --------- Co-authored-by: Lene Gadewoll <lene.gadewoll@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
I discovered an inline EuiDatePicker border regression while investigating #5958, and I also discovered some very incorrect usages of
EuiFormControlLayoutwhile grepping for the component in Kibana.Adding
append/prependnodes to EuiDatePicker will help with a significant amount of those use cases, as people were using the layout wrapper just for appending/prepending info to the date picker input.QA
Show shadowswitch is toggledGeneral checklist
- [ ] Checked for accessibility including keyboard-only and screenreader modes@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examplesand cypresstests- [ ] Updated visual regression tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)