diff --git a/api-references.md b/api-references.md index a20250f0..e6371790 100644 --- a/api-references.md +++ b/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. | diff --git a/src/datepicker-dialog.ts b/src/datepicker-dialog.ts index 75106ed2..6f71960c 100644 --- a/src/datepicker-dialog.ts +++ b/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 { diff --git a/src/datepicker.ts b/src/datepicker.ts index cdb0b996..817f37a2 100644 --- a/src/datepicker.ts +++ b/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, diff --git a/src/tests/app-datepicker-dialog/initial-render.spec.ts b/src/tests/app-datepicker-dialog/initial-render.spec.ts index 80b8955e..2cd10474 100644 --- a/src/tests/app-datepicker-dialog/initial-render.spec.ts +++ b/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(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 () => { diff --git a/src/tests/app-datepicker/events.spec.ts b/src/tests/app-datepicker/events.spec.ts index ed854d51..d7037876 100644 --- a/src/tests/app-datepicker/events.spec.ts +++ b/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 = 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`, diff --git a/src/tests/app-datepicker/initial-render.spec.ts b/src/tests/app-datepicker/initial-render.spec.ts index 2f352920..b646d463 100644 --- a/src/tests/app-datepicker/initial-render.spec.ts +++ b/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(a)!; const n2 = n.shadowRoot!.querySelector(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(` - -
${now.getDate()}
+ +
${calendarDay}
`)); }); diff --git a/src/tests/index.html b/src/tests/index.html index f632c8e8..762f029a 100644 --- a/src/tests/index.html +++ b/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; + } + } */ diff --git a/src/tests/snapshots/app-datepicker-dialog/attributes-0-MicrosoftEdge.png b/src/tests/snapshots/app-datepicker-dialog/attributes-0-MicrosoftEdge.png index 904b1b7f..ab24f7a4 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/attributes-0-MicrosoftEdge.png and b/src/tests/snapshots/app-datepicker-dialog/attributes-0-MicrosoftEdge.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/attributes-0-Safari.png b/src/tests/snapshots/app-datepicker-dialog/attributes-0-Safari.png index 0b4dae2b..5310ff10 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/attributes-0-Safari.png and b/src/tests/snapshots/app-datepicker-dialog/attributes-0-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/attributes-0-chrome.png b/src/tests/snapshots/app-datepicker-dialog/attributes-0-chrome.png index 821ef79c..48b3d0ab 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/attributes-0-chrome.png and b/src/tests/snapshots/app-datepicker-dialog/attributes-0-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/attributes-0-firefox.png b/src/tests/snapshots/app-datepicker-dialog/attributes-0-firefox.png index aa0cf1c9..fee986b5 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/attributes-0-firefox.png and b/src/tests/snapshots/app-datepicker-dialog/attributes-0-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/attributes-1-Safari.png b/src/tests/snapshots/app-datepicker-dialog/attributes-1-Safari.png index e9d192b1..f0d92c2d 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/attributes-1-Safari.png and b/src/tests/snapshots/app-datepicker-dialog/attributes-1-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/attributes-1-chrome.png b/src/tests/snapshots/app-datepicker-dialog/attributes-1-chrome.png index 9c06d107..995e5222 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/attributes-1-chrome.png and b/src/tests/snapshots/app-datepicker-dialog/attributes-1-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-Safari.png b/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-Safari.png index b79b6893..8b90356b 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-Safari.png and b/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-chrome.png b/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-chrome.png index b715d5d7..ce82a52e 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-chrome.png and b/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-firefox.png b/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-firefox.png index 1e889945..68aaae28 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-firefox.png and b/src/tests/snapshots/app-datepicker-dialog/initial-render-calendar-view-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/properties-0-Safari.png b/src/tests/snapshots/app-datepicker-dialog/properties-0-Safari.png index b79b6893..8b90356b 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/properties-0-Safari.png and b/src/tests/snapshots/app-datepicker-dialog/properties-0-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/properties-0-chrome.png b/src/tests/snapshots/app-datepicker-dialog/properties-0-chrome.png index b715d5d7..ce82a52e 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/properties-0-chrome.png and b/src/tests/snapshots/app-datepicker-dialog/properties-0-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/properties-0-firefox.png b/src/tests/snapshots/app-datepicker-dialog/properties-0-firefox.png index 9716e71c..68aaae28 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/properties-0-firefox.png and b/src/tests/snapshots/app-datepicker-dialog/properties-0-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker-dialog/properties-1-chrome.png b/src/tests/snapshots/app-datepicker-dialog/properties-1-chrome.png index 9c06d107..995e5222 100644 Binary files a/src/tests/snapshots/app-datepicker-dialog/properties-1-chrome.png and b/src/tests/snapshots/app-datepicker-dialog/properties-1-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/attributes-0-MicrosoftEdge.png b/src/tests/snapshots/app-datepicker/attributes-0-MicrosoftEdge.png index 9e0cd93f..7f4530df 100644 Binary files a/src/tests/snapshots/app-datepicker/attributes-0-MicrosoftEdge.png and b/src/tests/snapshots/app-datepicker/attributes-0-MicrosoftEdge.png differ diff --git a/src/tests/snapshots/app-datepicker/attributes-0-Safari.png b/src/tests/snapshots/app-datepicker/attributes-0-Safari.png index 88d28cc8..19f97242 100644 Binary files a/src/tests/snapshots/app-datepicker/attributes-0-Safari.png and b/src/tests/snapshots/app-datepicker/attributes-0-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker/attributes-0-chrome.png b/src/tests/snapshots/app-datepicker/attributes-0-chrome.png index eb49e775..18ab9d56 100644 Binary files a/src/tests/snapshots/app-datepicker/attributes-0-chrome.png and b/src/tests/snapshots/app-datepicker/attributes-0-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/attributes-0-firefox.png b/src/tests/snapshots/app-datepicker/attributes-0-firefox.png index f056075a..874705bf 100644 Binary files a/src/tests/snapshots/app-datepicker/attributes-0-firefox.png and b/src/tests/snapshots/app-datepicker/attributes-0-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker/attributes-1-chrome.png b/src/tests/snapshots/app-datepicker/attributes-1-chrome.png index 6496e69b..53f9d9a3 100644 Binary files a/src/tests/snapshots/app-datepicker/attributes-1-chrome.png and b/src/tests/snapshots/app-datepicker/attributes-1-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/attributes-1-firefox.png b/src/tests/snapshots/app-datepicker/attributes-1-firefox.png index 8046c251..f2160f26 100644 Binary files a/src/tests/snapshots/app-datepicker/attributes-1-firefox.png and b/src/tests/snapshots/app-datepicker/attributes-1-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-MicrosoftEdge.png b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-MicrosoftEdge.png index 62ebe1f9..fb04c9a1 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-MicrosoftEdge.png and b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-MicrosoftEdge.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-Safari.png b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-Safari.png index ce7a4be6..49b3f004 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-Safari.png and b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-chrome.png b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-chrome.png index b502da50..397705c4 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-chrome.png and b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-firefox.png b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-firefox.png index 3402f98d..ff45ba7c 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-calendar-view-firefox.png and b/src/tests/snapshots/app-datepicker/initial-render-calendar-view-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-year-view-MicrosoftEdge.png b/src/tests/snapshots/app-datepicker/initial-render-year-view-MicrosoftEdge.png index 123e16cb..caaf27f6 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-year-view-MicrosoftEdge.png and b/src/tests/snapshots/app-datepicker/initial-render-year-view-MicrosoftEdge.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-year-view-Safari.png b/src/tests/snapshots/app-datepicker/initial-render-year-view-Safari.png index b9f8e43c..ac4febec 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-year-view-Safari.png and b/src/tests/snapshots/app-datepicker/initial-render-year-view-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-year-view-chrome.png b/src/tests/snapshots/app-datepicker/initial-render-year-view-chrome.png index 79bf2ac7..90645cc9 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-year-view-chrome.png and b/src/tests/snapshots/app-datepicker/initial-render-year-view-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/initial-render-year-view-firefox.png b/src/tests/snapshots/app-datepicker/initial-render-year-view-firefox.png index e5243020..1a0d0b68 100644 Binary files a/src/tests/snapshots/app-datepicker/initial-render-year-view-firefox.png and b/src/tests/snapshots/app-datepicker/initial-render-year-view-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker/properties-0-MicrosoftEdge.png b/src/tests/snapshots/app-datepicker/properties-0-MicrosoftEdge.png index 0c1ca4b1..f29c26d0 100644 Binary files a/src/tests/snapshots/app-datepicker/properties-0-MicrosoftEdge.png and b/src/tests/snapshots/app-datepicker/properties-0-MicrosoftEdge.png differ diff --git a/src/tests/snapshots/app-datepicker/properties-0-Safari.png b/src/tests/snapshots/app-datepicker/properties-0-Safari.png index 3fe634ba..0c9769ce 100644 Binary files a/src/tests/snapshots/app-datepicker/properties-0-Safari.png and b/src/tests/snapshots/app-datepicker/properties-0-Safari.png differ diff --git a/src/tests/snapshots/app-datepicker/properties-0-chrome.png b/src/tests/snapshots/app-datepicker/properties-0-chrome.png index 5ee96c30..64d2565d 100644 Binary files a/src/tests/snapshots/app-datepicker/properties-0-chrome.png and b/src/tests/snapshots/app-datepicker/properties-0-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/properties-0-firefox.png b/src/tests/snapshots/app-datepicker/properties-0-firefox.png index 80c30e36..7450d871 100644 Binary files a/src/tests/snapshots/app-datepicker/properties-0-firefox.png and b/src/tests/snapshots/app-datepicker/properties-0-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker/properties-1-chrome.png b/src/tests/snapshots/app-datepicker/properties-1-chrome.png index 6496e69b..53f9d9a3 100644 Binary files a/src/tests/snapshots/app-datepicker/properties-1-chrome.png and b/src/tests/snapshots/app-datepicker/properties-1-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/properties-1-firefox.png b/src/tests/snapshots/app-datepicker/properties-1-firefox.png index 8046c251..f2160f26 100644 Binary files a/src/tests/snapshots/app-datepicker/properties-1-firefox.png and b/src/tests/snapshots/app-datepicker/properties-1-firefox.png differ diff --git a/src/tests/snapshots/app-datepicker/timezones-chrome.png b/src/tests/snapshots/app-datepicker/timezones-chrome.png index e30ebfdb..38d73471 100644 Binary files a/src/tests/snapshots/app-datepicker/timezones-chrome.png and b/src/tests/snapshots/app-datepicker/timezones-chrome.png differ diff --git a/src/tests/snapshots/app-datepicker/timezones-firefox.png b/src/tests/snapshots/app-datepicker/timezones-firefox.png index 30178d6e..2d55576f 100644 Binary files a/src/tests/snapshots/app-datepicker/timezones-firefox.png and b/src/tests/snapshots/app-datepicker/timezones-firefox.png differ