From 9f86dd4bf8713b025d3e67e535ac015ab541cab7 Mon Sep 17 00:00:00 2001 From: Balaji-Sridharan_NYULH Date: Mon, 18 Nov 2024 13:51:05 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Remove=20the=20"react-datepicker?= =?UTF-8?q?=5F=5Fweek-number--keyboard-selected"=20class=20for=20the=20=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed as highlighting the first day of the week alone highlights the week number - Because we set the date prop of the to first date of the week. As a result this highlight will work only for the first day of week --- src/stylesheets/datepicker.scss | 60 ++++++++++++++++++------------ src/test/week_number_test.test.tsx | 25 ------------- src/week_number.tsx | 2 - 3 files changed, 37 insertions(+), 50 deletions(-) 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 (