diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss index 8b08ba3cb..7d92ebeab 100644 --- a/src/stylesheets/datepicker.scss +++ b/src/stylesheets/datepicker.scss @@ -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; } @@ -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% + ); } } } @@ -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 { @@ -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 { @@ -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% + ); } } @@ -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% + ); } } @@ -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% + ); } } diff --git a/src/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx index baa704cfa..8345ecbcf 100644 --- a/src/test/week_number_test.test.tsx +++ b/src/test/week_number_test.test.tsx @@ -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); }); @@ -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); }); @@ -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); }); }); @@ -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", () => { @@ -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); }); }); }); diff --git a/src/week_number.tsx b/src/week_number.tsx index 0340466ab..e244916e1 100644 --- a/src/week_number.tsx +++ b/src/week_number.tsx @@ -120,8 +120,6 @@ export default class WeekNumber extends Component { "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 (