style: update year grid button style on hover, focus, today, selected

motss · May 26, 2021 · b99105d · b99105d
1 parent 854880f
commit b99105d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/src/month-calendar/stylings.ts b/src/month-calendar/stylings.ts
@@ -89,7 +89,7 @@ td {
   opacity: 1;
 }
 .calendar-day.day--today::after {
-  border-color: var(--date-picker-today-color, var(--base-selected-background-color));
+  border-color: var(--date-picker-today-color, var(--base-today-color));
 }
 .calendar-day:focus::after {
   border-color: var(--date-picker-focus-color, var(--base-focus-color));

diff --git a/src/stylings.ts b/src/stylings.ts
@@ -7,9 +7,10 @@ export const baseStyling = css`
   --base-focus-color: #b5b5b5;
   --base-hover-color: #b5b5b5;
   --base-primary-color: #000;
-  --base-selected-color: #fff;
   --base-selected-background-color: #1d1d1d;
+  --base-selected-color: #fff;
   --base-text-color: #000;
+  --base-today-color: #000;
   --base-weekday-color: #8c8c8c;
 }
 `;

diff --git a/src/year-grid/stylings.ts b/src/year-grid/stylings.ts
@@ -31,11 +31,31 @@ export const yearGridStyling = css`
   color: var(--year-grid-color, var(--base-selected-color));
 }
 
+.year-grid > .year-grid-button:focus::before,
+.year-grid > .year-grid-button:hover::before,
+.year-grid > .year-grid-button.year--today:not([aria-selected="true"])::after {
+  border-style: solid;
+  border-width: 1px;
+}
+
 .year-grid > .year-grid-button::before {
   content: attr(data-year);
   position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 26px;
+  border-radius: 50px;
   z-index: 1;
 }
+.year-grid > .year-grid-button:focus::before {
+  border-color: var(--year-grid-focus-color, var(--base-focus-color));
+}
+.year-grid > .year-grid-button:hover::before {
+  border-color: var(--year-grid-hover-color, var(--base-hover-color));
+}
+
 .year-grid > .year-grid-button::after {
   content: '';
   position: absolute;
@@ -46,15 +66,12 @@ export const yearGridStyling = css`
 .year-grid > .year-grid-button[aria-selected="true"]::after {
   background-color: var(--year-grid-background-color, var(--base-selected-background-color));
 }
-.year-grid > .year-grid-button:focus::after,
-.year-grid > .year-grid-button:hover::after {
-  border-style: solid;
-  border-width: 1px;
-}
-.year-grid > .year-grid-button:focus::after {
-  border-color: var(--year-grid-focus-color, var(--base-focus-color));
+.year-grid > .year-grid-button.year--today:not([aria-selected="true"])::after {
+  border-color: var(--year-grid-today-color, var(--base-today-color));
 }
-.year-grid > .year-grid-button:hover::after {
-  border-color: var(--year-grid-hover-color, var(--base-hover-color));
+.year-grid > .year-grid-button.year--today:not([aria-selected="true"]):focus::after,
+.year-grid > .year-grid-button.year--today:not([aria-selected="true"]):hover::after {
+  width: 48px;
+  height: 24px;
 }
 `;
diff --git a/src/year-grid/year-grid.ts b/src/year-grid/year-grid.ts
@@ -5,7 +5,7 @@ import { queryAsync } from '@lit/reactive-element/decorators/query-async.js';
 import type { TemplateResult } from 'lit';
 import { nothing } from 'lit';
 import { html, LitElement } from 'lit';
-import { toUTCDate } from 'nodemod/dist/calendar/helpers/to-utc-date.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { keyCodesRecord, MAX_DATE, yearGridKeyCodeSet } from '../constants.js';
 import { dispatchCustomEvent } from '../helpers/dispatch-custom-event.js';
@@ -32,6 +32,7 @@ export class YearGrid extends LitElement implements YearGridProperties {
   ];
 
   #selectedYear: number;
+  #todayYear: number;
 
   constructor() {
     super();
@@ -45,6 +46,7 @@ export class YearGrid extends LitElement implements YearGridProperties {
       min: todayDate,
     };
     this.#selectedYear = todayDate.getUTCFullYear();
+    this.#todayYear = todayDate.getUTCFullYear();
   }
 
   protected shouldUpdate(): boolean {
@@ -81,17 +83,18 @@ export class YearGrid extends LitElement implements YearGridProperties {
     return html`
     <div class="year-grid" @click=${this.#updateYear} @keyup=${this.#updateYear}>${
       yearList.map((year) => {
-        const yearDate = toUTCDate(year, 1, 1);
-        const yearLabel = yearFormat(yearDate);
-        const fullYear = yearDate.getUTCFullYear();
+        const yearLabel = yearFormat(year);
         // FIXME: To update tabindex
-        const isYearSelected = fullYear === date.getUTCFullYear();
+        const isYearSelected = year === date.getUTCFullYear();
 
         return html`
         <button
-          class="year-grid-button"
+          class=${classMap({
+            'year-grid-button': true,
+            'year--today': this.#todayYear === year,
+          })}
           tabindex=${isYearSelected ? '0' : '-1'}
-          data-year=${fullYear}
+          data-year=${year}
           label=${yearLabel}
           aria-selected=${isYearSelected ? 'true' : 'false'}
         ></button>