[EuiSuperDatePicker] Convert date popover styles to Emotion#7908
Merged
cee-chen merged 9 commits intoelastic:mainfrom Jul 25, 2024
Merged
[EuiSuperDatePicker] Convert date popover styles to Emotion#7908cee-chen merged 9 commits intoelastic:mainfrom
cee-chen merged 9 commits intoelastic:mainfrom
Conversation
- which will allow us to use a padding style hook in the future + remove unused `position` prop + reorder imports
- will allow us to use hooks for Emotion styles, might as well do this since we did EuiRelativeTab as well - create new `isReadyToParse` state to replace old `isParsing` ref + remove unused `position` prop
10 tasks
mgadewoll
reviewed
Jul 24, 2024
Contributor
mgadewoll
left a comment
There was a problem hiding this comment.
Awesome work to convert more class components to function components! 🎉
🗒️ When checking the component I noticed a couple of regressions:
- On paste the absolute tab input adds the value twice. This then also results in a pasted timestamp not being parsed as expected (experienced in Chrome, Edge and Safari)
- The focus styling on the date inputs changed: On previous production each input has a dedicated focus styling while now they have a shared one. Not sure this is expected? (I'm also not sure this is related to this PRs updates or the one before 🤔)
Screen.Recording.2024-07-24.at.17.22.24.mov
packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
Outdated
Show resolved
Hide resolved
It worked in Firefox but not in webkit, derp
…riable + fix comment typo
Contributor
Author
|
🤦 Thanks so much for catching the paste bug! It was working in FF bizarrely enough but not in webkit browsers. That should be fixed now in 8a2ab6b. Regarding the updating highlight, that was broken in the previous PR. I'm also noticing a line wrapping issue I'll want to fix. If no objections, I'll create a separate PR for the fix! Edit: PR with fix: #7911 |
Collaborator
💚 Build Succeeded
History
|
mgadewoll
approved these changes
Jul 25, 2024
Contributor
mgadewoll
left a comment
There was a problem hiding this comment.
🚢 🐈⬛ Thanks for the fixes, it works as expected now! 🎉
Contributor
Author
|
Thanks a million as always for your amazing QA Lene! ❤️🔥 |
jbudz
pushed a commit
to elastic/kibana
that referenced
this pull request
Aug 1, 2024
`v95.4.0` ⏩ `v95.5.0` _[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.5.0`](https://github.com/elastic/eui/releases/v95.5.0) - Added `minusInSquare` and `plusInSquare` glyphs to `EuiIcon`. ([#7875](elastic/eui#7875)) **Bug fixes** - Fixed `EuiSuperDatePicker` not correctly passing `refreshMinInterval` from the quick select popover ([#7905](elastic/eui#7905)) **CSS-in-JS conversions** - Converted `EuiSuperDatePicker`'s form control to Emotion; ([#7904](elastic/eui#7904)) - Removed `$euiSuperDatePickerWidth` - Removed `$euiSuperDatePickerButtonWidth` - Removed `$euiSuperDatePickerNeedsUpdatingBackgroundColor` - Removed `$euiSuperDatePickerNeedsUpdatingTextColor` - Removed `@euiSuperDatePickerText` mixin - Converted `EuiSuperDatePicker`'s date popover content to Emotion ([#7908](elastic/eui#7908)) - Converted `EuiSuperDatePicker`'s quick select to Emotion ([#7909](elastic/eui#7909)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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
Part 2 of 3 (see #7904, #7909)
This PR contains two conversions of class components to function components - I strongly recommend following by commit for easier review. The actual Sass conversions are fairly minimal, but getting
EuiAbsoluteTabandEuiRelativeTabto a state where they can use hooks was the majority of the work.QA
https://eui.elastic.co/pr_7908/#/templates/super-date-picker should look the same as production with the following permutations:
asdf) into the input. Confirm the formatting help text shows up and correctly overlaps into the submit button (should take up the full width of the popover)1698793930. Confirm that the content automatically parses/validates on pasteGeneral checklist
- [ ] Checked in both light and dark modes- Size CSS only, no colors- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)