fix: use correct styles for week number cells (#3734) (#3736)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Apr 26, 2022 · 485eef6 · 485eef6
1 parent 9a70ceb
commit 485eef6
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 14 deletions.
diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/src/vaadin-month-calendar.js
@@ -23,18 +23,8 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         }
 
         #monthGrid {
-          display: block;
-        }
-
-        #monthGrid thead,
-        #monthGrid tbody {
-          display: block;
           width: 100%;
-        }
-
-        [part='weekdays'] {
-          display: flex;
-          flex-grow: 1;
+          border-collapse: collapse;
         }
 
         #days-container tr,
@@ -53,9 +43,7 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
 
         [part='weekday'],
         [part='date'] {
-          display: block;
-          /* Would use calc(100% / 7) but it doesn't work nice on IE */
-          width: 14.285714286%;
+          width: calc(100% / 7);
           padding: 0;
           font-weight: normal;
         }
@@ -64,6 +52,12 @@ class MonthCalendar extends FocusMixin(ThemableMixin(PolymerElement)) {
         [part='week-number'] {
           width: 12.5%;
           flex-shrink: 0;
+          padding: 0;
+        }
+
+        :host([week-numbers]) [part='weekday']:not(:empty),
+        :host([week-numbers]) [part='date'] {
+          width: 12.5%;
         }
       </style>
 

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/...e-picker/test/visual/material/screenshots/date-picker/baseline/ltr-dropdown.png b/...e-picker/test/visual/material/screenshots/date-picker/baseline/ltr-dropdown.png
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/...e-picker/test/visual/material/screenshots/date-picker/baseline/rtl-dropdown.png b/...e-picker/test/visual/material/screenshots/date-picker/baseline/rtl-dropdown.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
@@ -68,6 +68,11 @@ registerStyles(
       cursor: var(--lumo-clickable-cursor);
     }
 
+    :host([week-numbers]) [part='weekday']:not(:empty),
+    :host([week-numbers]) [part='date'] {
+      width: calc((100% - var(--lumo-size-xs)) / 7);
+    }
+
     /* Today date */
 
     [part='date'][today] {