Add "No CSS" theme switcher option

Fix today button behavior
fymmot · Jan 21, 2023 · f3ace08 · f3ace08
1 parent d4518af
commit f3ace08
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 12 deletions.
diff --git a/.changeset/strong-boxes-visit.md b/.changeset/strong-boxes-visit.md
@@ -0,0 +1,5 @@
+---
+"inclusive-dates": patch
+---
+
+Refactored Chrono date parsing and fixes some bugs in certain timezones. More tests + updated docs page.
diff --git a/docs/css/bamboo.css b/docs/css/bamboo.css
@@ -251,9 +251,9 @@ li > ol {
   margin-bottom: 0;
 }
 
-button,
-input,
-select,
+button:not(inclusive-dates button),
+input:not(inclusive-dates input),
+select:not(inclusive-dates select),
 textarea {
   max-width: 100%;
   margin: 0;
@@ -267,7 +267,7 @@ textarea {
 }
 
 select:not(.inclusive-dates-calendar__month-select),
-input[type="text"]:not(.inclusive-dates-calendar__year-select):not(.inclusive-dates__input) {
+input[type="text"]:not(inclusive-dates input) {
   width: 100%;
 }
 
@@ -315,8 +315,8 @@ textarea:not([rows]) {
   height: 8rem;
 }
 
-button,
-[type="button" i],
+button:not(inclusive-dates button),
+[type="button" i]:not(inclusive-dates button),
 [type="submit" i],
 [type="reset" i] {
   display: inline-block;
@@ -409,3 +409,10 @@ progress {
     scroll-behavior: auto !important;
   }
 }
+
+inclusive-dates-modal::part(body) {
+  background-color: white;
+}
+.dark inclusive-dates-modal::part(body) {
+  background-color: black;
+}
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -23,7 +23,7 @@
   display: inline-block;
   margin: 0;
   margin-left: 0.25rem;
-  padding: 0;
+  padding: 0.5rem 0.75rem;
   border: none;
   color: var(--b-link);
   background-color: transparent;

diff --git a/docs/index.html b/docs/index.html
@@ -35,7 +35,14 @@
           stylesheet.setAttribute("href", "themes/light.css");
           prismCSS.setAttribute("href", "css/prism.css")
         }
-        if (themeLabel) themeLabel.innerHTML = `${localStorage.getItem('theme')}.css`;
+        if (theme === "none"){
+          document.querySelector("html").classList.remove("dark");
+          stylesheet.setAttribute("href", "none");
+        }
+        if (themeLabel){
+          if (theme === "none") themeLabel.innerHTML = `No CSS`;
+          else themeLabel.innerHTML = `${theme}.css`;
+        }
       }
       if (localStorage.getItem('theme')){
         setTheme(localStorage.getItem('theme'))
@@ -1154,8 +1161,12 @@ <h2>About me</h2>
         const stylesheet = document.getElementById("theme");
 
         if (stylesheet.getAttribute("href").includes("light.css")) {
+          setTheme("none")
+        }
+        else if (stylesheet.getAttribute("href").includes("none"))
           setTheme("dark")
-        } else {
+
+        else if (stylesheet.getAttribute("href").includes("dark.css")) {
           setTheme("light")
         }
       }

diff --git a/src/components/inclusive-dates-calendar/inclusive-dates-calendar.tsx b/src/components/inclusive-dates-calendar/inclusive-dates-calendar.tsx
@@ -323,7 +323,7 @@ export class InclusiveDatesCalendar {
   };
 
   private showToday = () => {
-    this.updateCurrentDate(new Date());
+    this.updateCurrentDate(new Date(), true);
   };
 
   private clear = () => {

diff --git a/src/components/inclusive-dates/inclusive-dates.tsx b/src/components/inclusive-dates/inclusive-dates.tsx
@@ -119,7 +119,7 @@ export class InclusiveDates {
   private chronoSupportedLocale = ["en", "ja", "fr", "nl", "ru", "pt"].includes(
     this.locale.slice(0, 2)
   );
-  private errorMessage = "Default error message";
+  private errorMessage = "";
 
   componentDidLoad() {
     if (!this.id) {
@@ -227,7 +227,7 @@ export class InclusiveDates {
       maxDate: this.maxDate,
       referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
     });
-    if (parsedDate.value instanceof Date) {
+    if (parsedDate && parsedDate.value instanceof Date) {
       this.updateValue(parsedDate.value);
       this.formatInput(true, false);
     } else {