Merge pull request #979 from airbnb/maja-fix-selected-specificity-on-ccd

Fix specificity issues with selected styles on the CustomizableCalendarDay
react-dates · Jan 26, 2018 · d966001 · d966001
2 parents fea1be8 + 0571caa
commit d966001
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/components/CustomizableCalendarDay.jsx b/src/components/CustomizableCalendarDay.jsx
@@ -63,9 +63,9 @@ const propTypes = forbidExtraProps({
   hoveredSpanStyles: DayStyleShape,
   selectedSpanStyles: DayStyleShape,
   lastInRangeStyles: DayStyleShape,
+  selectedStyles: DayStyleShape,
   selectedStartStyles: DayStyleShape,
   selectedEndStyles: DayStyleShape,
-  selectedStyles: DayStyleShape,
   afterHoveredStartStyles: DayStyleShape,
 
   // internationalization
@@ -169,8 +169,6 @@ const defaultProps = {
   lastInRangeStyles: {
     borderRight: color.core.primary,
   },
-  selectedStartStyles: {},
-  selectedEndStyles: {},
   selectedStyles: {
     background: color.selected.backgroundColor,
     border: `1px solid ${color.selected.borderColor}`,
@@ -182,6 +180,8 @@ const defaultProps = {
       color: color.selected.color_active,
     },
   },
+  selectedStartStyles: {},
+  selectedEndStyles: {},
   afterHoveredStartStyles: {},
 
   // internationalization
@@ -266,9 +266,9 @@ class CustomizableCalendarDay extends React.Component {
       hoveredSpanStyles: hoveredSpanStylesWithHover,
       selectedSpanStyles: selectedSpanStylesWithHover,
       lastInRangeStyles: lastInRangeStylesWithHover,
+      selectedStyles: selectedStylesWithHover,
       selectedStartStyles: selectedStartStylesWithHover,
       selectedEndStyles: selectedEndStylesWithHover,
-      selectedStyles: selectedStylesWithHover,
       afterHoveredStartStyles: afterHoveredStartStylesWithHover,
     } = this.props;
 
@@ -316,9 +316,9 @@ class CustomizableCalendarDay extends React.Component {
           modifiers.has('after-hovered-start') && afterHoveredStartStyles,
           modifiers.has('selected-span') && selectedSpanStyles,
           modifiers.has('last-in-range') && lastInRangeStyles,
+          selected && selectedStyles,
           modifiers.has('selected-start') && selectedStartStyles,
           modifiers.has('selected-end') && selectedEndStyles,
-          selected && selectedStyles,
           isOutsideRange && blockedOutOfRangeStyles,
         )}
         role="button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role

diff --git a/stories/DateRangePicker_day.js b/stories/DateRangePicker_day.js
@@ -38,11 +38,26 @@ const hoveredStyles = {
   color: '#fff',
 };
 
+const blockedStyles = {
+  background: '#fff',
+  border: '1px double #e4e7e7',
+  color: '#dce0e0',
+
+  hover: {
+    background: '#fff',
+    border: '1px double #e4e7e7',
+    color: '#dce0e0',
+  },
+};
+
 const customDayStyles = {
   selectedStartStyles: selectedStyles,
   selectedEndStyles: selectedStyles,
   hoveredSpanStyles: hoveredStyles,
   afterHoveredStartStyles: hoveredStyles,
+  blockedMinNightsStyles: blockedStyles,
+  blockedCalendarStyles: blockedStyles,
+  blockedOutOfRangeStyles: blockedStyles,
 
   selectedSpanStyles: {
     background: '#9b32a2',
@@ -116,6 +131,7 @@ storiesOf('DRP - Day Props', module)
   ))
   .addWithInfo('one-off custom styling', () => (
     <DateRangePickerWrapper
+      minimumNights={3}
       renderCalendarDay={props => <CustomizableCalendarDay {...props} {...customDayStyles} />}
       autoFocus
     />