Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: today actions for datepicker #964

Merged
merged 40 commits into from
Jul 6, 2020
Merged

feat: today actions for datepicker #964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
c3aed88
today button in date-picker
prsdthkr Apr 14, 2020
318a120
unit tests for today button
prsdthkr Apr 14, 2020
08cf092
storybook entries for today button
prsdthkr Apr 14, 2020
c5876e0
documentation for today button
prsdthkr Apr 14, 2020
30a32fa
visual snapshot for today button story
prsdthkr Apr 14, 2020
331e3f5
disableWeekday usage example
prsdthkr Apr 14, 2020
bb277f2
typo
prsdthkr Apr 14, 2020
57738e3
show today button if today is an enabled date
prsdthkr Apr 14, 2020
92b4390
moment date comparison granularity
prsdthkr Apr 14, 2020
8120db6
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Apr 14, 2020
91b7ce2
prevent onDatePickerClose from spreading to div
prsdthkr Apr 14, 2020
30d446f
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jun 15, 2020
e4b25bb
feat: calendar compact mode
prsdthkr Jun 15, 2020
c3ca158
refactor today button to footer
prsdthkr Jun 15, 2020
2ec7fc3
update tests
prsdthkr Jun 15, 2020
3d7eec9
update Calendar tests
prsdthkr Jun 15, 2020
9ec79a5
lazy load footer styles
prsdthkr Jun 15, 2020
dc7d850
feat: configurable todayAction
prsdthkr Jun 18, 2020
0436bbe
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jun 19, 2020
a4a0998
feat: today navigation
prsdthkr Jun 19, 2020
ee85683
fix: test
prsdthkr Jun 20, 2020
c78a07f
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jun 20, 2020
da2a7e8
feat: add opened datepicker stories
prsdthkr Jun 22, 2020
80762fc
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jun 22, 2020
163b193
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jul 1, 2020
925c9c8
update Calendar dev. story, add showToday knob
prsdthkr Jul 1, 2020
f03a578
DatePicker removed disableStyles
prsdthkr Jul 1, 2020
191ccc6
DatePicker semantic footer is div
prsdthkr Jul 1, 2020
7a37b57
Calendar default 'compact' prop to false
prsdthkr Jul 1, 2020
4e6723a
Calendar semantic header is div
prsdthkr Jul 1, 2020
b1dff30
add dateFormat and defaultValue knobs to dev story
prsdthkr Jul 1, 2020
ae5802c
fix test
prsdthkr Jul 1, 2020
79aef5e
update Calendar tests
prsdthkr Jul 1, 2020
100b06d
update snapshots
prsdthkr Jul 1, 2020
1ff7003
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jul 1, 2020
43ca602
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jul 6, 2020
15a9694
add 'compact' knob to Calendar dev story
prsdthkr Jul 6, 2020
a69d5f5
PR feedback
prsdthkr Jul 6, 2020
bb69da7
Merge branch 'master' into feat/date-picker-today-button
prsdthkr Jul 6, 2020
f02fb69
add localizedTodayFooterButton story docs
prsdthkr Jul 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions src/Calendar/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,19 +456,19 @@ class Calendar extends Component {
const showToday = this.props.showToday && !this.state.showMonths && !this.state.showYears;

return (
<header className='fd-calendar__header'>
<div className='fd-calendar__header'>
<div aria-live='assertive' className='fd-calendar__navigation'>
<div className='fd-calendar__action'>
<Button
aria-label={previousButtonLabel}
compact
compact={this.props.compact}
glyph='slim-arrow-left'
onClick={this.handlePrevious}
option='transparent' />
</div>
<div className='fd-calendar__action'>
<Button
compact
compact={this.props.compact}
onClick={this.showMonths}
option='transparent'>
<span>
Expand All @@ -478,7 +478,7 @@ class Calendar extends Component {
</div>
<div className='fd-calendar__action'>
<Button
compact
compact={this.props.compact}
onClick={this.showYears}
option='transparent'>
<span>
Expand All @@ -490,23 +490,23 @@ class Calendar extends Component {
<div className='fd-calendar__action'>
<Button
aria-label={nextButtonLabel}
compact
compact={this.props.compact}
glyph='slim-arrow-right'
onClick={this.handleNext}
option='transparent' />
</div>
{showToday &&
<div className='fd-calendar__action'>
<Button
compact
compact={this.props.compact}
onClick={this.handleToday}
option={'transparent'}>
{this.props.localizedText.todayLabel}
</Button>
</div>
}
</div>
</header>
</div>
);
}

Expand Down Expand Up @@ -652,6 +652,7 @@ class Calendar extends Component {

render() {
const {
compact,
enableRangeSelection,
disableWeekends,
disableBeforeDate,
Expand Down Expand Up @@ -679,6 +680,9 @@ class Calendar extends Component {

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

Expand Down Expand Up @@ -709,6 +713,8 @@ Calendar.propTypes = {
blockedDates: PropTypes.arrayOf(PropTypes.instanceOf(moment)),
/** CSS class(es) to add to the element */
className: PropTypes.string,
/** Set to **true** to enable compact mode */
compact: PropTypes.bool,
customDate: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array
Expand All @@ -723,7 +729,7 @@ Calendar.propTypes = {
disableFutureDates: PropTypes.bool,
/** Set to **true** to disable dates before today\'s date */
disablePastDates: PropTypes.bool,
/** Disables dates that match a weekday */
/** Disables dates that match a weekday. For example, `disableWeekday={[\'Tuesday\', \'Thursday\', \'Friday\']}` */
disableWeekday: PropTypes.arrayOf(PropTypes.string),
/** Set to **true** to disables dates that match a weekend */
disableWeekends: PropTypes.bool,
Expand Down Expand Up @@ -771,6 +777,7 @@ Calendar.propTypes = {
};

Calendar.defaultProps = {
compact: false,
locale: 'en',
localizedText: {
calendarInstructions: 'Use arrow keys to move between dates.',
Expand Down
32 changes: 16 additions & 16 deletions src/Calendar/Calendar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ describe('<Calendar />', () => {
expect(wrapper.state('showMonths')).toBeFalsy();
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(1)
.simulate('click');
Expand All @@ -67,7 +67,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(1)
.simulate('click');
Expand All @@ -87,7 +87,7 @@ describe('<Calendar />', () => {
//open month overlay
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(1)
.simulate('click');
Expand Down Expand Up @@ -116,7 +116,7 @@ describe('<Calendar />', () => {
//open months view
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(1)
.simulate('click');
Expand All @@ -139,7 +139,7 @@ describe('<Calendar />', () => {
expect(wrapper.state('showYears')).toBeFalsy();
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(2)
.simulate('click');
Expand All @@ -148,7 +148,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(2)
.simulate('click');
Expand All @@ -162,7 +162,7 @@ describe('<Calendar />', () => {
expect(wrapper.state('showYears')).toBeFalsy();
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(2)
.simulate('click');
Expand Down Expand Up @@ -210,7 +210,7 @@ describe('<Calendar />', () => {
expect(wrapper.state('showYears')).toBeFalsy();
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(2)
.simulate('click');
Expand All @@ -236,7 +236,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(0)
.simulate('click');
Expand All @@ -247,7 +247,7 @@ describe('<Calendar />', () => {
// previous button when year shown
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(2)
.simulate('click');
Expand All @@ -256,7 +256,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(0)
.simulate('click');
Expand All @@ -273,7 +273,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(3)
.simulate('click');
Expand All @@ -284,7 +284,7 @@ describe('<Calendar />', () => {
// previous button when year shown
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(2)
.simulate('click');
Expand All @@ -293,7 +293,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(3)
.simulate('click');
Expand All @@ -311,7 +311,7 @@ describe('<Calendar />', () => {

wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(3)
.simulate('click');
Expand Down Expand Up @@ -349,7 +349,7 @@ describe('<Calendar />', () => {
// now click Today
wrapper
.find(
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
'.fd-calendar__header button.fd-button--transparent'
)
.at(4)
.simulate('click');
Expand Down
4 changes: 4 additions & 0 deletions src/Calendar/__stories__/Calendar.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ const weekdayOptions = {

export const primary = () => (<Calendar />);

export const compact = () => (<Calendar compact />);

export const disableWeekends = () => (
<Calendar
disableBeforeDate={new Date()}
Expand Down Expand Up @@ -86,6 +88,7 @@ export const dev = () => (
<Calendar
blockedDates={[dateKnobToDate('block between dates (1)', blockedDateFirstDefault),
dateKnobToDate('block between dates (2)', blockedDateSecondDefault)]}
compact={boolean('compact', false)}
disableAfterDate={dateKnobToDate('disable after date', afterDateDefault)}
disableBeforeDate={dateKnobToDate('disable before date', beforeDateDefault)}
disableFutureDates={boolean('disable future dates', false)}
Expand All @@ -96,6 +99,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)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added.

weekdayStart={number('weekdayStart', 0)} />
);

Expand Down
Loading