fix: fix unexpected CSS overwriting on button element

[hsnaydd]

Fixes: #2377

What's Changed

Fixed unexpected CSS overwriting on the button element

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation update

[gpbl]

@hsnaydd thanks for your PR. Loving that we are removing extra CSS.

I've been thinking about this and I believe the right way is to rename the selector as .rdp-button-reset and apply this class name to the Button elements used in DayPicker.tsx.

I know this could be more difficult to implement - if you prefer I can go forward by committing in your PR.

[gpbl]

Suggested change

	.rdp-root :where(.rdp-day_button, .rdp-button_previous, .rdp-button_next) {
	.rdp-button-reset

[hsnaydd]

Yes, I thought so too, but then we need to define two classes for the Button component, right? But every component gets its classes from UI enum. How do you plan on adding this class? Do you mean like this?

<components.Button
  type="button"
  className={[classNames[UI.ButtonPrevious], 'button-reset'].join(' ')}
  tabIndex={previousMonth ? undefined : -1}
  disabled={previousMonth ? undefined : true}
  aria-label={labelPrevious(previousMonth, labelOptions)}
  onClick={handlePreviousClick}
>

[gpbl]

@hsnaydd yes, it should come with a relative entry in the UI enum:

className={[classNames[UI.ButtonPrevious], classNames[ButtonReset]].join(' ').trim()}

not so quick as it seems (there are some files to change), but if you feel - give a try!

[hsnaydd]

I don't think this is the right solution. if I want to change the ButtonPrevious class via classNames props ButtonReset will still be applied. If I want to set padding to the ButtonPrevious with my new class I still need to increase the specificity because ButtonReset may overwrite.
Yes, I can set the button_reset to undefined to prevent this but it is not predictable.

[gpbl]

I see what you mean, and I agree that could cause further confusion. Also I like a CSS only solution. We shouldn't use the :where pseudo selector, however, as I'm not sure anymore what will happen for Tailwind users there 🤷🏽

Please could we write everything twice and reset each of the existing buttons?

.rdp-day_button {
  /* existing ..rdp-day_button */
  /* (please remove overrides, if any, below)  */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.rdp-button_next,
.rdp-button_previous  {
  /* existing .rdp-button_next, .rdp-button_previous */
  /* (please remove overrides, if any, below)  */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

[hsnaydd]

I did, but, I don't understand why you want to avoid the :where pseudo selector. What will change for Tailwind users? If you care about the specificity, it is at the same level as what we are writing now. Also if you don't scope with .rdp-root the specificity value will be zero.

[gpbl]

I did, but, I don't understand why you want to avoid the :where pseudo selector. What will change for Tailwind users?

It's just about keeping it simple. I've seen complex selectors may cause confusions to some users (see recent support requests about tailwind).

[gpbl]

@hsnaydd Thanks so much for your work - sorry for the delay.