Add CSS class to day name #441
Conversation
Current coverage is
|
| @@ -159,7 +159,7 @@ var Calendar = React.createClass({ | |||
| {this.renderCurrentMonth()} | |||
| {this.renderYearDropdown()} | |||
| {this.renderNextMonthButton()} | |||
| <div> | |||
| <div className="react-datepicker__day-name"> | |||
There was a problem hiding this comment.
I was envisioning this fix as changing the CSS class of the day headers, as in https://github.com/Hacker0x01/react-datepicker/blob/v0.25.0/src/calendar.jsx#L92
I think changing that class from react-datepicker_-day to react-datepicker__day-name makes much more sense
There was a problem hiding this comment.
We can't change it since it will lose react-datepicker__day styles, we have two alternatives:
Add react-datepicker__day-name class or add it to its container.
There was a problem hiding this comment.
Right, I think it should be refactored to make it work with the __day-name class instead of __day. The things they will have in common are defined by variables that can be reused.
There was a problem hiding this comment.
There are several ways:
- Change the class to
__day-nameand in the SCSS extend__day. - Add the class
__day-namewithout change the SCSS.
Since this project is using BEM, I would vote for the second option, is another day, the modifier is that is the name day.
Let me know what works best for you :)
There was a problem hiding this comment.
Technically -day isn't a modifier, and I don't think it should be because the day names and dates don't have much in common other than width and height. Go with #2
| @@ -91,7 +91,7 @@ var Calendar = React.createClass({ | |||
| return [0, 1, 2, 3, 4, 5, 6].map(offset => { | |||
| const day = startOfWeek.clone().add(offset, 'days') | |||
| return ( | |||
| <div key={offset} className="react-datepicker__day"> | |||
| <div key={offset} className="react-datepicker__day react-datepicker__day-name"> | |||
There was a problem hiding this comment.
Please remove the __day class entirely
|
See #443 |
Implements #440
Added a CSS class for days name.