feat: Scrollbar thumb customization in year list view, close #173

api-references.md

@@ -41,14 +41,16 @@ _None_
 | --- | --- | --- |
 | `--app-datepicker-accent-color` | `#1a73e8` | Accent color. |
 | `--app-datepicker-bg-color` | `#fff` | Background color. |
-| `--app-datepicker-border-bottom-left-radius` | `8px` | Radius of outer bottom-left border edge. |
-| `--app-datepicker-border-bottom-right-radius` | `8px` | Radius of outer bottom-right border edge. |
-| `--app-datepicker-border-top-left-radius` | `8px` | Radius of outer top-left border edge. |
-| `--app-datepicker-border-top-right-radius` | `8px` | Radius of outer top-right border edge. |
+| `--app-datepicker-border-bottom-left-radius` | `0` | Radius of outer bottom-left border edge. |
+| `--app-datepicker-border-bottom-right-radius` | `0` | Radius of outer bottom-right border edge. |
+| `--app-datepicker-border-top-left-radius` | `0` | Radius of outer top-left border edge. |
+| `--app-datepicker-border-top-right-radius` | `0` | Radius of outer top-right border edge. |
 | `--app-datepicker-color` | `#000` | Text color. |
 | `--app-datepicker-disabled-day-color` | `rgba(0, 0, 0, .55)` | Text color of disabled day. |
 | `--app-datepicker-focused-day-color` | `#fff` | Text color of focused day. |
 | `--app-datepicker-focused-year-bg-color` | `#000` | Background color of focused year. |
+| `--app-datepicker-scrollbar-thumb-bg-color` | `rgba(0, 0, 0, .35)` | Background color of scrollbar thumb in year list view. |
+| `--app-datepicker-scrollbar-thumb-hover-bg-color` | `rgba(0, 0, 0, .5)` | Background color of scrollbar thumb in year list view when hovered. |
 | `--app-datepicker-selector-color` | `rgba(0, 0, 0, .55)` | Text color of selector buttons. |
 | `--app-datepicker-separator-color` | `#ddd` | Separator color between selector and calendar. |
 | `--app-datepicker-weekday-color` | `rgba(0, 0, 0, .55)` | Text color of weekday. |

src/datepicker-dialog.ts

