Skip to content

Commit ae63d4c

Browse files
gpblgpbl
authored
feat: add new data-attributes to the day cells (#2331)
feat: add more data-attributes to the day cell The data-attributes such as data-selected or data-outside help targeting the css classes in Tailwind without relying to aria-attributes. E.g.: instead of `aria-selected:hawa-opacity-100` write `data-selected:hawa-opacity-100`.
1 parent 02b31b7 commit ae63d4c

3 files changed

Lines changed: 49 additions & 7 deletions

File tree

‎examples/__snapshots__/Range.test.tsx.snap‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,9 @@ exports[`should match the snapshot 1`] = `
136136
aria-hidden="true"
137137
class="rdp-day rdp-hidden rdp-outside"
138138
data-day="2020-05-31"
139+
data-hidden="true"
139140
data-month="2020-05"
141+
data-outside="true"
140142
role="gridcell"
141143
>
142144
<button
@@ -343,6 +345,7 @@ exports[`should match the snapshot 1`] = `
343345
aria-selected="true"
344346
class="rdp-day rdp-range_start rdp-selected"
345347
data-day="2020-06-15"
348+
data-selected="true"
346349
role="gridcell"
347350
>
348351
<button
@@ -357,6 +360,7 @@ exports[`should match the snapshot 1`] = `
357360
aria-selected="true"
358361
class="rdp-day rdp-range_middle rdp-selected"
359362
data-day="2020-06-16"
363+
data-selected="true"
360364
role="gridcell"
361365
>
362366
<button
@@ -371,6 +375,7 @@ exports[`should match the snapshot 1`] = `
371375
aria-selected="true"
372376
class="rdp-day rdp-range_middle rdp-selected"
373377
data-day="2020-06-17"
378+
data-selected="true"
374379
role="gridcell"
375380
>
376381
<button
@@ -385,6 +390,7 @@ exports[`should match the snapshot 1`] = `
385390
aria-selected="true"
386391
class="rdp-day rdp-range_middle rdp-selected"
387392
data-day="2020-06-18"
393+
data-selected="true"
388394
role="gridcell"
389395
>
390396
<button
@@ -399,6 +405,7 @@ exports[`should match the snapshot 1`] = `
399405
aria-selected="true"
400406
class="rdp-day rdp-range_end rdp-selected"
401407
data-day="2020-06-19"
408+
data-selected="true"
402409
role="gridcell"
403410
>
404411
<button
@@ -566,7 +573,9 @@ exports[`should match the snapshot 1`] = `
566573
aria-hidden="true"
567574
class="rdp-day rdp-hidden rdp-outside"
568575
data-day="2020-07-01"
576+
data-hidden="true"
569577
data-month="2020-07"
578+
data-outside="true"
570579
role="gridcell"
571580
>
572581
<button
@@ -581,7 +590,9 @@ exports[`should match the snapshot 1`] = `
581590
aria-hidden="true"
582591
class="rdp-day rdp-hidden rdp-outside"
583592
data-day="2020-07-02"
593+
data-hidden="true"
584594
data-month="2020-07"
595+
data-outside="true"
585596
role="gridcell"
586597
>
587598
<button
@@ -596,7 +607,9 @@ exports[`should match the snapshot 1`] = `
596607
aria-hidden="true"
597608
class="rdp-day rdp-hidden rdp-outside"
598609
data-day="2020-07-03"
610+
data-hidden="true"
599611
data-month="2020-07"
612+
data-outside="true"
600613
role="gridcell"
601614
>
602615
<button
@@ -611,7 +624,9 @@ exports[`should match the snapshot 1`] = `
611624
aria-hidden="true"
612625
class="rdp-day rdp-hidden rdp-outside"
613626
data-day="2020-07-04"
627+
data-hidden="true"
614628
data-month="2020-07"
629+
data-outside="true"
615630
role="gridcell"
616631
>
617632
<button
@@ -774,7 +789,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
774789
aria-hidden="true"
775790
class="rdp-day rdp-hidden rdp-outside"
776791
data-day="2020-05-31"
792+
data-hidden="true"
777793
data-month="2020-05"
794+
data-outside="true"
778795
role="gridcell"
779796
>
780797
<button
@@ -1006,6 +1023,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
10061023
<td
10071024
class="rdp-day rdp-focused"
10081025
data-day="2020-06-17"
1026+
data-focused="true"
10091027
role="gridcell"
10101028
>
10111029
<button
@@ -1199,7 +1217,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
11991217
aria-hidden="true"
12001218
class="rdp-day rdp-hidden rdp-outside"
12011219
data-day="2020-07-01"
1220+
data-hidden="true"
12021221
data-month="2020-07"
1222+
data-outside="true"
12031223
role="gridcell"
12041224
>
12051225
<button
@@ -1214,7 +1234,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
12141234
aria-hidden="true"
12151235
class="rdp-day rdp-hidden rdp-outside"
12161236
data-day="2020-07-02"
1237+
data-hidden="true"
12171238
data-month="2020-07"
1239+
data-outside="true"
12181240
role="gridcell"
12191241
>
12201242
<button
@@ -1229,7 +1251,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
12291251
aria-hidden="true"
12301252
class="rdp-day rdp-hidden rdp-outside"
12311253
data-day="2020-07-03"
1254+
data-hidden="true"
12321255
data-month="2020-07"
1256+
data-outside="true"
12331257
role="gridcell"
12341258
>
12351259
<button
@@ -1244,7 +1268,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
12441268
aria-hidden="true"
12451269
class="rdp-day rdp-hidden rdp-outside"
12461270
data-day="2020-07-04"
1271+
data-hidden="true"
12471272
data-month="2020-07"
1273+
data-outside="true"
12481274
role="gridcell"
12491275
>
12501276
<button

‎examples/__snapshots__/StylingCssModules.test.tsx.snap‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,9 @@ exports[`should match the snapshot 1`] = `
137137
aria-hidden="true"
138138
class="rdp-day rdp-hidden rdp-outside"
139139
data-day="2021-10-31"
140+
data-hidden="true"
140141
data-month="2021-10"
142+
data-outside="true"
141143
role="gridcell"
142144
>
143145
<button
@@ -478,6 +480,7 @@ exports[`should match the snapshot 1`] = `
478480
<td
479481
class="rdp-day rdp-today"
480482
data-day="2021-11-25"
483+
data-today="true"
481484
role="gridcell"
482485
>
483486
<button
@@ -562,7 +565,9 @@ exports[`should match the snapshot 1`] = `
562565
aria-hidden="true"
563566
class="rdp-day rdp-hidden rdp-outside"
564567
data-day="2021-12-01"
568+
data-hidden="true"
565569
data-month="2021-12"
570+
data-outside="true"
566571
role="gridcell"
567572
>
568573
<button
@@ -577,7 +582,9 @@ exports[`should match the snapshot 1`] = `
577582
aria-hidden="true"
578583
class="rdp-day rdp-hidden rdp-outside"
579584
data-day="2021-12-02"
585+
data-hidden="true"
580586
data-month="2021-12"
587+
data-outside="true"
581588
role="gridcell"
582589
>
583590
<button
@@ -592,7 +599,9 @@ exports[`should match the snapshot 1`] = `
592599
aria-hidden="true"
593600
class="rdp-day rdp-hidden rdp-outside"
594601
data-day="2021-12-03"
602+
data-hidden="true"
595603
data-month="2021-12"
604+
data-outside="true"
596605
role="gridcell"
597606
>
598607
<button
@@ -607,7 +616,9 @@ exports[`should match the snapshot 1`] = `
607616
aria-hidden="true"
608617
class="rdp-day rdp-hidden rdp-outside"
609618
data-day="2021-12-04"
619+
data-hidden="true"
610620
data-month="2021-12"
621+
data-outside="true"
611622
role="gridcell"
612623
>
613624
<button

‎src/DayPicker.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -531,12 +531,6 @@ export function DayPicker(props: DayPickerProps) {
531531
)
532532
: undefined;
533533

534-
const dataAttributes = {
535-
"data-day": dateLib.format(date, "yyyy-MM-dd"),
536-
"data-month": day.outside
537-
? dateLib.format(date, "yyyy-MM")
538-
: undefined
539-
};
540534
return (
541535
<components.Day
542536
key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
@@ -548,7 +542,18 @@ export function DayPicker(props: DayPickerProps) {
548542
aria-hidden={modifiers.hidden || undefined}
549543
aria-selected={modifiers.selected || undefined}
550544
aria-label={ariaLabel}
551-
{...dataAttributes}
545+
data-day={dateLib.format(date, "yyyy-MM-dd")}
546+
data-month={
547+
day.outside
548+
? dateLib.format(date, "yyyy-MM")
549+
: undefined
550+
}
551+
data-selected={modifiers.selected || undefined}
552+
data-disabled={modifiers.disabled || undefined}
553+
data-hidden={modifiers.hidden || undefined}
554+
data-outside={day.outside || undefined}
555+
data-focused={modifiers.focused || undefined}
556+
data-today={modifiers.today || undefined}
552557
>
553558
{isInteractive ? (
554559
<components.DayButton

0 commit comments

Comments
 (0)