Add modifiers classes to cell elements

[gpbl]

Discussed in #1855

^{Originally posted by BhoomikaSorathiya July 27, 2023}

Bug description

In react-day-picker v7, there was DayPicker-Day--outside class for outside non-date div. But, for react-day-picker v8, there is no class provided to differentiate between date vs outside date .

Basically, I want to provide border to only which has date text. I am trying to do it with :has() css selector, but it doesn't support Firefox browser. So looking for alternative like classname with --outside. Can anyone please help?

To reproduce

Go to here for v8 & here for v7 and inspect element to see class names.

Expected behavior

There should be som class like rdp-cell--outside for outside table cell to differentiate with date cell.

Screenshots

react-day-picker v7 DayPicker-Day--outside class:

react-day-picker v8 rdp-cell class for outside table cell without any difference from date table cell:

[tarngerine]

was just looking for this! would really like this, the new nested .rdp-cell > .rdp-day DOM structure makes it difficult to do any sibling selectors where you want to select the previous sibling

use case, trying to get a faded highlighted range like in airbnb

  .rdp-cell:not(:has(.rdp-day_outside)) + .rdp-cell:has(.rdp-day_highlighted.rdp-day_outside) {
    ::before {
      background: transparent;
      background-image: linear-gradient(to right, ${color("bgBorder")}, transparent);
    }
  }
  .rdp-cell:has(.rdp-day_highlighted.rdp-day_outside):has(+ .rdp-cell:has(.rdp-day_outside)) {
    ::before {
      background: transparent;
      background-image: linear-gradient(to left, ${color("bgBorder")}, transparent);
    }
  }

the 2nd rule does not work, even in chrome, because you cannot nest :has selectors