[EuiSuperDatePicker] Fix broken EuiDatePickerRange styling; Add isDisabled object config
#6821
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
- fixes CSS that was broken by adding a `<span>` EuiDateRangePicker wrapper - removes need for `.euiSuperDatePicker__flexWrapper` by simply adding 2 flex CSS properties, and setting `flex-grow: 1` on the date picker range - convert various modifier classes to flatter Sass
- switch to RTL `render` instead of shallow/dive - add a test to render the underlying `EuiDatePickerRange` component
cee-chen
force-pushed
the
superdatepicker/disabled-text
branch
from
573140a
to
153bdcd
Compare
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6821/ |
tkajtoch
reviewed
May 31, 2023
| @@ -195,77 +202,106 @@ describe('EuiSuperDatePicker', () => { | |||
|
|
|||
| describe('showUpdateButton', () => { | |||
| test('can be false', () => { | |||
| const component = shallowAndDive( | |||
| const { container } = render( | |||
This reverts commit 153bdcd.
|
Thanks Tomasz! 🎉 |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6821/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6821/ |
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Jun 5, 2023
## Summary `eui@81.0.0` ⏩ `eui@81.2.0` - 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 <42973632+kibanamachine@users.noreply.github.com>
cqliu1
pushed a commit
to cqliu1/kibana
that referenced
this pull request
Jun 5, 2023
## Summary `eui@81.0.0` ⏩ `eui@81.2.0` - 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` ([elastic#6821](elastic/eui#6821)) **Bug fixes** - Fixed broken `EuiSuperDatePicker` styles ([elastic#6821](elastic/eui#6821)) ## [`81.1.0`](https://github.com/elastic/eui/tree/v81.1.0) - Added `EuiInlineEditText` and `EuiInlineEditTitle` components ([elastic#6757](elastic/eui#6757)) - Updated `EuiDatePickerRange` to support `inline` display ([elastic#6795](elastic/eui#6795)) - Added an `onError` callback prop to `EuiErrorBoundary` ([elastic#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. ([elastic#6817](elastic/eui#6817)) **Bug fixes** - Fixed `EuiDatePicker`'s `inline` display to correctly render and prevent user interaction when `disabled` or `readOnly` ([elastic#6795](elastic/eui#6795)) - Fixed `EuiDatePicker`'s `inline` display to correctly render `isInvalid` and `isLoading` icons ([elastic#6795](elastic/eui#6795)) **CSS-in-JS conversions** - Converted `EuiDatePickerRange` to Emotion ([elastic#6795](elastic/eui#6795)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
sloanelybutsurely
pushed a commit
to sloanelybutsurely/kibana
that referenced
this pull request
Jun 6, 2023
## Summary `eui@81.0.0` ⏩ `eui@81.2.0` - 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` ([elastic#6821](elastic/eui#6821)) **Bug fixes** - Fixed broken `EuiSuperDatePicker` styles ([elastic#6821](elastic/eui#6821)) ## [`81.1.0`](https://github.com/elastic/eui/tree/v81.1.0) - Added `EuiInlineEditText` and `EuiInlineEditTitle` components ([elastic#6757](elastic/eui#6757)) - Updated `EuiDatePickerRange` to support `inline` display ([elastic#6795](elastic/eui#6795)) - Added an `onError` callback prop to `EuiErrorBoundary` ([elastic#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. ([elastic#6817](elastic/eui#6817)) **Bug fixes** - Fixed `EuiDatePicker`'s `inline` display to correctly render and prevent user interaction when `disabled` or `readOnly` ([elastic#6795](elastic/eui#6795)) - Fixed `EuiDatePicker`'s `inline` display to correctly render `isInvalid` and `isLoading` icons ([elastic#6795](elastic/eui#6795)) **CSS-in-JS conversions** - Converted `EuiDatePickerRange` to Emotion ([elastic#6795](elastic/eui#6795)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
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
This PR accomplishes two separate tasks:
(first two commits) I added an extra opinionated
<span>toEuiDatePickerRangein fa7bc44, totally forgetting thatEuiSuperDatePickerdogfoodsEuiDatePickerRange, and consequently broke range styling on our latest release..euiSuperDatePicker__flexWrapper(and flex children wrappers), and instead placing the.euiSuperDatePickerCSS class directly on the topmost wrapper:(next two commits) closes [SuperDatePicker] Add a disabled state default text #6814
isDisabled={{ display }}object configuration which allows consumers to customized the displayed disabled text (e.g., if they want to render text saying that no times are currently being filtered).QA
General checklist
@defaultif default values are missing) and playground togglesand cypress tests- [ ] Checked for breaking changes and labeled appropriatelyDOM/CSS changes are semi-breaking, but not part of the promised API, and I'll update various Kibana references accordingly- [ ] Added documentationI'm skipping adding a new/specific documentation section for this behavior. TBH, I consider it kinda edge case and for a very specific Kibana usage, and I'd rather document/QA it only in Storybook rather than encourage usage.