[POC] Refactor PickersDay and DateRangePickerDay components
#15921
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
|
Deploy preview: https://deploy-preview-15921--material-ui-x.netlify.app/ Updated pages: |
flaviendelangle
added
the
component: pickers
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.
closes #14753
This is an exploration
I'm exploring the option of creating only one day component used by both simple and range pickers & writing the styles in a way that they are truly separated from each other. i.e. The
selectedstate should not care whetherisStartOfPreviewingis true or not. It just applies the styles related to selection.I reduced the DOM structure to a single element (ButtonBase) and the previewing and highlighting (now renamed to
selectedRange) is handled with pseudo elements.The advantage of this is that we reduce the complexity of customizing this component a lot and we can avoid specificity issues. See new demo vs custom theme from the overview page
A downside is that the width and positioning of the pseudo elements is calculated based on the width and margins of the root => so any customizations of the dimensions or spacing of the root element need to be reflected in the calculation of the dimensions and positionings of the pseudo elements. We can try abstracting some of that and introducing css variables, but I think documenting this should be enough. Plus, it might even make it easier to achieve custom designs where the highlighting and previewing don't connect. (Like the picture)
