Repository: uber-web/baseui
Pull request #925 (2019-02-21 17:27:12)

feat(datepicker): make the datepicker a stable component

nadiia: > should we also rename the following to be consistent?
> 
> * `isHighlighted` -> `highlighted`
> * `isFocused` -> `focused `

`isFocused` is an internal state's prop name, so I'd probably keep it. Don't have a strong opinion on it, can rename if that looks better.
Will rename the `isHighlighted` prop.
gergelyke: Yeah, I don't have a strong opinion either - it just feels strange to have a single prop starting with `is`, while all the rest are not

Patch:
diff --git a/documentation-site/pages/components/datepicker.mdx b/documentation-site/pages/components/datepicker.mdx
index 0e19298c0..98cc5f519 100644
--- a/documentation-site/pages/components/datepicker.mdx
+++ b/documentation-site/pages/components/datepicker.mdx
@@ -15,14 +15,14 @@ import DatepickerQuickSelect from 'examples/datepicker/quick-select.js';
 import DatepickerWithOverrides from 'examples/datepicker/with-overrides.js';
 
 import Overrides from '../../components/overrides';
-import {Unstable_StatefulCalendar} from 'baseui/datepicker';
+import {StatefulCalendar} from 'baseui/datepicker';
 import * as DatepickerExports from 'baseui/datepicker';
 
 export default Layout;
 
 # Datepicker
 
-A simple and reusable component to work with or select a date or a range of dates. Please note that component is currently under development and marked as Unstable that means it may change without a notice.
+A simple and reusable component to work with or select a date or a range of dates.
 
 ### Accessibility
 
@@ -65,10 +65,10 @@ A simple and reusable component to work with or select a date or a range of date
   name="Datepicker"
   component={DatepickerExports}
   renderExample={props => (
-    <Unstable_StatefulCalendar
+    <StatefulCalendar
       initialState={{value: new Date()}}
-      isRange
-      enableQuickSelect
+      range
+      quickSelect
       overrides={props.overrides}
     />
   )}
diff --git a/documentation-site/routes.js b/documentation-site/routes.js
index 6cd1bdf49..ed6d9239c 100644
--- a/documentation-site/routes.js
+++ b/documentation-site/routes.js
@@ -170,7 +170,7 @@ const routes = [
             path: '/components/select',
           },
           {
-            text: 'Unstable Datepicker',
+            text: 'Datepicker',
             path: '/components/datepicker',
           },
         ],
diff --git a/documentation-site/static/examples/datepicker/basic.js b/documentation-site/static/examples/datepicker/basic.js
index efa86eaaa..7df16e24b 100644
--- a/documentation-site/static/examples/datepicker/basic.js
+++ b/documentation-site/static/examples/datepicker/basic.js
@@ -1,4 +1,4 @@
 import React from 'react';
-import {Unstable_StatefulCalendar} from 'baseui/datepicker';
+import {StatefulCalendar} from 'baseui/datepicker';
 
-export default () => <Unstable_StatefulCalendar />;
+export default () => <StatefulCalendar />;
diff --git a/documentation-site/static/examples/datepicker/in-popover.js b/documentation-site/static/examples/datepicker/in-popover.js
index d5c4a7327..c4add4604 100644
--- a/documentation-site/static/examples/datepicker/in-popover.js
+++ b/documentation-site/static/examples/datepicker/in-popover.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Unstable_StatefulDatepicker as StatefulDatepicker} from 'baseui/datepicker';
+import {StatefulDatepicker} from 'baseui/datepicker';
 import {Block} from 'baseui/block';
 import {addDays} from 'date-fns';
 
