[High Contrast Mode] Ranges, color pickers, and date pickers #8199
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
- pass full theme context (matching all our other helpers) instead of just `euiTheme` - use `is` type predicate instead of `as` cast - use getters to repeat vars instead of comments (which updates the thumb bg color to match in high contrast mode)
- on focus, can be either the focus color or the level color - we'll be using this var shortly for higher contrast borders
+ make the outlines of focused thumbs inherit from the level (more polished) in non-high contrast mode as well
…hemes + tech debt - fix `any` typing
…k mode visibility + tech debt - dogfood new arrow styles helper. this adds another mildly repetitive/annoying Emotion className, but that tradeoff is probably worth it + other misc CSS cleanup/simplifications - minute Loki diffs appear to be coming from aliasing from the transparent border, but shouldn't be a meaningful change
+ add more stories/VRT
…contrast themes + add VRT
- by using `aspect-ratio` instead of padding-bottom hack
- remove transparent background - it's more important that the thumb be visible - remove box shadows and make borders/outlines extra thick + always show outlines, on mouse focus, not just keyboard focus - open to feedback - dark mode feels better *while* focused, but not necessarily while not focused
…ring calendar selections invisible
+ DRY out `euiFormControlDefaultShadow` usage/unsets with newer API
- needs updating still isn't great, but I think this is the best I can do for now :/
cee-chen
force-pushed
the
high-contrast-mode-4.5
branch
from
3ba0768 to
543f22b
Compare
mgadewoll
reviewed
Dec 3, 2024
...ages/eui/src/components/color_picker/color_palette_display/color_palette_display.stories.tsx
Show resolved
Hide resolved
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
mgadewoll
approved these changes
Dec 5, 2024
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
Note
This PR merges into a feature branch. I also strongly recommend following along by commit and turning off whitespace changes (for instances where old CSS is wrapped in a high contrast mode check)
Just 3 of our most complex form components contrast-wise 🫠
EuiRange & EuiDualRange
EuiColorPicker & EuiColorPalettePicker
(color artifacting is from the gif, should not be in production)
EuiDatePicker, EuiDatePickerRange, & EuiSuperDatePicker
QA
See above component headings for staging links
General checklist
and screenreadermodes[ ] Added or updated jest and cypress tests