Skip to content

Commit 9646fab

Browse files
prsdthkrprsdthkr
authored
feat: today actions for datepicker (#964)
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
1 parent ccc5be3 commit 9646fab

File tree

11 files changed

+657
-99
lines changed

11 files changed

+657
-99
lines changed

‎src/Calendar/Calendar.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -456,19 +456,19 @@ class Calendar extends Component {
456456
const showToday = this.props.showToday && !this.state.showMonths && !this.state.showYears;
457457

458458
return (
459-
<header className='fd-calendar__header'>
459+
<div className='fd-calendar__header'>
460460
<div aria-live='assertive' className='fd-calendar__navigation'>
461461
<div className='fd-calendar__action'>
462462
<Button
463463
aria-label={previousButtonLabel}
464-
compact
464+
compact={this.props.compact}
465465
glyph='slim-arrow-left'
466466
onClick={this.handlePrevious}
467467
option='transparent' />
468468
</div>
469469
<div className='fd-calendar__action'>
470470
<Button
471-
compact
471+
compact={this.props.compact}
472472
onClick={this.showMonths}
473473
option='transparent'>
474474
<span>
@@ -478,7 +478,7 @@ class Calendar extends Component {
478478
</div>
479479
<div className='fd-calendar__action'>
480480
<Button
481-
compact
481+
compact={this.props.compact}
482482
onClick={this.showYears}
483483
option='transparent'>
484484
<span>
@@ -490,23 +490,23 @@ class Calendar extends Component {
490490
<div className='fd-calendar__action'>
491491
<Button
492492
aria-label={nextButtonLabel}
493-
compact
493+
compact={this.props.compact}
494494
glyph='slim-arrow-right'
495495
onClick={this.handleNext}
496496
option='transparent' />
497497
</div>
498498
{showToday &&
499499
<div className='fd-calendar__action'>
500500
<Button
501-
compact
501+
compact={this.props.compact}
502502
onClick={this.handleToday}
503503
option={'transparent'}>
504504
{this.props.localizedText.todayLabel}
505505
</Button>
506506
</div>
507507
}
508508
</div>
509-
</header>
509+
</div>
510510
);
511511
}
512512

@@ -652,6 +652,7 @@ class Calendar extends Component {
652652

653653
render() {
654654
const {
655+
compact,
655656
enableRangeSelection,
656657
disableWeekends,
657658
disableBeforeDate,
@@ -679,6 +680,9 @@ class Calendar extends Component {
679680

680681
const calendarClasses = classnames(
681682
'fd-calendar',
683+
{
684+
'fd-calendar--compact': compact
685+
},
682686
className
683687
);
684688

@@ -709,6 +713,8 @@ Calendar.propTypes = {
709713
blockedDates: PropTypes.arrayOf(PropTypes.instanceOf(moment)),
710714
/** CSS class(es) to add to the element */
711715
className: PropTypes.string,
716+
/** Set to **true** to enable compact mode */
717+
compact: PropTypes.bool,
712718
customDate: PropTypes.oneOfType([
713719
PropTypes.object,
714720
PropTypes.array
@@ -723,7 +729,7 @@ Calendar.propTypes = {
723729
disableFutureDates: PropTypes.bool,
724730
/** Set to **true** to disable dates before today\'s date */
725731
disablePastDates: PropTypes.bool,
726-
/** Disables dates that match a weekday */
732+
/** Disables dates that match a weekday. For example, `disableWeekday={[\'Tuesday\', \'Thursday\', \'Friday\']}` */
727733
disableWeekday: PropTypes.arrayOf(PropTypes.string),
728734
/** Set to **true** to disables dates that match a weekend */
729735
disableWeekends: PropTypes.bool,
@@ -771,6 +777,7 @@ Calendar.propTypes = {
771777
};
772778

773779
Calendar.defaultProps = {
780+
compact: false,
774781
locale: 'en',
775782
localizedText: {
776783
calendarInstructions: 'Use arrow keys to move between dates.',

‎src/Calendar/Calendar.test.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('<Calendar />', () => {
5858
expect(wrapper.state('showMonths')).toBeFalsy();
5959
wrapper
6060
.find(
61-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
61+
'.fd-calendar__header button.fd-button--transparent'
6262
)
6363
.at(1)
6464
.simulate('click');
@@ -67,7 +67,7 @@ describe('<Calendar />', () => {
6767

6868
wrapper
6969
.find(
70-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
70+
'.fd-calendar__header button.fd-button--transparent'
7171
)
7272
.at(1)
7373
.simulate('click');
@@ -87,7 +87,7 @@ describe('<Calendar />', () => {
8787
//open month overlay
8888
wrapper
8989
.find(
90-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
90+
'.fd-calendar__header button.fd-button--transparent'
9191
)
9292
.at(1)
9393
.simulate('click');
@@ -116,7 +116,7 @@ describe('<Calendar />', () => {
116116
//open months view
117117
wrapper
118118
.find(
119-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
119+
'.fd-calendar__header button.fd-button--transparent'
120120
)
121121
.at(1)
122122
.simulate('click');
@@ -139,7 +139,7 @@ describe('<Calendar />', () => {
139139
expect(wrapper.state('showYears')).toBeFalsy();
140140
wrapper
141141
.find(
142-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
142+
'.fd-calendar__header button.fd-button--transparent'
143143
)
144144
.at(2)
145145
.simulate('click');
@@ -148,7 +148,7 @@ describe('<Calendar />', () => {
148148

149149
wrapper
150150
.find(
151-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
151+
'.fd-calendar__header button.fd-button--transparent'
152152
)
153153
.at(2)
154154
.simulate('click');
@@ -162,7 +162,7 @@ describe('<Calendar />', () => {
162162
expect(wrapper.state('showYears')).toBeFalsy();
163163
wrapper
164164
.find(
165-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
165+
'.fd-calendar__header button.fd-button--transparent'
166166
)
167167
.at(2)
168168
.simulate('click');
@@ -210,7 +210,7 @@ describe('<Calendar />', () => {
210210
expect(wrapper.state('showYears')).toBeFalsy();
211211
wrapper
212212
.find(
213-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
213+
'.fd-calendar__header button.fd-button--transparent'
214214
)
215215
.at(2)
216216
.simulate('click');
@@ -236,7 +236,7 @@ describe('<Calendar />', () => {
236236

237237
wrapper
238238
.find(
239-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
239+
'.fd-calendar__header button.fd-button--transparent'
240240
)
241241
.at(0)
242242
.simulate('click');
@@ -247,7 +247,7 @@ describe('<Calendar />', () => {
247247
// previous button when year shown
248248
wrapper
249249
.find(
250-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
250+
'.fd-calendar__header button.fd-button--transparent'
251251
)
252252
.at(2)
253253
.simulate('click');
@@ -256,7 +256,7 @@ describe('<Calendar />', () => {
256256

257257
wrapper
258258
.find(
259-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
259+
'.fd-calendar__header button.fd-button--transparent'
260260
)
261261
.at(0)
262262
.simulate('click');
@@ -273,7 +273,7 @@ describe('<Calendar />', () => {
273273

274274
wrapper
275275
.find(
276-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
276+
'.fd-calendar__header button.fd-button--transparent'
277277
)
278278
.at(3)
279279
.simulate('click');
@@ -284,7 +284,7 @@ describe('<Calendar />', () => {
284284
// previous button when year shown
285285
wrapper
286286
.find(
287-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
287+
'.fd-calendar__header button.fd-button--transparent'
288288
)
289289
.at(2)
290290
.simulate('click');
@@ -293,7 +293,7 @@ describe('<Calendar />', () => {
293293

294294
wrapper
295295
.find(
296-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
296+
'.fd-calendar__header button.fd-button--transparent'
297297
)
298298
.at(3)
299299
.simulate('click');
@@ -311,7 +311,7 @@ describe('<Calendar />', () => {
311311

312312
wrapper
313313
.find(
314-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
314+
'.fd-calendar__header button.fd-button--transparent'
315315
)
316316
.at(3)
317317
.simulate('click');
@@ -349,7 +349,7 @@ describe('<Calendar />', () => {
349349
// now click Today
350350
wrapper
351351
.find(
352-
'header.fd-calendar__header button.fd-button--transparent.fd-button--compact'
352+
'.fd-calendar__header button.fd-button--transparent'
353353
)
354354
.at(4)
355355
.simulate('click');

‎src/Calendar/__stories__/Calendar.stories.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ const weekdayOptions = {
4444

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

47+
export const compact = () => (<Calendar compact />);
48+
4749
export const disableWeekends = () => (
4850
<Calendar
4951
disableBeforeDate={new Date()}
@@ -86,6 +88,7 @@ export const dev = () => (
8688
<Calendar
8789
blockedDates={[dateKnobToDate('block between dates (1)', blockedDateFirstDefault),
8890
dateKnobToDate('block between dates (2)', blockedDateSecondDefault)]}
91+
compact={boolean('compact', false)}
8992
disableAfterDate={dateKnobToDate('disable after date', afterDateDefault)}
9093
disableBeforeDate={dateKnobToDate('disable before date', beforeDateDefault)}
9194
disableFutureDates={boolean('disable future dates', false)}
@@ -96,6 +99,7 @@ export const dev = () => (
9699
dateKnobToDate('disable between dates (2)', disabledDateSecondDefault)]}
97100
locale={text('locale', 'en')}
98101
openToDate={dateKnobToDate('open to date', new Date())}
102+
showToday={boolean('showToday', false)}
99103
weekdayStart={number('weekdayStart', 0)} />
100104
);
101105

0 commit comments

Comments
 (0)