Skip to content

Commit

Permalink
Merge pull request #5232 from qburst/issue-5200/fix/week-number-highl…
Browse files Browse the repository at this point in the history
…ight

Fix #5200: Fix the unnecessary highlight on the Week Number when the first day of the week is selected using Keyboard
  • Loading branch information
martijnrusschen authored Nov 24, 2024
2 parents 0493547 + 9f86dd4 commit e479fc3
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 50 deletions.
60 changes: 37 additions & 23 deletions src/stylesheets/datepicker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -347,10 +347,7 @@ h2.react-datepicker__current-month {
&.react-datepicker__week-number--clickable {
cursor: pointer;

&:not(
.react-datepicker__week-number--selected,
.react-datepicker__week-number--keyboard-selected
):hover {
&:not(.react-datepicker__week-number--selected):hover {
border-radius: $datepicker__border-radius;
background-color: $datepicker__background-color;
}
Expand All @@ -362,17 +359,10 @@ h2.react-datepicker__current-month {
color: #fff;

&:hover {
background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
}
}

&--keyboard-selected {
border-radius: $datepicker__border-radius;
background-color: color.adjust($datepicker__selected-color, $lightness: 10%);
color: #fff;

&:hover {
background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
background-color: color.adjust(
$datepicker__selected-color,
$lightness: -5%
);
}
}
}
Expand Down Expand Up @@ -418,7 +408,10 @@ h2.react-datepicker__current-month {
color: #fff;

&:not([aria-disabled="true"]):hover {
background-color: color.adjust($datepicker__highlighted-color, $lightness: -5%);
background-color: color.adjust(
$datepicker__highlighted-color,
$lightness: -5%
);
}

&-custom-1 {
Expand Down Expand Up @@ -454,7 +447,10 @@ h2.react-datepicker__current-month {
}

&:not([aria-disabled="true"]):hover {
background-color: color.adjust($datepicker__holidays-color, $lightness: -10%);
background-color: color.adjust(
$datepicker__holidays-color,
$lightness: -10%
);
}

&:hover .overlay {
Expand All @@ -471,17 +467,26 @@ h2.react-datepicker__current-month {
color: #fff;

&:not([aria-disabled="true"]):hover {
background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
background-color: color.adjust(
$datepicker__selected-color,
$lightness: -5%
);
}
}

&--keyboard-selected {
border-radius: $datepicker__border-radius;
background-color: color.adjust($datepicker__selected-color, $lightness: 45%);
background-color: color.adjust(
$datepicker__selected-color,
$lightness: 45%
);
color: rgb(0, 0, 0);

&:not([aria-disabled="true"]):hover {
background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
background-color: color.adjust(
$datepicker__selected-color,
$lightness: -5%
);
}
}

Expand Down Expand Up @@ -550,7 +555,10 @@ h2.react-datepicker__current-month {

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
border-top-color: color.adjust(
$datepicker__muted-color,
$lightness: -10%
);
}
}

Expand Down Expand Up @@ -613,11 +621,17 @@ h2.react-datepicker__current-month {
background-color: $datepicker__muted-color;

.react-datepicker__navigation--years-upcoming {
border-bottom-color: color.adjust($datepicker__muted-color, $lightness: -10%);
border-bottom-color: color.adjust(
$datepicker__muted-color,
$lightness: -10%
);
}

.react-datepicker__navigation--years-previous {
border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
border-top-color: color.adjust(
$datepicker__muted-color,
$lightness: -10%
);
}
}

Expand Down
25 changes: 0 additions & 25 deletions src/test/week_number_test.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -186,11 +186,6 @@ describe("WeekNumber", () => {
) as HTMLDivElement;
expect(weekNumber).not.toBeNull();

expect(
weekNumber?.classList.contains(
"react-datepicker__week-number--keyboard-selected",
),
).toBe(false);
expect(weekNumber?.tabIndex).toBe(0);
});

Expand All @@ -212,11 +207,6 @@ describe("WeekNumber", () => {
".react-datepicker__week-number",
) as HTMLDivElement;
expect(weekNumber).not.toBeNull();
expect(
weekNumber?.classList.contains(
"react-datepicker__week-number--keyboard-selected",
),
).toBe(true);
expect(weekNumber.tabIndex).toBe(0);
});

Expand Down Expand Up @@ -267,11 +257,6 @@ describe("WeekNumber", () => {
const weekNumber = container.querySelector(
".react-datepicker__week-number",
) as HTMLDivElement;
expect(
weekNumber?.classList.contains(
"react-datepicker__week-number--keyboard-selected",
),
).toBe(false);
expect(weekNumber.tabIndex).toBe(-1);
});
});
Expand Down Expand Up @@ -403,11 +388,6 @@ describe("WeekNumber", () => {
"react-datepicker__week-number--selected",
),
).toBe(false);
expect(
weekNumber?.classList.contains(
"react-datepicker__week-number--keyboard-selected",
),
).toBe(true);
});

it("should have the class 'react-datepicker__week-number--selected' if selected is not current week and preselected is not current week", () => {
Expand All @@ -430,11 +410,6 @@ describe("WeekNumber", () => {
"react-datepicker__week-number--selected",
),
).toBe(false);
expect(
weekNumber?.classList.contains(
"react-datepicker__week-number--keyboard-selected",
),
).toBe(false);
});
});
});
Expand Down
2 changes: 0 additions & 2 deletions src/week_number.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,6 @@ export default class WeekNumber extends Component<WeekNumberProps> {
"react-datepicker__week-number--clickable": !!onClick,
"react-datepicker__week-number--selected":
!!onClick && isSameDay(this.props.date, this.props.selected),
"react-datepicker__week-number--keyboard-selected":
this.isKeyboardSelected(),
};
return (
<div
Expand Down

0 comments on commit e479fc3

Please sign in to comment.