feat: today actions for datepicker #964

prsdthkr · 2020-04-14T03:28:56Z

Description

This change adds the ability to configure a todayAction for the DatePicker.

For example, todayAction={{type: 'select', label: 'Today'}}

todayAction.type is a string indicating the type of today button.

'none' (default) today button won't be shown
'select' today button as footer action that selects today's date and closes datepicker
'navigate' today button as header action that navigates (i.e. sets focus) to today's date

todayAction.label is a localized string label for the today action button.

The button will only be rendered if:

todayAction.type is 'select' or 'navigate'
AND todayAction.label is a valid non-empty string

Other changes:

Add compact mode for Calendar
Use calendar compact mode for compact Datepicker

netlify · 2020-04-14T03:31:17Z

Deploy preview for fundamental-react ready!

Built with commit f02fb69

https://deploy-preview-964--fundamental-react.netlify.app

# Conflicts: # src/DatePicker/DatePicker.js

# Conflicts: # src/Calendar/Calendar.js # src/DatePicker/DatePicker.Component.js # src/DatePicker/DatePicker.js # src/DatePicker/__stories__/DatePicker.stories.js # storybook-testing/__image_snapshots__/storyshots-test-js-storyshots-components-date-picker-today-button-1-snap.png

bcullman · 2020-06-16T21:57:21Z

should there be a boolean to enableTodaySelect here?

jbadan · 2020-06-30T15:28:47Z

@prsdthkr are you waiting for a review on this or it is it progress?

prsdthkr · 2020-07-01T17:27:06Z

@prsdthkr are you waiting for a review on this or it is it progress?

@jbadan awaiting review.

skvale · 2020-07-01T17:37:09Z

src/Calendar/Calendar.js

@@ -453,6 +453,7 @@ class Calendar extends Component {
            this.props.localizedText.show12PreviousYears : this.props.localizedText.previousMonth;
        const nextButtonLabel = this.state.showYears ?
            this.props.localizedText.show12NextYears : this.props.localizedText.nextMonth;
+        const compact = this.props?.compact || false;


this.props should never be undefined and is this necessary or can we just use this.props.compact below?

skvale · 2020-07-01T17:39:16Z

src/DatePicker/DatePicker.js

+        if (!disableStyles && this._showTodayFooter()) {
+            //below styles are needed for footer styling
+            require('fundamental-styles/dist/dialog.css');
+            require('fundamental-styles/dist/bar.css');


I think this is the old way of including styles, now they're expected to be imported with the rest of the imports without conditionals.

skvale · 2020-07-02T14:49:03Z

src/Calendar/__stories__/Calendar.stories.js

@@ -96,6 +98,7 @@ export const dev = () => (
            dateKnobToDate('disable between dates (2)', disabledDateSecondDefault)]}
        locale={text('locale', 'en')}
        openToDate={dateKnobToDate('open to date', new Date())}
+        showToday={boolean('showToday', false)}


could add compact to as a knob to the dev story as well

skvale · 2020-07-02T14:57:40Z

src/DatePicker/DatePicker.js

+        const { enableRangeSelection, todayAction: { label: todayLabel, type: todayType } } = this.props;
+        return todayType === 'select'
+                && !enableRangeSelection
+                && isEnabledDate(moment(), this.props)


Why do we not show the footer button if

&& !enableRangeSelection && isEnabledDate(moment(), this.props)

but we don't consider these things for the header button?

Because clicking the footer today button selects today's date and closes the popover, I think this would not be a valid interaction if a date range is to be selected or if today's date is disabled. Also, since the header today button only performs navigation we can show it regardless. What do you think?

skvale · 2020-07-02T15:22:17Z

src/Calendar/Calendar.js

+            className,
+            {
+                'fd-calendar--compact': compact
+            }


It's possible className would override a css rule from rd-calendar--compact and it looks like the convention in fundamental-react is to keep the custom className last

const calendarClasses = classnames( 'fd-calendar', { 'fd-calendar--compact': compact }, className );

skvale · 2020-07-02T15:23:36Z

src/DatePicker/DatePicker.js

+                'fd-bar--cosy': !compact,
+                'fd-bar--compact': compact
+            }
+        );


should we add a prop so a consumer can add their own className to this? footerClassName?

skvale · 2020-07-02T15:27:08Z

src/DatePicker/DatePicker.js

@@ -309,6 +311,28 @@ class DatePicker extends Component {
        this.validateDates(this.props.onBlur);
    };

