Repository: flatpickr/flatpickr
Pull request #1719 (2019-04-02 19:43:56)

#1572 - renamed CSS class disabled to flatpickr-disabled
PR redid

Original text: The `disabled` CSS class had a too common name and introduced subtle bugs like the one in #1572 . Renamed the class to `flatpickr-disabled`. The purpose was to save time both for the users and the maintainers in the future when investigating these kind of bugs


Patch:
diff --git a/src/index.ts b/src/index.ts
index c7b7955e..21875936 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -704,7 +704,7 @@ function FlatpickrInstance(
         }
       }
     } else {
-      dayElement.classList.add("disabled");
+      dayElement.classList.add("flatpickr-disabled");
     }
 
     if (self.config.mode === "range") {
@@ -987,7 +987,7 @@ function FlatpickrInstance(
       get: () => self.__hidePrevMonthArrow,
       set(bool: boolean) {
         if (self.__hidePrevMonthArrow !== bool) {
-          toggleClass(self.prevMonthNav, "disabled", bool);
+          toggleClass(self.prevMonthNav, "flatpickr-disabled", bool);
           self.__hidePrevMonthArrow = bool;
         }
       },
@@ -997,7 +997,7 @@ function FlatpickrInstance(
       get: () => self.__hideNextMonthArrow,
       set(bool: boolean) {
         if (self.__hideNextMonthArrow !== bool) {
-          toggleClass(self.nextMonthNav, "disabled", bool);
+          toggleClass(self.nextMonthNav, "flatpickr-disabled", bool);
           self.__hideNextMonthArrow = bool;
         }
       },
@@ -1630,7 +1630,7 @@ function FlatpickrInstance(
       self.selectedDates.length !== 1 ||
       (elem &&
         (!elem.classList.contains("flatpickr-day") ||
-          elem.classList.contains("disabled")))
+          elem.classList.contains("flatpickr-disabled")))
     )
       return;
 
@@ -2105,7 +2105,7 @@ function FlatpickrInstance(
     const isSelectable = (day: Element) =>
       day.classList &&
       day.classList.contains("flatpickr-day") &&
-      !day.classList.contains("disabled") &&
+      !day.classList.contains("flatpickr-disabled") &&
       !day.classList.contains("notAllowed");
 
     const t = findParent(e.target as Element, isSelectable);
diff --git a/src/style/flatpickr.styl b/src/style/flatpickr.styl
index e6ece1a6..c47ce04d 100644
--- a/src/style/flatpickr.styl
+++ b/src/style/flatpickr.styl
@@ -183,7 +183,7 @@
     color $monthForeground
     fill $monthForeground
 
-    &.disabled
+    &.flatpickr-disabled
       display none
 
     i
@@ -502,7 +502,7 @@ span.flatpickr-weekday
     border-radius 0
     box-shadow: (-2.5*$dayMargin) 0 0 $dayHoverBackground, (2.5*$dayMargin) 0 0 $dayHoverBackground
 
-  &.disabled, &.disabled:hover,
+  &.flatpickr-disabled, &.flatpickr-disabled:hover,
   &.prevMonthDay, &.nextMonthDay,
   &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay
     color alpha($dayForeground, 0.3)
@@ -515,7 +515,7 @@ span.flatpickr-weekday
       border-color transparent
     cursor default
 
-  &.disabled, &.disabled:hover
+  &.flatpickr-disabled, &.flatpickr-disabled:hover
     cursor not-allowed
     color alpha($dayForeground, 0.1)
 


Test patch:
diff --git a/src/__tests__/index.spec.ts b/src/__tests__/index.spec.ts
index eacf226a..f618ddc4 100644
--- a/src/__tests__/index.spec.ts
+++ b/src/__tests__/index.spec.ts
@@ -123,7 +123,7 @@ describe("flatpickr", () => {
       expect(fp.days.querySelector(".selected")).toEqual(null);
 
       let enabledDays = fp.days.querySelectorAll(
-        ".flatpickr-day:not(.disabled)"
+        ".flatpickr-day:not(.flatpickr-disabled)"
       );
 
       expect(enabledDays.length).toEqual(2);
@@ -1286,7 +1286,7 @@ describe("flatpickr", () => {
 
       simulate("mouseover", day(32));
       expect(day(32).classList.contains("endRange")).toEqual(false);
-      expect(day(24).classList.contains("disabled")).toEqual(true);
+      expect(day(24).classList.contains("flatpickr-disabled")).toEqual(true);
       expect(day(25).classList.contains("notAllowed")).toEqual(true);
 
       for (let i = 25; i < 32; i++)
@@ -1294,7 +1294,7 @@ describe("flatpickr", () => {
 
       for (let i = 17; i < 22; i++) {
         expect(day(i).classList.contains("notAllowed")).toEqual(false);
-        expect(day(i).classList.contains("disabled")).toEqual(false);
+        expect(day(i).classList.contains("flatpickr-disabled")).toEqual(false);
       }
 
       simulate("mousedown", fp.days.childNodes[17], { which: 1 }, MouseEvent);
@@ -1304,7 +1304,7 @@ describe("flatpickr", () => {
 
     it("adds disabled class to disabled prev/next month arrows", () => {
       const isArrowDisabled = (which: "prevMonthNav" | "nextMonthNav") =>
-        fp[which].classList.contains("disabled");
+        fp[which].classList.contains("flatpickr-disabled");
       createInstance({
         minDate: "2099-1-1",
         maxDate: "2099-3-4",