DateRangePickerDay: selected class on wrapping divs

[tpeek]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Right now, the classes are the same for a highlighted day at the beginning (or end) of a week, a month, or a selected range. It would be great if we had the ability to style a day highlight differently if it was at the beginning (or end) of a selected range.

Examples 🌈

Here's a visual:

The beginning and end of weeks and months are squared, while the beginning and end of the preview/highlighted range are rounded.

Motivation 🔦

I'm able to get most of the way with some creative and complicated css, but being able to target the divs at the beginning and end of a range would allow me to simplify the css greatly and match the design completely.

[oliviertassinari]

@tpeek This is already possible with the rangeIntervalDayHighlightStart and rangeIntervalDayHighlightEnd classes keys. However, it seems that there is a couple of changes we can perform to make the customization experience much more enjoyable. Please confirm or infirm any of my observations:

1. The name of the style rule is long. We can shrink it from .MuiPickersDateRangeDay-rangeIntervalDayHighlightStart to .MuiPickersDateRangeDay-highlightStart.

diff --git a/lib/src/DateRangePicker/DateRangePickerDay.tsx b/lib/src/DateRangePicker/DateRangePickerDay.tsx
index f4bdabf6..ae6e4607 100644
--- a/lib/src/DateRangePicker/DateRangePickerDay.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerDay.tsx
@@ -43,7 +43,7 @@ const useStyles = makeStyles(
       '&:first-child': startBorderStyle,
       '&:last-child': endBorderStyle,
     },
-    rangeIntervalDayHighlightStart: {
+    highlightStart: {
       ...startBorderStyle,
       paddingLeft: 0,
       marginLeft: DAY_MARGIN / 2,
@@ -124,7 +124,7 @@ export const PureDateRangeDay = ({
       className={clsx(classes.root, {
         [classes.rangeIntervalDayHighlight]: shouldRenderHighlight,
         [classes.rangeIntervalDayHighlightEnd]: isEndOfHighlighting || isEndOfMonth,
-        [classes.rangeIntervalDayHighlightStart]: isStartOfHighlighting || isStartOfMonth,
+        [classes.highlightStart]: isStartOfHighlighting || isStartOfMonth,
       })}
     >
       <div

2. We can add the description on each of the style rules:

diff --git a/lib/src/DateRangePicker/DateRangePickerDay.tsx b/lib/src/DateRangePicker/DateRangePickerDay.tsx
index 48094361..37d58e44 100644
--- a/lib/src/DateRangePicker/DateRangePickerDay.tsx
+++ b/lib/src/DateRangePicker/DateRangePickerDay.tsx
@@ -43,6 +43,7 @@ const useStyles = makeStyles(
       '&:first-child': startBorderStyle,
       '&:last-child': endBorderStyle,
     },
+    /* Styles applied to the root element when the highlight starts on this day. */
     highlightStart: {
       ...startBorderStyle,
       paddingLeft: 0,

3. The name of the file is wrong. It doesn't match the name of the component:
   DateRangePickerDay.tsx -> DateRangeDay.tsx. Diverging from the naming convention makes it harder to navigate the source. (used by people to figure out what's going on as a last resort)
4. Considering the existing public PickersDay component, I would suggest a shorter name for this component: PickersRangeDay instead of DateRangePickerDay.
5. We could make this component public, allowing easier overrides using it. For instance, leveraging this RFC: [RFC] What's the best API to override deep/nested elements? material-ui#21453.

import { PickersRangeDay, DateRangePicker } from '@material-ui/pickers';

function MyPickersRangeDay(props) {
  return <PickersRangeDay {...props} />
}

<DateRangePicker slotComponents={{ PickersRangeDay: MyPickersRangeDay }} />

6. We could document the CSS API as in https://material-ui.com/api/autocomplete/#css. This requires updating the folder structure to match the convention of the main repository and moving the source to the main repo afterward.
7. We could explore how to flatten the DOM:

• Do we need a span inside the button? -1
• Do we need a DOM node for the highlight? Why not leverage the button? -1
• Do we need a DOM node for the preview effect? Why not leverage the button? -1

I'm 💯 for exploring these 7 changes further, the ease of customization is important.

[tpeek]

@oliviertassinari

This is already possible with the rangeIntervalDayHighlightStart and rangeIntervalDayHighlightEnd classes keys.

The rangeIntervalDayHighlightStart and rangeIntervalDayHighlightEnd classes aren't just applied to the beginning and end of a selected range- they are also applied to the end and beginning of months and weeks within a selected range:

[classes.rangeIntervalDayHighlightEnd]: isEndOfHighlighting || isEndOfMonth, DateRangePickerDay L126

[oliviertassinari]

@tpeek Ok, so we would need an item 8: differentiate these two states.