@@ -8,7 +8,7 @@ export default () => (
     <StatefulDatepicker />
     <Block as="br" />
     <StatefulDatepicker
-      isRange
+      range
       initialState={{value: [new Date(), addDays(new Date(), 4)]}}
       placeholder="YYYY/MM/YY - YYYY/MM/YY"
     />
diff --git a/documentation-site/static/examples/datepicker/quick-select.js b/documentation-site/static/examples/datepicker/quick-select.js
index 3c73ee110..ac2a7d7a9 100644
--- a/documentation-site/static/examples/datepicker/quick-select.js
+++ b/documentation-site/static/examples/datepicker/quick-select.js
@@ -1,4 +1,4 @@
 import React from 'react';
-import {Unstable_StatefulCalendar} from 'baseui/datepicker';
+import {StatefulCalendar} from 'baseui/datepicker';
 
-export default () => <Unstable_StatefulCalendar isRange enableQuickSelect />;
+export default () => <StatefulCalendar range quickSelect />;
diff --git a/documentation-site/static/examples/datepicker/with-overrides.js b/documentation-site/static/examples/datepicker/with-overrides.js
index bb603d94b..f7f42f7ba 100644
--- a/documentation-site/static/examples/datepicker/with-overrides.js
+++ b/documentation-site/static/examples/datepicker/with-overrides.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Unstable_StatefulCalendar} from 'baseui/datepicker';
+import {StatefulCalendar} from 'baseui/datepicker';
 
 const selectOverrides = {
   ControlContainer: {
@@ -25,7 +25,7 @@ const arrowBtnOverrides = ({$theme}) => ({
 });
 
 export default () => (
-  <Unstable_StatefulCalendar
+  <StatefulCalendar
     initialState={{value: new Date()}}
     overrides={{
       CalendarHeader: {
diff --git a/package.json b/package.json
index 2c6dc03af..2917167de 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "markdownlint-cli": "^0.13.0",
     "next": "^8.0.1",
     "next-images": "^1.0.3",
-    "now": "^13.1.2",
+    "now": "^14.0.0",
     "prettier": "^1.14.3",
     "pretty-proptypes": "^0.6.0",
     "pretty-quick": "^1.4.1",
diff --git a/src/datepicker/calendar.js b/src/datepicker/calendar.js
index 522b8c8e5..f743c1e04 100644
--- a/src/datepicker/calendar.js
+++ b/src/datepicker/calendar.js
@@ -46,12 +46,12 @@ export default class Calendar extends React.Component<
   CalendarInternalState,
 > {
   static defaultProps = {
-    calFocusedInitially: false,
+    autoFocusCalendar: false,
     excludeDates: null,
     filterDate: null,
     highlightedDate: null,
     includeDates: null,
-    isRange: false,
+    range: false,
     locale: null,
     maxDate: null,
     minDate: null,
@@ -78,13 +78,13 @@ export default class Calendar extends React.Component<
         this.props.highlightedDate ||
         this.getSingleDate(this.props.value) ||
         new Date(),
-      isFocused: false,
+      focused: false,
       date: this.getDateInView(),
     };
   }
 
   componentDidMount() {
-    if (this.props.calFocusedInitially) {
+    if (this.props.autoFocusCalendar) {
       this.focusCalendar();
     }
   }
@@ -99,15 +99,15 @@ export default class Calendar extends React.Component<
       });
     }
     if (
-      this.props.calFocusedInitially &&
-      this.props.calFocusedInitially !== prevProps.calFocusedInitially
+      this.props.autoFocusCalendar &&
+      this.props.autoFocusCalendar !== prevProps.autoFocusCalendar
     ) {
       this.focusCalendar();
     }
   }
 
   getSingleDate(value: ?Date | Array<Date>): ?Date {
-    // need to check this.props.isRange but flow would complain
+    // need to check this.props.range but flow would complain
     // at the return value in the else clause
     if (Array.isArray(value)) {
       return value[0] || null;
@@ -243,8 +243,8 @@ export default class Calendar extends React.Component<
   };
 
   focusCalendar = () => {
-    if (!this.state.isFocused) {
-      this.setState({isFocused: true});
+    if (!this.state.focused) {
+      this.setState({focused: true});
     }
   };
 
@@ -252,7 +252,7 @@ export default class Calendar extends React.Component<
     if (__BROWSER__) {
       const activeElm = document.activeElement;
       if (this.calendar && !this.calendar.contains(activeElm)) {
-        this.setState({isFocused: false});
+        this.setState({focused: false});
       }
     }
   };
@@ -335,8 +335,8 @@ export default class Calendar extends React.Component<
             filterDate={this.props.filterDate}
             highlightedDate={this.state.highlightedDate}
             includeDates={this.props.includeDates}
-            isFocused={this.state.isFocused}
-            isRange={this.props.isRange}
+            focusedCalendar={this.state.focused}
+            range={this.props.range}
             locale={this.props.locale}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
@@ -372,7 +372,7 @@ export default class Calendar extends React.Component<
       StyledQuickSelectButtons,
     );
 
-    if (!this.props.isRange || !this.props.enableQuickSelect) {
+    if (!this.props.range || !this.props.quickSelect) {
       return null;
     }
 
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index 6a6dee497..d2d971623 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -50,7 +50,7 @@ export default class Datepicker extends React.Component<
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
-    if (Array.isArray(date) && this.props.isRange && date.length < 2) {
+    if (Array.isArray(date) && this.props.range && date.length < 2) {
       isOpen = true;
       isPseudoFocused = true;
       calendarFocused = null;
@@ -147,7 +147,7 @@ export default class Datepicker extends React.Component<
           onEsc={this.handleEsc}
           content={
             <Calendar
-              calFocusedInitially={this.state.calendarFocused}
+              autoFocusCalendar={this.state.calendarFocused}
               trapTabbing={true}
               value={this.props.value}
               {...this.props}
diff --git a/src/datepicker/day.js b/src/datepicker/day.js
index f287affb3..f5aa2ef96 100644
--- a/src/datepicker/day.js
+++ b/src/datepicker/day.js
@@ -23,8 +23,8 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   static defaultProps = {
     disabled: false,
     date: new Date(),
-    isHighlighted: false,
-    isRange: false,
+    highlighted: false,
+    range: false,
     month: new Date().getMonth(),
     onClick: () => {},
     onSelect: () => {},
@@ -42,9 +42,9 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   };
 
   componentDidMount() {
-    if (this.dayElm && this.props.isFocused) {
+    if (this.dayElm && this.props.focusedCalendar) {
       if (
-        this.props.isHighlighted ||
+        this.props.highlighted ||
         (!this.props.highlightedDate && this.isSelected())
       ) {
         this.dayElm.focus();
@@ -53,9 +53,9 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   }
 
   componentDidUpdate(prevProps: DayPropsT) {
-    if (this.dayElm && this.props.isFocused) {
+    if (this.dayElm && this.props.focusedCalendar) {
       if (
-        this.props.isHighlighted ||
+        this.props.highlighted ||
         (!this.props.highlightedDate && this.isSelected())
       ) {
         this.dayElm.focus();
@@ -64,9 +64,9 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   }
 
   onSelect(selectedDate: Date) {
-    const {isRange, value} = this.props;
+    const {range, value} = this.props;
     let date;
-    if (Array.isArray(value) && isRange) {
+    if (Array.isArray(value) && range) {
       if (!value.length || value.length > 1) {
         date = [selectedDate];
       } else if (isAfter(selectedDate, value[0])) {
@@ -81,8 +81,8 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   }
 
   onKeyDown = (event: KeyboardEvent) => {
-    const {isHighlighted, date, disabled} = this.props;
-    if (event.key === 'Enter' && isHighlighted && !disabled) {
+    const {highlighted, date, disabled} = this.props;
+    if (event.key === 'Enter' && highlighted && !disabled) {
       event.preventDefault();
       this.onSelect(date);
     }
@@ -150,12 +150,12 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
   }
 
   getSharedProps() {
-    const {date, value, highlightedDate, isRange, isHighlighted} = this.props;
-    const $isHighlighted = isHighlighted;
+    const {date, value, highlightedDate, range, highlighted} = this.props;
+    const $isHighlighted = highlighted;
     const $selected = this.isSelected();
     const $hasRangeHighlighted =
       Array.isArray(value) &&
-      isRange &&
+      range &&
       value.length === 1 &&
       highlightedDate &&
       !isSameDay(value[0], highlightedDate)
@@ -166,13 +166,13 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
       $disabled: this.props.disabled,
       $endDate:
         (Array.isArray(value) &&
-          this.props.isRange &&
+          this.props.range &&
           $selected &&
           isSameDay(date, value[1])) ||
         false,
       $isHovered: this.state.isHovered,
       $isHighlighted,
-      $isRange: this.props.isRange,
+      $range: this.props.range,
       $hasRangeHighlighted,
       $hasRangeOnRight:
         Array.isArray(value) &&
@@ -183,14 +183,14 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
       $highlightedDate: highlightedDate,
       $peekNextMonth: this.props.peekNextMonth,
       $pseudoHighlighted:
-        this.props.isRange && !$isHighlighted && !$selected
+        this.props.range && !$isHighlighted && !$selected
           ? this.isPseudoHighlighted()
           : false,
       $pseudoSelected:
-        this.props.isRange && !$selected ? this.isPseudoSelected() : false,
+        this.props.range && !$selected ? this.isPseudoSelected() : false,
       $selected,
       $startDate:
-        Array.isArray(this.props.value) && this.props.isRange && $selected
+        Array.isArray(this.props.value) && this.props.range && $selected
           ? isSameDay(date, this.props.value[0])
           : false,
       $outsideMonth: this.isOutsideMonth(),
@@ -199,14 +199,14 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
 
   getAriaLabel(sharedProps: {
     $disabled: boolean,
-    $isRange: boolean,
+    $range: boolean,
     $selected: boolean,
     $startDate: boolean,
   }) {
     const {date, locale} = this.props;
     return `${
       sharedProps.$selected
-        ? sharedProps.$isRange
+        ? sharedProps.$range
           ? sharedProps.$startDate
             ? 'Selected start date.'
             : 'Selected end date.'
@@ -234,7 +234,7 @@ export default class Day extends React.Component<DayPropsT, DayStateT> {
         }}
         role="button"
         tabIndex={
-          this.props.isHighlighted ||
+          this.props.highlighted ||
           (!this.props.highlightedDate && this.isSelected())
             ? '0'
             : '-1'
diff --git a/src/datepicker/index.js b/src/datepicker/index.js
index bd540cb95..8a7112885 100644
--- a/src/datepicker/index.js
+++ b/src/datepicker/index.js
@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 export {default as StatefulContainer} from './stateful-container.js';
-export {default as Unstable_Calendar} from './calendar.js';
-export {default as Unstable_StatefulCalendar} from './stateful-calendar.js';
-export {default as Unstable_Datepicker} from './datepicker.js';
-export {default as Unstable_StatefulDatepicker} from './stateful-datepicker.js';
+export {default as Calendar} from './calendar.js';
+export {default as StatefulCalendar} from './stateful-calendar.js';
+export {default as Datepicker} from './datepicker.js';
+export {default as StatefulDatepicker} from './stateful-datepicker.js';
 // Util functions
 export {formatDate} from './utils/index.js';
 // Constants
diff --git a/src/datepicker/month.js b/src/datepicker/month.js
index d51143b08..af89ab180 100644
--- a/src/datepicker/month.js
+++ b/src/datepicker/month.js
@@ -63,8 +63,8 @@ export default class CalendarMonth extends React.Component<MonthPropsT> {
           filterDate={this.props.filterDate}
           highlightedDate={this.props.highlightedDate}
           includeDates={this.props.includeDates}
-          isFocused={this.props.isFocused}
-          isRange={this.props.isRange}
+          focusedCalendar={this.props.focusedCalendar}
+          range={this.props.range}
           key={i}
           locale={this.props.locale}
           minDate={this.props.minDate}
@@ -93,7 +93,7 @@ export default class CalendarMonth extends React.Component<MonthPropsT> {
     const {overrides = {}} = this.props;
     const [Month, monthProps] = getOverrides(overrides.Month, StyledMonth);
     return (
-      <Month aria-multiselectable={this.props.isRange || null} {...monthProps}>
+      <Month aria-multiselectable={this.props.range || null} {...monthProps}>
         {this.renderWeeks()}
       </Month>
     );
diff --git a/src/datepicker/styled-components.js b/src/datepicker/styled-components.js
index 14df06a46..bc34989bb 100644
--- a/src/datepicker/styled-components.js
+++ b/src/datepicker/styled-components.js
@@ -160,7 +160,7 @@ export function calculateBorderRadius(
     $pseudoSelected,
     $selected,
     $startDate,
-    $isRange,
+    $range,
     $hasRangeHighlighted,
     $hasRangeOnRight,
     $hasRangeSelected,
@@ -168,7 +168,7 @@ export function calculateBorderRadius(
   } = props;
   if (borders.useRoundedCorners) {
     if ($selected) {
-      if (!$isRange) {
+      if (!$range) {
         return getBorderRadius(borders.radius200, borders.radius200);
       } else {
         if ($hasRangeSelected) {
@@ -190,7 +190,7 @@ export function calculateBorderRadius(
         return getBorderRadius(0, 0);
       } else {
         if ($isHighlighted) {
-          if (!$isRange) {
+          if (!$range) {
             return getBorderRadius(borders.radius200, borders.radius200);
           } else if ($hasRangeHighlighted) {
             return $hasRangeOnRight
diff --git a/src/datepicker/types.js b/src/datepicker/types.js
index 0bf476da0..506c436c8 100644
--- a/src/datepicker/types.js
+++ b/src/datepicker/types.js
@@ -46,9 +46,9 @@ export type DayPropsT = {
   filterDate: ?(day: Date) => boolean,
   highlightedDate: ?Date,
   includeDates: ?Array<Date>,
-  isHighlighted: boolean,
-  isRange: boolean,
-  isFocused: boolean,
+  highlighted: boolean,
+  range: boolean,
+  focusedCalendar: boolean,
   locale: ?LocaleT,
   maxDate: ?Date,
   minDate: ?Date,
@@ -75,8 +75,8 @@ export type WeekPropsT = {
   // highlighted while keyboard navigating or hovered
   highlightedDate: ?Date,
   includeDates: ?Array<Date>,
-  isFocused: boolean,
-  isRange: boolean,
+  focusedCalendar: boolean,
+  range: boolean,
   locale: ?LocaleT,
   maxDate: ?Date,
   minDate: ?Date,
@@ -96,17 +96,17 @@ export type MonthPropsT = WeekPropsT;
 
 export type CalendarInternalState = {
   highlightedDate: Date,
-  isFocused: boolean,
+  focused: boolean,
   date: Date,
 };
 
 export type CalendarPropsT = {
   /** Defines if the calendar is set to be focused on an initial render. */
-  calFocusedInitially: boolean,
+  autoFocusCalendar: boolean,
   /** A list of dates to disable. */
   excludeDates: ?Array<Date>,
-  /** Display a set of buttons for quickly choosing date ranges. isRange must be true as well. */
-  enableQuickSelect?: boolean,
+  /** Display a set of buttons for quickly choosing date ranges. `range` must be true as well. */
+  quickSelect?: boolean,
   /** A filter function that is called to check the disabled state of a day. If `false` is returned the day is considered to be disabled. */
   filterDate: ?(day: Date) => boolean,
   /** Indicates a highlighted date on hover and keyboard navigation */
@@ -114,7 +114,7 @@ export type CalendarPropsT = {
   /** A list of selectable dates. */
   includeDates: ?Array<Date>,
   /** Defines if a range of dates can be selected. */
-  isRange: boolean,
+  range: boolean,
   /** A locale object. See `date-fns` for more details https://github.com/date-fns/date-fns/tree/master/src/locale. */
   locale: ?LocaleT,
   /** A max date that is selectable. */
@@ -172,7 +172,7 @@ export type SharedStylePropsT = {
   $pseudoSelected: boolean,
   $selected: boolean,
   $startDate: boolean,
-  $isRange: boolean,
+  $range: boolean,
   $hasRangeHighlighted: boolean,
   $hasRangeOnRight: boolean,
   $hasRangeSelected: boolean,
@@ -182,7 +182,7 @@ export type SharedStylePropsT = {
 export type StateChangeTypeT = ?$Values<typeof STATE_CHANGE_TYPE>;
 
 export type ContainerStateT = {
-  /** Selected `Date`. If `isRange` is set, `value` is an array of 2 values. */
+  /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
   value?: ?Date | Array<Date>,
 };
 
@@ -222,7 +222,7 @@ export type StatefulContainerPropsT<T> = {
 
 export type NavigationContainerPropsT = {
   children: CalendarPropsT => React.Node,
-  isRange?: boolean,
+  range?: boolean,
   highlightedDate?: ?Date,
   /** Day's `mouseover` event handler. */
   onDayMouseOver: (params: {date: Date, event: Event}) => mixed,
@@ -234,7 +234,7 @@ export type NavigationContainerPropsT = {
   onMonthChange?: ({date: Date}) => mixed,
   /** Event handler that is called when the current rendered year is changed. */
   onYearChange?: ({date: Date}) => mixed,
-  /** Selected `Date`. If `isRange` is set, `value` is an array of 2 values. */
+  /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */
   value?: ?Date | Array<Date>,
   stateReducer: NavigationContainerStateReducerT,
   trapTabbing: boolean,
diff --git a/src/datepicker/week.js b/src/datepicker/week.js
index b2ef72100..381c66deb 100644
--- a/src/datepicker/week.js
+++ b/src/datepicker/week.js
@@ -45,10 +45,10 @@ export default class Week extends React.Component<WeekPropsT> {
             excludeDates={this.props.excludeDates}
             filterDate={this.props.filterDate}
             highlightedDate={this.props.highlightedDate}
-            isHighlighted={isSameDay(day, this.props.highlightedDate)}
+            highlighted={isSameDay(day, this.props.highlightedDate)}
             includeDates={this.props.includeDates}
-            isFocused={this.props.isFocused}
-            isRange={this.props.isRange}
+            focusedCalendar={this.props.focusedCalendar}
+            range={this.props.range}
             key={offset}
             locale={this.props.locale}
             minDate={this.props.minDate}
diff --git a/yarn.lock b/yarn.lock
index 4e87857bd..ef56c47a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10280,10 +10280,10 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-now@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.yarnpkg.com/now/-/now-13.1.2.tgz#dda24eb622edeedc43e694d31d9c81f2154896c4"
-  integrity sha512-v6K4141Zcw/EsEC88uQ8DusP5LnbLIYFEblpH9BiQXCx4s4qmk56xxT7AXRCFBMtUFTX0hF8Bd2rqWGs0HzjAQ==
+now@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/now/-/now-14.0.0.tgz#7fb7aff0c7c1465e534d84198c9e19d284f9cd59"
+  integrity sha512-zOdmN6+6dLTiHCDujp683KRWG4BE6OwIGU++aZXmss8C4GXuKuZU/Bp7czhwnzab/2qs8OtlaTW6eibcNNV0xA==
 
 npm-bundled@^1.0.1:
   version "1.0.3"


Test patch:
diff --git a/src/datepicker/__tests__/calendar.scenario.js b/src/datepicker/__tests__/calendar.scenario.js
index f643e40ac..76555cca7 100644
--- a/src/datepicker/__tests__/calendar.scenario.js
+++ b/src/datepicker/__tests__/calendar.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Unstable_Calendar as Calendar} from '../index.js';
+import {Calendar} from '../index.js';
 
 export const name = 'calendar';
 
diff --git a/src/datepicker/__tests__/calendar.test.js b/src/datepicker/__tests__/calendar.test.js
index 129d9d850..1ff0a32fc 100644
--- a/src/datepicker/__tests__/calendar.test.js
+++ b/src/datepicker/__tests__/calendar.test.js
@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import React from 'react';
 import {mount} from 'enzyme';
 import {
-  Unstable_Calendar as Calendar,
+  Calendar,
   StyledRoot,
   StyledQuickSelectContainer,
   StyledMonth,
@@ -28,13 +28,13 @@ describe('Component', () => {
     expect(wrapper.find(StyledDay).first()).toExist();
   });
 
-  test('should not display quick select if isRange is false', () => {
-    const wrapper = mount(<Calendar enableQuickSelect />);
+  test('should not display quick select if range is false', () => {
+    const wrapper = mount(<Calendar quickSelect />);
     expect(wrapper.find(StyledQuickSelectContainer).first()).not.toExist();
   });
 
-  test('should display quick select if isRange and enableQuickSelect is true', () => {
-    const wrapper = mount(<Calendar isRange enableQuickSelect />);
+  test('should display quick select if range and quickSelect is true', () => {
+    const wrapper = mount(<Calendar range quickSelect />);
     expect(wrapper.find(StyledQuickSelectContainer).first()).toExist();
   });
 });
diff --git a/src/datepicker/__tests__/datepicker-range.scenario.js b/src/datepicker/__tests__/datepicker-range.scenario.js
index 0fff33d37..fe8994604 100644
--- a/src/datepicker/__tests__/datepicker-range.scenario.js
+++ b/src/datepicker/__tests__/datepicker-range.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Unstable_StatefulDatepicker as StatefulDatepicker} from '../index.js';
+import {StatefulDatepicker} from '../index.js';
 
 export const name = 'datepicker-range';
 
@@ -16,7 +16,7 @@ export const component = () => (
   <StatefulDatepicker
     aria-label="Select a date"
     initialState={{value: []}}
-    isRange
+    range
     highlightedDate={new Date('March 10, 2019')}
   />
 );
diff --git a/src/datepicker/__tests__/datepicker.scenario.js b/src/datepicker/__tests__/datepicker.scenario.js
index f0f45f423..99599ec49 100644
--- a/src/datepicker/__tests__/datepicker.scenario.js
+++ b/src/datepicker/__tests__/datepicker.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Unstable_StatefulDatepicker as StatefulDatepicker} from '../index.js';
+import {StatefulDatepicker} from '../index.js';
 
 export const name = 'datepicker';
 
diff --git a/src/datepicker/__tests__/datepicker.test.js b/src/datepicker/__tests__/datepicker.test.js
index e011d4e7b..c138c5a8e 100644
--- a/src/datepicker/__tests__/datepicker.test.js
+++ b/src/datepicker/__tests__/datepicker.test.js
@@ -7,10 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import React from 'react';
 import {mount} from 'enzyme';
-import {
-  Unstable_Datepicker as Datepicker,
-  Unstable_Calendar as Calendar,
-} from '../index.js';
+import {Datepicker, Calendar} from '../index.js';
 import {Input} from '../../input/index.js';
 import {Popover} from '../../popover/index.js';
 import {addDays} from 'date-fns';
@@ -121,7 +118,7 @@ describe('Datepicker', () => {
     const data = {date: [new Date('2019 01 01')]};
     const component = mount(
       // $FlowFixMe
-      <Datepicker onChange={onChange} isRange value={[]} />,
+      <Datepicker onChange={onChange} range value={[]} />,
     );
 
     component.instance().onChange(data);
@@ -135,7 +132,7 @@ describe('Datepicker', () => {
     const data = {date: [date, addDays(date, 3)]};
     const component = mount(
       // $FlowFixMe
-      <Datepicker onChange={onChange} isRange value={[]} />,
+      <Datepicker onChange={onChange} range value={[]} />,
     );
 
     component.instance().onChange(data);
diff --git a/src/datepicker/__tests__/stateful-calendar-overrides.scenario.js b/src/datepicker/__tests__/stateful-calendar-overrides.scenario.js
index fcc55d361..99668e5cd 100644
--- a/src/datepicker/__tests__/stateful-calendar-overrides.scenario.js
+++ b/src/datepicker/__tests__/stateful-calendar-overrides.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_StatefulCalendar as StatefulCalendar} from '../index.js';
+import {StatefulCalendar} from '../index.js';
 
 export const name = 'Stateful calendar overrides';
 
diff --git a/src/datepicker/__tests__/stateful-calendar.scenario.js b/src/datepicker/__tests__/stateful-calendar.scenario.js
index 1b086acff..822c7f999 100644
--- a/src/datepicker/__tests__/stateful-calendar.scenario.js
+++ b/src/datepicker/__tests__/stateful-calendar.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_StatefulCalendar as StatefulCalendar} from '../index.js';
+import {StatefulCalendar} from '../index.js';
 
 export const name = 'Stateful calendar';
 
diff --git a/src/datepicker/__tests__/stateful-calendar.test.js b/src/datepicker/__tests__/stateful-calendar.test.js
index feaa5be93..498e51d52 100644
--- a/src/datepicker/__tests__/stateful-calendar.test.js
+++ b/src/datepicker/__tests__/stateful-calendar.test.js
@@ -7,10 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import React from 'react';
 import {mount} from 'enzyme';
-import {
-  Unstable_StatefulCalendar as StatefulCalendar,
-  Unstable_Calendar as Calendar,
-} from '../index.js';
+import {StatefulCalendar, Calendar} from '../index.js';
 
 describe('StatefulCalendar', () => {
   test('basic render', () => {
diff --git a/src/datepicker/__tests__/stateful-datepicker-quick-select.scenario.js b/src/datepicker/__tests__/stateful-datepicker-quick-select.scenario.js
index 9d8af5c78..0a3c96c15 100644
--- a/src/datepicker/__tests__/stateful-datepicker-quick-select.scenario.js
+++ b/src/datepicker/__tests__/stateful-datepicker-quick-select.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_StatefulDatepicker as StatefulDatepicker} from '../index.js';
+import {StatefulDatepicker} from '../index.js';
 import {addDays} from '../utils/index.js';
 
 export const name = 'Stateful datepicker quick select';
@@ -17,10 +17,10 @@ const now = new Date('2019-02-14T10:00:00Z');
 
 export const component = () => (
   <StatefulDatepicker
-    isRange
+    range
     initialState={{
       value: [now, addDays(now, 3)],
     }}
-    enableQuickSelect
+    quickSelect
   />
 );
diff --git a/src/datepicker/__tests__/stateful-datepicker.scenario.js b/src/datepicker/__tests__/stateful-datepicker.scenario.js
index 36ab7a699..2983c2423 100644
--- a/src/datepicker/__tests__/stateful-datepicker.scenario.js
+++ b/src/datepicker/__tests__/stateful-datepicker.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_StatefulDatepicker as StatefulDatepicker} from '../index.js';
+import {StatefulDatepicker} from '../index.js';
 
 export const name = 'Stateful datepicker';
 
diff --git a/src/datepicker/__tests__/stateful-datepicker.test.js b/src/datepicker/__tests__/stateful-datepicker.test.js
index 7be1ef817..f317f39ce 100644
--- a/src/datepicker/__tests__/stateful-datepicker.test.js
+++ b/src/datepicker/__tests__/stateful-datepicker.test.js
@@ -7,10 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import React from 'react';
 import {mount} from 'enzyme';
-import {
-  Unstable_Datepicker as Datepicker,
-  Unstable_StatefulDatepicker,
-} from '../index.js';
+import {Datepicker, StatefulDatepicker} from '../index.js';
 
 describe('StatefulDatepicker', () => {
   test('basic render', () => {
@@ -21,7 +18,7 @@ describe('StatefulDatepicker', () => {
       onChange: jest.fn(),
     };
 
-    const component = mount(<Unstable_StatefulDatepicker {...props} />);
+    const component = mount(<StatefulDatepicker {...props} />);
     const renderedDatepicker = component.find(Datepicker);
     expect(renderedDatepicker).toExist();
   });
diff --git a/src/datepicker/__tests__/stateful-range-datepicker.scenario.js b/src/datepicker/__tests__/stateful-range-datepicker.scenario.js
index 0a1e6d15f..f9a09dbd8 100644
--- a/src/datepicker/__tests__/stateful-range-datepicker.scenario.js
+++ b/src/datepicker/__tests__/stateful-range-datepicker.scenario.js
@@ -8,10 +8,10 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_StatefulDatepicker as StatefulDatepicker} from '../index.js';
+import {StatefulDatepicker} from '../index.js';
 
 export const name = 'Stateful range datepicker';
 
 export const component = () => (
-  <StatefulDatepicker isRange initialState={{value: []}} />
+  <StatefulDatepicker range initialState={{value: []}} />
 );
diff --git a/src/datepicker/__tests__/stateful-range-quick-select.scenario.js b/src/datepicker/__tests__/stateful-range-quick-select.scenario.js
index f03f875e6..992e3d18f 100644
--- a/src/datepicker/__tests__/stateful-range-quick-select.scenario.js
+++ b/src/datepicker/__tests__/stateful-range-quick-select.scenario.js
@@ -8,14 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_StatefulCalendar as StatefulCalendar} from '../index.js';
+import {StatefulCalendar} from '../index.js';
 
 export const name = 'Stateful range quick select';
 
 export const component = () => (
   <StatefulCalendar
-    isRange
-    enableQuickSelect
+    range
+    quickSelect
     highlightedDate={new Date('2019-02-14T10:00:00Z')}
   />
 );
diff --git a/src/datepicker/__tests__/stateless-calendar.scenario.js b/src/datepicker/__tests__/stateless-calendar.scenario.js
index 5cc59fe20..cef1147b0 100644
--- a/src/datepicker/__tests__/stateless-calendar.scenario.js
+++ b/src/datepicker/__tests__/stateless-calendar.scenario.js
@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {Unstable_Calendar as Calendar} from '../index.js';
+import {Calendar} from '../index.js';
 
 export const name = 'Stateless calendar';
 
diff --git a/src/datepicker/__tests__/styled-components.test.js b/src/datepicker/__tests__/styled-components.test.js
index 3428cf188..5fb0487ef 100644
--- a/src/datepicker/__tests__/styled-components.test.js
+++ b/src/datepicker/__tests__/styled-components.test.js
@@ -67,7 +67,7 @@ describe('Border radius calculation', () => {
       $pseudoSelected: false,
       $selected: false,
       $startDate: false,
-      $isRange: true,
+      $range: true,
       $hasRangeHighlighted: false,
       $hasRangeOnRight: false,
       $hasRangeSelected: false,
@@ -96,7 +96,7 @@ describe('Border radius calculation', () => {
       : null;
   }
 
-  test('isRange and useRoundedCorners', () => {
+  test('range and useRoundedCorners', () => {
     expect(toStrVal(calcRadius(getProps()))).toEqual('4px 4px 4px 4px');
   });
   test('!useRoundedCorners', () => {
@@ -119,10 +119,10 @@ describe('Border radius calculation', () => {
       '4px 4px 4px 4px',
     );
   });
-  test('$selected and !isRange', () => {
-    // $selected/!$isRange
+  test('$selected and !range', () => {
+    // $selected/!$range
     expect(
-      toStrVal(calcRadius(getProps({$selected: true, $isRange: false}))),
+      toStrVal(calcRadius(getProps({$selected: true, $range: false}))),
     ).toEqual('4px 4px 4px 4px');
   });
   test('$selected, $hasRangeSelected, and $startDate', () => {
@@ -189,9 +189,9 @@ describe('Border radius calculation', () => {
       '0 0 0 0',
     );
   });
-  test('$isHighlighted and !$isRange', () => {
+  test('$isHighlighted and !$range', () => {
     expect(
-      toStrVal(calcRadius(getProps({$isHighlighted: true, $isRange: false}))),
+      toStrVal(calcRadius(getProps({$isHighlighted: true, $range: false}))),
     ).toEqual('4px 4px 4px 4px');
   });
   test('$isHighlighted and $hasRangeHighlighted', () => {