Skip to content

Commit

Permalink
feat: add new data-attributes to the day cells (#2331)
Browse files Browse the repository at this point in the history 
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`.
  • Loading branch information
@gpbl
gpbl authored Jul 31, 2024
1 parent 02b31b7 commit ae63d4c
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 7 deletions.
26 changes: 26 additions & 0 deletions examples/__snapshots__/Range.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-05-31"
data-hidden="true"
data-month="2020-05"
data-outside="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -343,6 +345,7 @@ exports[`should match the snapshot 1`] = `
aria-selected="true"
class="rdp-day rdp-range_start rdp-selected"
data-day="2020-06-15"
data-selected="true"
role="gridcell"
>
<button
Expand All @@ -357,6 +360,7 @@ exports[`should match the snapshot 1`] = `
aria-selected="true"
class="rdp-day rdp-range_middle rdp-selected"
data-day="2020-06-16"
data-selected="true"
role="gridcell"
>
<button
Expand All @@ -371,6 +375,7 @@ exports[`should match the snapshot 1`] = `
aria-selected="true"
class="rdp-day rdp-range_middle rdp-selected"
data-day="2020-06-17"
data-selected="true"
role="gridcell"
>
<button
Expand All @@ -385,6 +390,7 @@ exports[`should match the snapshot 1`] = `
aria-selected="true"
class="rdp-day rdp-range_middle rdp-selected"
data-day="2020-06-18"
data-selected="true"
role="gridcell"
>
<button
Expand All @@ -399,6 +405,7 @@ exports[`should match the snapshot 1`] = `
aria-selected="true"
class="rdp-day rdp-range_end rdp-selected"
data-day="2020-06-19"
data-selected="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -566,7 +573,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-01"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -581,7 +590,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-02"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -596,7 +607,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-03"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -611,7 +624,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-04"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -774,7 +789,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-05-31"
data-hidden="true"
data-month="2020-05"
data-outside="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -1006,6 +1023,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
<td
class="rdp-day rdp-focused"
data-day="2020-06-17"
data-focused="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -1199,7 +1217,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-01"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -1214,7 +1234,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-02"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -1229,7 +1251,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-03"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -1244,7 +1268,9 @@ exports[`when a day in the range is clicked when the day is clicked again when a
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2020-07-04"
data-hidden="true"
data-month="2020-07"
data-outside="true"
role="gridcell"
>
<button
Expand Down
11 changes: 11 additions & 0 deletions examples/__snapshots__/StylingCssModules.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2021-10-31"
data-hidden="true"
data-month="2021-10"
data-outside="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -478,6 +480,7 @@ exports[`should match the snapshot 1`] = `
<td
class="rdp-day rdp-today"
data-day="2021-11-25"
data-today="true"
role="gridcell"
>
<button
Expand Down Expand Up @@ -562,7 +565,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2021-12-01"
data-hidden="true"
data-month="2021-12"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -577,7 +582,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2021-12-02"
data-hidden="true"
data-month="2021-12"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -592,7 +599,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2021-12-03"
data-hidden="true"
data-month="2021-12"
data-outside="true"
role="gridcell"
>
<button
Expand All @@ -607,7 +616,9 @@ exports[`should match the snapshot 1`] = `
aria-hidden="true"
class="rdp-day rdp-hidden rdp-outside"
data-day="2021-12-04"
data-hidden="true"
data-month="2021-12"
data-outside="true"
role="gridcell"
>
<button
Expand Down
19 changes: 12 additions & 7 deletions src/DayPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -531,12 +531,6 @@ export function DayPicker(props: DayPickerProps) {
)
: undefined;

const dataAttributes = {
"data-day": dateLib.format(date, "yyyy-MM-dd"),
"data-month": day.outside
? dateLib.format(date, "yyyy-MM")
: undefined
};
return (
<components.Day
key={`${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`}
Expand All @@ -548,7 +542,18 @@ export function DayPicker(props: DayPickerProps) {
aria-hidden={modifiers.hidden || undefined}
aria-selected={modifiers.selected || undefined}
aria-label={ariaLabel}
{...dataAttributes}
data-day={dateLib.format(date, "yyyy-MM-dd")}
data-month={
day.outside
? dateLib.format(date, "yyyy-MM")
: undefined
}
data-selected={modifiers.selected || undefined}
data-disabled={modifiers.disabled || undefined}
data-hidden={modifiers.hidden || undefined}
data-outside={day.outside || undefined}
data-focused={modifiers.focused || undefined}
data-today={modifiers.today || undefined}
>
{isInteractive ? (
<components.DayButton
Expand Down

0 comments on commit ae63d4c

Please sign in to comment.