[New] {DateRangePicker,SingleDatePicker}{,Input,InputController}: a…

…dd title text props Fixes #1861.
react-dates · Nov 13, 2019 · 2b8089b · 2b8089b
1 parent 35766d6
commit 2b8089b
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -142,6 +142,8 @@ startDatePlaceholderText: PropTypes.string,
 endDatePlaceholderText: PropTypes.string,
 startDateAriaLabel: PropTypes.string,
 endDateAriaLabel: PropTypes.string,
+startDateTitleText: PropTypes.string,
+endDateTitleText: PropTypes.string,
 disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([START_DATE, END_DATE])]),
 required: PropTypes.bool,
 readOnly: PropTypes.bool,
@@ -228,6 +230,7 @@ The following is a list of other *OPTIONAL* props you may provide to the `Single
 // input related props
 placeholder: PropTypes.string,
 ariaLabel: PropTypes.string,
+titleText: PropTypes.string,
 disabled: PropTypes.bool,
 required: PropTypes.bool,
 readOnly: PropTypes.bool,

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
@@ -29,6 +29,7 @@ const propTypes = forbidExtraProps({
   placeholder: PropTypes.string,
   displayValue: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -57,6 +58,7 @@ const defaultProps = {
   placeholder: 'Select Date',
   displayValue: '',
   ariaLabel: undefined,
+  titleText: undefined,
   screenReaderMessage: '',
   focused: false,
   disabled: false,
@@ -175,6 +177,7 @@ class DateInput extends React.PureComponent {
       id,
       placeholder,
       ariaLabel,
+      titleText,
       displayValue,
       screenReaderMessage,
       focused,
@@ -221,6 +224,7 @@ class DateInput extends React.PureComponent {
             disabled && styles.DateInput_input__disabled,
           )}
           aria-label={ariaLabel === undefined ? placeholder : ariaLabel}
+          title={titleText}
           type="text"
           id={id}
           name={id}

diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
@@ -54,6 +54,8 @@ const defaultProps = {
   endDatePlaceholderText: 'End Date',
   startDateAriaLabel: undefined,
   endDateAriaLabel: undefined,
+  startDateTitleText: undefined,
+  endDateTitleText: undefined,
   startDateOffset: undefined,
   endDateOffset: undefined,
   disabled: false,
@@ -572,10 +574,12 @@ class DateRangePicker extends React.PureComponent {
       startDateId,
       startDatePlaceholderText,
       startDateAriaLabel,
+      startDateTitleText,
       endDate,
       endDateId,
       endDatePlaceholderText,
       endDateAriaLabel,
+      endDateTitleText,
       focusedInput,
       screenReaderInputMessage,
       showClearDates,
@@ -621,11 +625,13 @@ class DateRangePicker extends React.PureComponent {
         startDatePlaceholderText={startDatePlaceholderText}
         isStartDateFocused={focusedInput === START_DATE}
         startDateAriaLabel={startDateAriaLabel}
+        startDateTitleText={startDateTitleText}
         endDate={endDate}
         endDateId={endDateId}
         endDatePlaceholderText={endDatePlaceholderText}
         isEndDateFocused={focusedInput === END_DATE}
         endDateAriaLabel={endDateAriaLabel}
+        endDateTitleText={endDateTitleText}
         displayFormat={displayFormat}
         showClearDates={showClearDates}
         showCaret={!withPortal && !withFullScreenPortal && !hideFang}

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
@@ -33,11 +33,13 @@ const propTypes = forbidExtraProps({
   startDateId: PropTypes.string,
   startDatePlaceholderText: PropTypes.string,
   startDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
 
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
   endDateAriaLabel: PropTypes.string,
+  endDateTitleText: PropTypes.string,
 
   onStartDateFocus: PropTypes.func,
   onEndDateFocus: PropTypes.func,
@@ -88,6 +90,8 @@ const defaultProps = {
   endDatePlaceholderText: 'End Date',
   startDateAriaLabel: undefined,
   endDateAriaLabel: undefined,
+  startDateTitleText: undefined,
+  endDateTitleText: undefined,
   screenReaderMessage: '',
   onStartDateFocus() {},
   onEndDateFocus() {},
@@ -141,6 +145,7 @@ function DateRangePickerInput({
   onStartDateFocus,
   onStartDateShiftTab,
   startDateAriaLabel,
+  startDateTitleText,
   endDate,
   endDateId,
   endDatePlaceholderText,
@@ -149,6 +154,7 @@ function DateRangePickerInput({
   onEndDateFocus,
   onEndDateTab,
   endDateAriaLabel,
+  endDateTitleText,
   onKeyDownArrowDown,
   onKeyDownQuestionMark,
   onClearDates,
@@ -227,6 +233,7 @@ function DateRangePickerInput({
         id={startDateId}
         placeholder={startDatePlaceholderText}
         ariaLabel={startDateAriaLabel}
+        titleText={startDateTitleText}
         displayValue={startDate}
         screenReaderMessage={screenReaderStartDateText}
         focused={isStartDateFocused}
@@ -262,6 +269,7 @@ function DateRangePickerInput({
         id={endDateId}
         placeholder={endDatePlaceholderText}
         ariaLabel={endDateAriaLabel}
+        titleText={endDateTitleText}
         displayValue={endDate}
         screenReaderMessage={screenReaderEndDateText}
         focused={isEndDateFocused}

diff --git a/src/components/DateRangePickerInputController.jsx b/src/components/DateRangePickerInputController.jsx
@@ -35,12 +35,14 @@ const propTypes = forbidExtraProps({
   startDatePlaceholderText: PropTypes.string,
   isStartDateFocused: PropTypes.bool,
   startDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
 
   endDate: momentPropTypes.momentObj,
   endDateId: PropTypes.string,
   endDatePlaceholderText: PropTypes.string,
   isEndDateFocused: PropTypes.bool,
   endDateAriaLabel: PropTypes.string,
+  endDateTitleText: PropTypes.string,
 
   screenReaderMessage: PropTypes.string,
   showClearDates: PropTypes.bool,
@@ -92,12 +94,14 @@ const defaultProps = {
   startDatePlaceholderText: 'Start Date',
   isStartDateFocused: false,
   startDateAriaLabel: undefined,
+  startDateTitleText: undefined,
 
   endDate: null,
   endDateId: END_DATE,
   endDatePlaceholderText: 'End Date',
   isEndDateFocused: false,
   endDateAriaLabel: undefined,
+  endDateTitleText: undefined,
 
   screenReaderMessage: '',
   showClearDates: false,
@@ -279,10 +283,12 @@ export default class DateRangePickerInputController extends React.PureComponent
       startDatePlaceholderText,
       isStartDateFocused,
       startDateAriaLabel,
+      startDateTitleText,
       endDate,
       endDateId,
       endDatePlaceholderText,
       endDateAriaLabel,
+      endDateTitleText,
       isEndDateFocused,
       screenReaderMessage,
       showClearDates,
@@ -318,11 +324,13 @@ export default class DateRangePickerInputController extends React.PureComponent
         startDatePlaceholderText={startDatePlaceholderText}
         isStartDateFocused={isStartDateFocused}
         startDateAriaLabel={startDateAriaLabel}
+        startDateTitleText={startDateTitleText}
         endDate={endDateString}
         endDateId={endDateId}
         endDatePlaceholderText={endDatePlaceholderText}
         isEndDateFocused={isEndDateFocused}
         endDateAriaLabel={endDateAriaLabel}
+        endDateTitleText={endDateTitleText}
         isFocused={isFocused}
         disabled={disabled}
         required={required}

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -52,6 +52,7 @@ const defaultProps = {
   id: 'date',
   placeholder: 'Date',
   ariaLabel: undefined,
+  titleText: undefined,
   disabled: false,
   required: false,
   readOnly: false,
@@ -548,6 +549,7 @@ class SingleDatePicker extends React.PureComponent {
       id,
       placeholder,
       ariaLabel,
+      titleText,
       disabled,
       focused,
       required,
@@ -589,6 +591,7 @@ class SingleDatePicker extends React.PureComponent {
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        titleText={titleText}
         focused={focused}
         isFocused={isInputFocused}
         disabled={disabled}

diff --git a/src/components/SingleDatePickerInput.jsx b/src/components/SingleDatePickerInput.jsx
@@ -22,6 +22,7 @@ const propTypes = forbidExtraProps({
   children: PropTypes.node,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   displayValue: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   focused: PropTypes.bool,
@@ -59,6 +60,7 @@ const defaultProps = {
   children: null,
   placeholder: 'Select Date',
   ariaLabel: undefined,
+  titleText: undefined,
   displayValue: '',
   screenReaderMessage: '',
   focused: false,
@@ -97,6 +99,7 @@ function SingleDatePickerInput({
   children,
   placeholder,
   ariaLabel,
+  titleText,
   displayValue,
   focused,
   isFocused,
@@ -169,6 +172,7 @@ function SingleDatePickerInput({
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        titleText={titleText}
         displayValue={displayValue}
         screenReaderMessage={screenReaderText}
         focused={focused}

diff --git a/src/components/SingleDatePickerInputController.jsx b/src/components/SingleDatePickerInputController.jsx
@@ -36,6 +36,7 @@ const propTypes = forbidExtraProps({
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   screenReaderMessage: PropTypes.string,
   showClearDate: PropTypes.bool,
   showCaret: PropTypes.bool,
@@ -81,6 +82,7 @@ const defaultProps = {
 
   placeholder: '',
   ariaLabel: undefined,
+  titleText: undefined,
   screenReaderMessage: 'Date',
   showClearDate: false,
   showCaret: false,
@@ -202,6 +204,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
       id,
       placeholder,
       ariaLabel,
+      titleText,
       disabled,
       focused,
       isFocused,
@@ -234,6 +237,7 @@ export default class SingleDatePickerInputController extends React.PureComponent
         id={id}
         placeholder={placeholder}
         ariaLabel={ariaLabel}
+        titleText={titleText}
         focused={focused}
         isFocused={isFocused}
         disabled={disabled}

diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
@@ -35,6 +35,8 @@ export default {
   endDatePlaceholderText: PropTypes.string,
   startDateAriaLabel: PropTypes.string,
   endDateAriaLabel: PropTypes.string,
+  startDateTitleText: PropTypes.string,
+  endDateTitleText: PropTypes.string,
   disabled: DisabledShape,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,

diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
@@ -25,6 +25,7 @@ export default {
   id: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   ariaLabel: PropTypes.string,
+  titleText: PropTypes.string,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   readOnly: PropTypes.bool,

diff --git a/stories/DateRangePicker_input.js b/stories/DateRangePicker_input.js
@@ -149,6 +149,14 @@ storiesOf('DRP - Input Props', module)
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
   )))
+  .add('with custom Start & End Date title attributes', withInfo()(() => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      startDateTitleText="Here you can set the title attribute of the Start input, which shows in the tooltip on :hover over the field"
+      endDateTitleText="Here you can set the title attribute of the End input, which shows in the tooltip on :hover over the field"
+    />
+  )))
   .add('noBorder', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}

diff --git a/stories/SingleDatePicker_input.js b/stories/SingleDatePicker_input.js
@@ -80,6 +80,12 @@ storiesOf('SDP - Input Props', module)
       screenReaderInputMessage="Here you could inform screen reader users of the date format, minimum nights, blocked out dates, etc"
     />
   )))
+  .add('with custom title attribute', withInfo()(() => (
+    <SingleDatePickerWrapper
+      initialDate={moment().add(3, 'days')}
+      titleText="Here you can set the title attribute of the input, which shows in the tooltip on :hover over the field"
+    />
+  )))
   .add('noBorder', withInfo()(() => (
     <SingleDatePickerWrapper
       initialDate={moment().add(3, 'days')}

diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx
@@ -27,6 +27,17 @@ describe('DateInput', () => {
         expect(wrapper.find('input').props()['aria-label']).to.equal(placeholder);
       });
 
+      it('has props.titleText as a title attribute if titleText is passed in', () => {
+        const titleText = 'titleTextExample';
+        const wrapper = shallow(<DateInput id="date" titleText={titleText} />).dive();
+        expect(wrapper.find('input').props().title).to.equal(titleText);
+      });
+
+      it('has no title attribute if props.titleText is null', () => {
+        const wrapper = shallow(<DateInput id="date" titleText={null} />).dive();
+        expect(wrapper.find('input').props().title).to.equal(null);
+      });
+
       it('has value === props.displayValue', () => {
         const DISPLAY_VALUE = 'foobar';
         const wrapper = shallow(<DateInput id="date" displayValue={DISPLAY_VALUE} />).dive();