@@ -83,8 +83,8 @@ export class DatepickerDialog extends LitElement {
       }
 
       .datepicker {
-        --app-datepicker-border-bottom-left-radius: 0;
-        --app-datepicker-border-bottom-right-radius: 0;
+        --app-datepicker-border-top-left-radius: 8px;
+        --app-datepicker-border-top-right-radius: 8px;
       }
 
       .actions-container {

src/datepicker.ts

@@ -64,10 +64,10 @@ export class Datepicker extends LitElement {
       background-color: var(--app-datepicker-bg-color, #fff);
       color: var(--app-datepicker-color, #000);
       border-radius:
-        var(--app-datepicker-border-top-left-radius, 8px)
-        var(--app-datepicker-border-top-right-radius, 8px)
-        var(--app-datepicker-border-bottom-right-radius, 8px)
-        var(--app-datepicker-border-bottom-left-radius, 8px);
+        var(--app-datepicker-border-top-left-radius, 0)
+        var(--app-datepicker-border-top-right-radius, 0)
+        var(--app-datepicker-border-bottom-right-radius, 0)
+        var(--app-datepicker-border-bottom-left-radius, 0);
       contain: content;
       overflow: hidden;
     }
@@ -193,6 +193,20 @@ export class Datepicker extends LitElement {
     .year-list-view__full-list {
       max-height: calc(48px * 7);
       overflow-y: auto;
+
+      scrollbar-color: var(--app-datepicker-scrollbar-thumb-bg-color, rgba(0, 0, 0, .35)) rgba(0, 0, 0, 0);
+      scrollbar-width: thin;
+    }
+    .year-list-view__full-list::-webkit-scrollbar {
+      width: 8px;
+      background-color: rgba(0, 0, 0, 0);
+    }
+    .year-list-view__full-list::-webkit-scrollbar-thumb {
+      background-color: var(--app-datepicker-scrollbar-thumb-bg-color, rgba(0, 0, 0, .35));
+      border-radius: 50px;
+    }
+    .year-list-view__full-list::-webkit-scrollbar-thumb:hover {
+      background-color: var(--app-datepicker-scrollbar-thumb-hover-bg-color, rgba(0, 0, 0, .5));
     }
 
     .calendar-weekdays > th,

src/tests/app-datepicker-dialog/initial-render.spec.ts

@@ -103,21 +103,30 @@ describe(`${DATEPICKER_DIALOG_NAME}::initial_render`, () => {
     });
 
     it(`renders today's date`, async () => {
-      const now = new Date();
-      const today =
-        [`${now.getFullYear()}`]
-          .concat(
-            [1 + now.getMonth(), now.getDate()].map(n => `0${n}`.slice(-2))
-          )
-          .join('-');
+      type A = [string, string];
 
-      const prop: string = await browser.executeAsync(async (a, done) => {
+      const [
+        prop,
+        todayValue,
+      ]: A = await browser.executeAsync(async (a, done) => {
         const n = document.body.querySelector<DatepickerDialog>(a)!;
 
-        done(n.value);
+        /**
+         * NOTE: Get the today's date from the browser instead of
+         * from the environment where the testing command is run.
+         */
+        const now = new Date();
+        const today = [`${now.getFullYear()}`]
+          .concat([1 + now.getMonth(), now.getDate()].map(o => `0${o}`.slice(-2)))
+          .join('-');
+
+        done([
+          n.value,
+          today,
+        ] as A);
       }, DATEPICKER_DIALOG_NAME);
 
-      strictEqual(prop, today);
+      strictEqual(prop, todayValue);
     });
 
     it(`renders year list view`, async () => {

src/tests/app-datepicker/events.spec.ts

@@ -16,19 +16,29 @@ describe('events', () => {
   });
 
   it(`fires 'datepicker-first-updated'`, async () => {
-    type A = [string, string];
+    type A = [string, string, string];
 
     const resultValues: string[] = [];
     const resultContents: string[] = [];
+    let todayDateValue: string = '';
 
     /**
      * This ensures the datepicker returns the correct first focusable element
      * when it renders in inline mode and in normal mode.
      */
     for (const inlineVal of [true, false]) {
-      const [val, content]: A = await browser.executeAsync(async (a, b, done) => {
+      const [val, todayVal, content]: A = await browser.executeAsync(async (a, b, done) => {
         const n: Datepicker = document.createElement(a)!;
 
+        /**
+         * NOTE: Get the today's date from the browser instead of
+         * from the environment where the testing command is run.
+         */
+        const now = new Date();
+        const today = [`${now.getFullYear()}`]
+          .concat([1 + now.getMonth(), now.getDate()].map(o => `0${o}`.slice(-2)))
+          .join('-');
+
         const firstUpdated: Promise<A> = new Promise((yay) => {
           let timer = -1;
 
@@ -43,12 +53,13 @@ describe('events', () => {
             clearTimeout(timer);
             yay([
               value,
+              today,
               `${elementTag}${selectorCls ? `.${selectorCls}` : ''}`,
             ] as A);
             n.removeEventListener('datepicker-first-updated', handler);
           });
 
-          timer = window.setTimeout(() => yay(['', '']), 15e3);
+          timer = window.setTimeout(() => yay(['', '', '']), 15e3);
         });
 
         n.min = '2000-01-01';
@@ -67,14 +78,10 @@ describe('events', () => {
 
       resultValues.push(val);
       resultContents.push(content);
+      todayDateValue = todayVal;
     }
 
-    const todayDate = new Date();
-    const fy = todayDate.getFullYear();
-    const m = todayDate.getMonth();
-    const d = todayDate.getDate();
-
-    allStrictEqual(resultValues, `${fy}-${`0${1 + m}`.slice(-2)}-${`0${d}`.slice(-2)}`);
+    allStrictEqual(resultValues, todayDateValue);
     deepStrictEqual(resultContents, [
       `button.btn__month-selector`,
       `button.btn__year-selector`,

src/tests/app-datepicker/initial-render.spec.ts

@@ -97,26 +97,40 @@ describe('initial render', () => {
     });
 
     it(`renders today's date`, async () => {
-      const now = new Date();
-      const formattedDate = Intl.DateTimeFormat('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      }).format(now);
-
-      const todayDateContent: string = await browser.executeAsync(async (a, b, done) => {
+      type A = [string, string, number];
+
+      const [
+        todayDateContent,
+        dateLabel,
+        calendarDay,
+      ]: A = await browser.executeAsync(async (a, b, done) => {
         const n = document.body.querySelector<Datepicker>(a)!;
         const n2 = n.shadowRoot!.querySelector<HTMLTableCellElement>(b)!;
 
-        done(n2.outerHTML);
+        /**
+         * NOTE: Get the today's date from the browser instead of
+         * from the environment where the testing command is run.
+         */
+        const now = new Date();
+        const formattedDate = Intl.DateTimeFormat('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        }).format(now);
+
+        done([
+          n2.outerHTML,
+          formattedDate,
+          now.getDate(),
+        ] as A);
       }, DATEPICKER_NAME, ['.day--today']);
 
       strictEqual(cleanHtml(todayDateContent, {
         showToday: true,
         showFocused: false,
       }), prettyHtml(`
-      <td class="full-calendar__day day--today" aria-disabled="false" aria-label="${formattedDate}" aria-selected="false">
-        <div class="calendar-day">${now.getDate()}</div>
+      <td class="full-calendar__day day--today" aria-disabled="false" aria-label="${dateLabel}" aria-selected="false">
+        <div class="calendar-day">${calendarDay}</div>
       </td>
       `));
     });

src/tests/index.html

@@ -64,6 +64,37 @@
         margin: 0;
         padding: 0;
       }
+
+      /* @media (prefers-color-scheme: dark) {
+        main > section {
+          background-color: #111;
+          color: #f5f5f5;
+        }
+
+        app-datepicker,
+        app-datepicker-dialog,
+        mwc-date-picker {
+          --app-datepicker-bg-color: #000;
+          --app-datepicker-color: #f5f5f5;
+          --app-datepicker-disabled-day-color: rgba(255, 255, 255, .55);
+          --app-datepicker-focused-day-color: #000;
+          --app-datepicker-focused-year-bg-color: #fff;
+          --app-datepicker-selector-color: rgba(255, 255, 255, .55);
+          --app-datepicker-separator-color: #000;
+          --app-datepicker-weekday-color: rgba(255, 255, 255, .55);
+          --app-datepicker-scrollbar-thumb-bg-color: rgba(255, 255, 255, .35);
+          --app-datepicker-scrollbar-thumb-hover-bg-color: rgba(255, 255, 255, .55);
+        }
+
+        mwc-date-picker {
+          --mwc-date-picker-background-color: #000;
+          --mwc-date-picker-scrim-color: rgba(255, 255, 255, .32);
+        }
+
+        p > code {
+          color: #569fff;
+        }
+      } */
     </style>
   </head>
 </html>