Add borderless option to the DayPicker variations

README.md

@@ -262,6 +262,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `DayPic
   renderCalendarInfo: PropTypes.func,
   onOutsideClick: PropTypes.func,
   keepOpenOnDateSelect: PropTypes.bool,
+  noBorder: PropTypes.bool,
 
   // navigation related props
   navPrev: PropTypes.node,

src/components/DayPicker.jsx

@@ -56,6 +56,7 @@ const propTypes = forbidExtraProps({
   daySize: nonNegativeInteger,
   isRTL: PropTypes.bool,
   verticalHeight: nonNegativeInteger,
+  noBorder: PropTypes.bool,
 
   // navigation props
   navPrev: PropTypes.node,
@@ -102,6 +103,7 @@ export const defaultProps = {
   daySize: DAY_SIZE,
   isRTL: false,
   verticalHeight: null,
+  noBorder: false,
 
   // navigation props
   navPrev: null,
@@ -688,6 +690,7 @@ class DayPicker extends React.Component {
       phrases,
       verticalHeight,
       dayAriaLabelFormat,
+      noBorder,
     } = this.props;
 
     const numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths;
@@ -748,6 +751,7 @@ class DayPicker extends React.Component {
           this.isVertical() && withPortal && styles.DayPicker_portal__vertical,
           dayPickerStyle,
           !hasSetHeight && styles.DayPicker__hidden,
+          !noBorder && styles.DayPicker__withBorder,
         )}
       >
         <OutsideClickHandler onOutsideClick={onOutsideClick}>
@@ -780,7 +784,6 @@ class DayPicker extends React.Component {
                 this.isVertical() && styles.DayPicker_transitionContainer__vertical,
                 verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable,
                 transitionContainerStyle,
-
               )}
               ref={this.setTransitionContainerRef}
             >
@@ -844,8 +847,6 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
 
   DayPicker__horizontal: {
     background: color.background,
-    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07)',
-    borderRadius: 3,
   },
 
   DayPicker__verticalScrollable: {
@@ -856,6 +857,11 @@ export default withStyles(({ reactDates: { color, zIndex } }) => ({
     visibility: 'hidden',
   },
 
+  DayPicker__withBorder: {
+    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07)',
+    borderRadius: 3,
+  },
+
   DayPicker_portal__horizontal: {
     boxShadow: 'none',
     position: 'absolute',

src/components/DayPickerRangeController.jsx

@@ -59,6 +59,7 @@ const propTypes = forbidExtraProps({
   initialVisibleMonth: PropTypes.func,
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
+  noBorder: PropTypes.bool,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -121,6 +122,7 @@ const defaultProps = {
   renderCalendarInfo: null,
   firstDayOfWeek: null,
   verticalHeight: null,
+  noBorder: false,
 
   // accessibility
   onBlur() {},
@@ -904,6 +906,7 @@ export default class DayPickerRangeController extends React.Component {
       weekDayFormat,
       dayAriaLabelFormat,
       verticalHeight,
+      noBorder,
     } = this.props;
 
     const { currentMonth, phrases, visibleDays } = this.state;
@@ -943,6 +946,7 @@ export default class DayPickerRangeController extends React.Component {
         weekDayFormat={weekDayFormat}
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
+        noBorder={noBorder}
       />
     );
   }

src/components/DayPickerSingleDateController.jsx

@@ -54,6 +54,7 @@ const propTypes = forbidExtraProps({
   hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
   verticalHeight: nonNegativeInteger,
+  noBorder: PropTypes.bool,
 
   navPrev: PropTypes.node,
   navNext: PropTypes.node,
@@ -102,6 +103,7 @@ const defaultProps = {
   firstDayOfWeek: null,
   daySize: DAY_SIZE,
   verticalHeight: null,
+  noBorder: false,
 
   navPrev: null,
   navNext: null,
@@ -590,6 +592,7 @@ export default class DayPickerSingleDateController extends React.Component {
       showKeyboardShortcuts,
       weekDayFormat,
       verticalHeight,
+      noBorder,
     } = this.props;
 
     const { currentMonth, visibleDays } = this.state;
@@ -626,6 +629,7 @@ export default class DayPickerSingleDateController extends React.Component {
         weekDayFormat={weekDayFormat}
         dayAriaLabelFormat={dayAriaLabelFormat}
         verticalHeight={verticalHeight}
+        noBorder={noBorder}
       />
     );
 

stories/DayPicker.js

@@ -119,6 +119,9 @@ storiesOf('DayPicker', module)
   ))
   .addWithInfo('with custom week day format', () => (
     <DayPicker
-      weekDayFormat='ddd'
+      weekDayFormat="ddd"
     />
+  ))
+  .addWithInfo('noBorder', () => (
+    <DayPicker noBorder />
   ));