+    _showTodayHeader = () => {


Any reason to prefix methods with _?

prsdthkr added 4 commits April 13, 2020 20:13

today button in date-picker

c3aed88

unit tests for today button

318a120

storybook entries for today button

08cf092

documentation for today button

c5876e0

visual snapshot for today button story

30a32fa

prsdthkr self-assigned this Apr 14, 2020

prsdthkr marked this pull request as ready for review April 14, 2020 03:48

prsdthkr requested review from a team April 14, 2020 03:49

prsdthkr added 9 commits April 14, 2020 11:46

disableWeekday usage example

331e3f5

typo

bb277f2

show today button if today is an enabled date

57738e3

moment date comparison granularity

92b4390

Merge branch 'master' into feat/date-picker-today-button

8120db6

# Conflicts: # src/DatePicker/DatePicker.js

prevent onDatePickerClose from spreading to div

91b7ce2

feat: calendar compact mode

e4b25bb

refactor today button to footer

c3ca158

prsdthkr mentioned this pull request Jun 15, 2020

feat: update fundamental-styles to 0.11.0-rc.34 #1094

Merged

prsdthkr added 3 commits June 15, 2020 14:02

update tests

2ec7fc3

update Calendar tests

3d7eec9

lazy load footer styles

9ec79a5

prsdthkr requested review from jbadan and meganaconley June 15, 2020 21:56

prsdthkr changed the title ~~feat: today button for date picker~~ feat: today selection footer button for datepicker Jun 15, 2020

prsdthkr added DatePicker enhancement New feature or request labels Jun 15, 2020

prsdthkr requested a review from bcullman June 16, 2020 21:40

prsdthkr removed the WIP Work in Progress label Jun 22, 2020

skvale reviewed Jul 1, 2020

View reviewed changes

prsdthkr added 11 commits July 1, 2020 11:34

Merge branch 'master' into feat/date-picker-today-button

163b193

update Calendar dev. story, add showToday knob

925c9c8

DatePicker removed disableStyles

f03a578

DatePicker semantic footer is div

191ccc6

Calendar default 'compact' prop to false

7a37b57

Calendar semantic header is div

4e6723a

add dateFormat and defaultValue knobs to dev story

b1dff30

fix test

ae5802c

update Calendar tests

79aef5e

update snapshots

100b06d

Merge branch 'master' into feat/date-picker-today-button

1ff7003

prsdthkr requested a review from skvale July 1, 2020 22:45

skvale reviewed Jul 2, 2020

View reviewed changes

prsdthkr added 5 commits July 5, 2020 22:15

Merge branch 'master' into feat/date-picker-today-button

43ca602

add 'compact' knob to Calendar dev story

15a9694

PR feedback

a69d5f5

Merge branch 'master' into feat/date-picker-today-button

bb69da7

add localizedTodayFooterButton story docs

f02fb69

skvale approved these changes Jul 6, 2020

View reviewed changes

prsdthkr merged commit 9646fab into master Jul 6, 2020

prsdthkr deleted the feat/date-picker-today-button branch July 7, 2020 00:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: today actions for datepicker #964

feat: today actions for datepicker #964

prsdthkr commented Apr 14, 2020 •

edited

Loading

netlify bot commented Apr 14, 2020 •

edited

Loading

bcullman commented Jun 16, 2020

jbadan commented Jun 30, 2020

prsdthkr commented Jul 1, 2020 •

edited

Loading

skvale Jul 1, 2020

skvale Jul 1, 2020

skvale Jul 2, 2020

prsdthkr Jul 6, 2020

skvale Jul 2, 2020

prsdthkr Jul 6, 2020

skvale Jul 2, 2020

prsdthkr Jul 6, 2020

skvale Jul 2, 2020

skvale Jul 2, 2020 •

edited

Loading

prsdthkr Jul 6, 2020

feat: today actions for datepicker #964

feat: today actions for datepicker #964

Conversation

prsdthkr commented Apr 14, 2020 • edited Loading

Description

netlify bot commented Apr 14, 2020 • edited Loading

bcullman commented Jun 16, 2020

jbadan commented Jun 30, 2020

prsdthkr commented Jul 1, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skvale Jul 2, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

prsdthkr commented Apr 14, 2020 •

edited

Loading

netlify bot commented Apr 14, 2020 •

edited

Loading

prsdthkr commented Jul 1, 2020 •

edited

Loading

skvale Jul 2, 2020 •

edited

Loading