feat: today actions for datepicker #964
Conversation
|
Deploy preview for fundamental-react ready! Built with commit f02fb69 |
# 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
prsdthkr
changed the title
|
should there be a boolean to |
|
@prsdthkr are you waiting for a review on this or it is it progress? |
src/Calendar/Calendar.js
Outdated
| 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; |
There was a problem hiding this comment.
this.props should never be undefined and is this necessary or can we just use this.props.compact below?
src/DatePicker/DatePicker.js
Outdated
| if (!disableStyles && this._showTodayFooter()) { | ||
| //below styles are needed for footer styling | ||
| require('fundamental-styles/dist/dialog.css'); | ||
| require('fundamental-styles/dist/bar.css'); |
There was a problem hiding this comment.
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.
| dateKnobToDate('disable between dates (2)', disabledDateSecondDefault)]} | ||
| locale={text('locale', 'en')} | ||
| openToDate={dateKnobToDate('open to date', new Date())} | ||
| showToday={boolean('showToday', false)} |
There was a problem hiding this comment.
could add compact to as a knob to the dev story as well
| const { enableRangeSelection, todayAction: { label: todayLabel, type: todayType } } = this.props; | ||
| return todayType === 'select' | ||
| && !enableRangeSelection | ||
| && isEnabledDate(moment(), this.props) |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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?
src/Calendar/Calendar.js
Outdated
| className, | ||
| { | ||
| 'fd-calendar--compact': compact | ||
| } |
There was a problem hiding this comment.
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
);
| 'fd-bar--cosy': !compact, | ||
| 'fd-bar--compact': compact | ||
| } | ||
| ); |
There was a problem hiding this comment.
should we add a prop so a consumer can add their own className to this? footerClassName?
src/DatePicker/DatePicker.js
Outdated
| this.validateDates(this.props.onBlur); | ||
| }; | ||
|
|
||
| _showTodayHeader = () => { |
There was a problem hiding this comment.
Any reason to prefix methods with _?
Description
This change adds the ability to configure a
todayActionfor 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 datetodayAction.label is a localized string label for the today action button.
The button will only be rendered if:
todayAction.typeis'select'or'navigate'todayAction.labelis a valid non-empty stringOther changes: