fix: use correct styles for week numbers (#3544) (#3547)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Mar 11, 2022 · 412971e · 412971e
1 parent dd2aa67
commit 412971e
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 27 deletions.
diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/src/vaadin-month-calendar.js
@@ -42,19 +42,11 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
           display: flex;
         }
 
-        [part='week-numbers'] {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          flex-shrink: 0;
-        }
-
         [part='date'] {
           outline: none;
         }
 
         [part='week-number'][hidden],
-        [part='week-numbers'][hidden],
         [part='weekday'][hidden] {
           display: none;
         }
@@ -69,7 +61,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         }
 
         [part='weekday']:empty,
-        [part='week-numbers'] {
+        [part='week-number'] {
           width: 12.5%;
           flex-shrink: 0;
         }

diff --git a/packages/date-picker/test/visual/lumo/date-picker.test.js b/packages/date-picker/test/visual/lumo/date-picker.test.js
@@ -99,12 +99,26 @@ describe('date-picker', () => {
         await visualDiff(div, `${dir}-prefix`);
       });
 
-      it('dropdown', async () => {
-        element.value = '2000-01-01';
-        element.opened = true;
-        div.style.height = element.offsetHeight + element.$.overlay.$.overlay.offsetHeight + 'px';
-        div.style.width = element.$.overlay.$.overlay.offsetWidth + 'px';
-        await visualDiff(div, `${dir}-dropdown`);
+      describe('dropdown', () => {
+        function openOverlay() {
+          element.opened = true;
+          div.style.height = element.offsetHeight + element.$.overlay.$.overlay.offsetHeight + 'px';
+          div.style.width = element.$.overlay.$.overlay.offsetWidth + 'px';
+        }
+
+        it('default', async () => {
+          element.value = '2000-01-01';
+          openOverlay();
+          await visualDiff(div, `${dir}-dropdown`);
+        });
+
+        it('week numbers', async () => {
+          element.value = '2000-01-01';
+          element.showWeekNumbers = true;
+          element.i18n.firstDayOfWeek = 1;
+          openOverlay();
+          await visualDiff(div, `${dir}-week-numbers`);
+        });
       });
     });
   });

diff --git a/...e-picker/test/visual/lumo/screenshots/date-picker/baseline/ltr-week-numbers.png b/...e-picker/test/visual/lumo/screenshots/date-picker/baseline/ltr-week-numbers.png
diff --git a/...e-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-week-numbers.png b/...e-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-week-numbers.png
diff --git a/packages/date-picker/test/visual/material/date-picker.test.js b/packages/date-picker/test/visual/material/date-picker.test.js
@@ -99,12 +99,26 @@ describe('date-picker', () => {
         await visualDiff(div, `${dir}-prefix`);
       });
 
-      it('dropdown', async () => {
-        element.value = '2000-01-01';
-        element.opened = true;
-        div.style.height = element.offsetHeight + element.$.overlay.$.overlay.offsetHeight + 'px';
-        div.style.width = element.$.overlay.$.overlay.offsetWidth + 'px';
-        await visualDiff(div, `${dir}-dropdown`);
+      describe('dropdown', () => {
+        function openOverlay() {
+          element.opened = true;
+          div.style.height = element.offsetHeight + element.$.overlay.$.overlay.offsetHeight + 'px';
+          div.style.width = element.$.overlay.$.overlay.offsetWidth + 'px';
+        }
+
+        it('default', async () => {
+          element.value = '2000-01-01';
+          openOverlay();
+          await visualDiff(div, `${dir}-dropdown`);
+        });
+
+        it('week numbers', async () => {
+          element.value = '2000-01-01';
+          element.showWeekNumbers = true;
+          element.i18n.firstDayOfWeek = 1;
+          openOverlay();
+          await visualDiff(div, `${dir}-week-numbers`);
+        });
       });
     });
   });

diff --git a/...cker/test/visual/material/screenshots/date-picker/baseline/ltr-week-numbers.png b/...cker/test/visual/material/screenshots/date-picker/baseline/ltr-week-numbers.png
diff --git a/...cker/test/visual/material/screenshots/date-picker/baseline/rtl-week-numbers.png b/...cker/test/visual/material/screenshots/date-picker/baseline/rtl-week-numbers.png
diff --git a/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js b/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js
@@ -33,7 +33,7 @@ registerStyles(
 
     [part='weekdays'],
     [part='weekday'],
-    [part='week-numbers'] {
+    [part='week-number'] {
       font-size: var(--lumo-font-size-xxs);
       line-height: 1;
       color: var(--lumo-secondary-text-color);
@@ -43,9 +43,8 @@ registerStyles(
       margin-bottom: var(--lumo-space-s);
     }
 
-    /* TODO should have part="week-number" for the cell in weekdays-container */
     [part='weekday']:empty,
-    [part='week-numbers'] {
+    [part='week-number'] {
       width: var(--lumo-size-xs);
     }
 
@@ -107,8 +106,7 @@ registerStyles(
       }
     }
 
-    /* TODO should not rely on the role attribute */
-    [part='date'][role='button']:not([disabled]):not([selected]):hover::before {
+    [part='date']:not(:empty):not([disabled]):not([selected]):hover::before {
       background-color: var(--lumo-primary-color-10pct);
     }
 
@@ -130,7 +128,7 @@ registerStyles(
         display: none;
       }
 
-      [part='date'][role='button']:not([disabled]):active::before {
+      [part='date']:not(:empty):not([disabled]):active::before {
         display: block;
       }