From 5be3520cff678be8290d699ef3228f98296cae06 Mon Sep 17 00:00:00 2001 From: "Bajohr, Rayk" Date: Mon, 20 Apr 2026 07:37:32 +0200 Subject: [PATCH] refactor(datepicker): use relative units for datepicker sizing --- ...t-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...e-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...s-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...e-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...h-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...r-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...r-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...h-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...r-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...e-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...n-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...1-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...2-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...1-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...2-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...r-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...n-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- ...n-element-examples-chromium-dark-linux.png | 4 +- ...-element-examples-chromium-light-linux.png | 4 +- .../si-day-selection.component.html | 8 +-- .../components/si-day-selection.component.ts | 5 +- .../si-month-selection.component.html | 3 +- .../si-month-selection.component.ts | 5 +- .../si-year-selection.component.html | 3 +- .../components/si-year-selection.component.ts | 5 +- .../si-datepicker-overlay.component.scss | 3 +- .../datepicker/si-datepicker.component.scss | 55 ++++++------------- 44 files changed, 112 insertions(+), 119 deletions(-) diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-dark-linux.png index 3c00717142..09ad8701e3 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:af2f4b8eedb03610d26e2b8c0b3db937349605c1919ac3cc597030e897cb33f9 -size 37115 +oid sha256:27ac33c62e7ef893b6475d00edd561cd72b93cfabcae87efbcc14c1b4519b773 +size 37081 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-light-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-light-linux.png index 5a0ca98366..5a675e2f0d 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--default-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f301c8539b6bf0fd2459242d898887fefe263dfdb488ec72ef467fd1ae4d4bf4 -size 35393 +oid sha256:12924a93a3644922e4d7dc8bb8b98e81d154e7ded941a866223da5a6780de6b0 +size 35311 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-dark-linux.png index d68fe0fd2f..71a6346477 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3bf72b82b771e556e20d8360e72a935016709709885b717ef66c79864a7f50d9 -size 26026 +oid sha256:c5d3589819368224609af78ab7fcffcc7ea364d62ccdcc382fb3d364947ef748 +size 26095 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-light-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-light-linux.png index 222f7c2e3a..70f1f3bd6f 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1b6dbba7cfd77ed93dc73bcc45306ce98ec21b5634bbc501f1e6729127b4ba17 -size 24972 +oid sha256:4ff43e849d11f744cd4127e4126ee53ea322b43055112d901f348772f0cb5a36 +size 25091 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-dark-linux.png index 3498e52830..f38e79988c 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e2bf3a7ea03da40574c8e4a95d7711a1d39c90f6591bd7c91181834b704914e7 -size 19367 +oid sha256:97b9208ca0737d75b7132894010e9bce2b431c5007a5b7b16a5757e1603502ad +size 20340 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-light-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-light-linux.png index 39894431ec..1581780bbd 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:76bba0100f906adf2c517606a0c09dfa1329ad9f7e323b3154e07a2269c7edd5 -size 18721 +oid sha256:705538f87fa7ebfc1ad5c2bed3cd8e3ab6ad8a6b53d3c19723e38025b9039f82 +size 19622 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-dark-linux.png index a58cddba88..40d4dea35a 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a45eeee19c2599c03ad1143cdf7fe76fe4926253340abe10d6315bd841fb5a5c -size 26464 +oid sha256:2e789b7fa9077f9ff74fd0c4e3a9830b48e33e7ded366ccbaa4f535d1c28d2ce +size 26476 diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-light-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-light-linux.png index 73b502bfb0..cf6e94ada2 100644 --- a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--range-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a77e83cc58200bd6160fe89c16b6e795eeede3bb9494e14b28835dcaf1fea676 -size 25064 +oid sha256:45d5c28489ae26549999d9d7bba7f332ce4d43475f3a471cb109c28464857e4d +size 25046 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-dark-linux.png index b631458604..7a2bafa240 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:35768b0b8d106d2cd20ec695f2d34b81dca2a019d881a93f3ad4315c6ba345ae -size 43413 +oid sha256:f4d1cbfb6370ea82975f90b4bc6a0b898daeef146a7a4a3954c8eababb670c63 +size 43149 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-light-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-light-linux.png index f7fd767234..c23ec97171 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--month-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:669081d557b4980ff1e6148106fb5fc5dbf8b880989d9307fdb85fa199d71048 -size 42024 +oid sha256:0d66bb20174ef1b1c9bb7fabd9aa8575365aa11c9d213de98f4901b5992aaee3 +size 41889 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-dark-linux.png index 4a7af4361e..c8f694bdf0 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:57b1d8c2ed12dc75590ab034b55325646acf9bed61b2d6138162e11934369a0f -size 40480 +oid sha256:bbe49688acef6930cdc80952b0bcd67aff35ffff5945e5fc6ba1c2e2b591b3ff +size 42399 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-light-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-light-linux.png index fa45fd621c..9346abe238 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker--year-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:042ffb84cb169b9ea36b57fe66389c68cba252d8faa62e40bc186ef83710b653 -size 39522 +oid sha256:f8e134d7efc35ad0556207b7ab461ce32c918fe40f1c9d830635253ac4403da6 +size 41369 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-dark-linux.png index 58798a8784..5880e10a4a 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7be1aba74223032e2091943bb60f3447c95f1b9106ccfd977ad9e46652cfcb2d -size 35513 +oid sha256:75f1b0d3d57c3e5dcc936d854b2681159f9540744ac49a499dcaacfdee22eb11 +size 35511 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-light-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-light-linux.png index 6cd6f6bf0a..2df3f39ef8 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3e403c5e1d2dfead5a1de4556cc57bfa3f44c8a8f7cf01ac8fff37dbf81c94af -size 34384 +oid sha256:68fd2cbacaf49c834e9ae86b07d6e2601386e9d90f9673299e6f1d9cc9be26e9 +size 34331 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-dark-linux.png index df8ff1c83e..5fb07ba79c 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3f6768a94b115e622e0cb623714b90d49f92f1e8afb153ed99515f0743e01953 -size 38648 +oid sha256:f7251b7f78d7e6ffe0f8d4a37d317b9c861448b8b3965c9de339deb803e49486 +size 38482 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-light-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-light-linux.png index a713ea1618..a1917e03bb 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--month-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:79b2c30b378111a7bc0860902a0f330d5b823879e2718a582dda64e2c713062c -size 37498 +oid sha256:259f4f35ddb9c6f2703d9bd9c3883de945a93eb78c1edf2f6025ae819e752e57 +size 37485 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-dark-linux.png index df199e3cf7..99b81b9ef9 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7fc0ace4190b47eb538f9dae4b62d8ded4e7f50e916c8bef4cd612b7fe696d7e -size 35009 +oid sha256:c3ef6cb1034e36b389a98cba3eb471486f486465b2d36f075775bb10948a6452 +size 37059 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-light-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-light-linux.png index 34e5595d72..3a575b5c45 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time--year-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:79d43608fea32dbfb4d5368bfc131cc877d101242a8a79303a2d9dd08207a651 -size 34360 +oid sha256:cf6052cb3f340bc7f780388ddb67ce3ce6f3277c24101bf1529bdfea6b43da1d +size 36194 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-dark-linux.png index b6c7f619d9..f2ae6ee12e 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:55ff0030a3388fc26d1425e50451074816bed6e6c593b58faaa03002c3237de0 -size 27910 +oid sha256:7d88ae9d8989e8bd437ee9d4b2716ee0359b69eb871f615461035e56f55b8840 +size 27863 diff --git a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-light-linux.png b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-light-linux.png index 84b95f40d1..cba4656506 100644 --- a/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-datepicker.spec.ts-snapshots/si-datepicker--si-datepicker-no-time-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ca45f6e7c8001a5263b2d38e443400c21c48f75d6ea4375c0619e630d770a1a6 -size 27258 +oid sha256:1d90bff5ba08f5480dada04b476e43da2f1caf064cc0c4941d1da26399004ff9 +size 27181 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-dark-linux.png index b4f7e5103f..a9f517d79d 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0b1fe63f05fa4fd2d7c3ac02ad38059bd3fc45bb31e4246eb232367efa4a7fd2 -size 38697 +oid sha256:38e5ede75c81aee8c8644a5cf6423f074ee52804bd0f9ac39d16883434427ff5 +size 38479 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-light-linux.png index a1bd62f811..42adfb9747 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ec2d6b03c5136ec5f32696e8650ff5176f42ddf32bcd92d6d7fffaaa4d931f94 -size 38804 +oid sha256:6618489f8bc5507149d884691e00326734b8b39d09be5e2a0aaa40182949a58f +size 38689 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-dark-linux.png index 47cd237600..b220281394 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:962a0f76e4e84be72cffd076bac0c998abb2ac0befc5a5956e9aac1fa8042092 -size 54581 +oid sha256:e7e0b5f94de949cb344bb2a41040e915605c8282cd159677b8b0823b79ecadad +size 54548 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-light-linux.png index 3345207ef8..e1c84c668d 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:98147333b1712ea3047d7c54ea893c0e332718a60799dbe2551bb5b9b2bc3bfb -size 54362 +oid sha256:af614f609fb6112ea9c84116a1da80bd8db8a9eb3354a1273b72ddf95fc0cf0d +size 54351 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-dark-linux.png index ed4abe2cc1..e8bc59c1cb 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:57239c601bc08335f2568ce60a111e6d2728ee7bebfd06f79fb5f929cfcdd9b4 -size 58206 +oid sha256:7700d3277af48db8895f8701aaed65a3f7a521dc9d38a60b71ec3a5887746bcc +size 58241 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-light-linux.png index 3fb12b8f4a..52acefe4b2 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:05d63076a454904eac7f5d21e1cec80fe3c9145e7998d23d42366d4f9ccdd32e -size 58035 +oid sha256:fd258dd12e4daa5eda9f5d101fd1a85a99cb23acccb27b86e710ba18f7c56448 +size 58004 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-dark-linux.png index 2db63dd82f..d60ef2a846 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b1cf982d198f127d2c8bee57d73332870947a1903517b8303d59a5a099c8d31a -size 60713 +oid sha256:15fe316bfe2c3b378c013463206c74d67e3e9dc566cb1db321f14ff182285fd3 +size 60785 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-light-linux.png index 32491ab882..aa3ec9717d 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3a959d023ebc95556868d73869ef4f0b85a8bd6f9119d22d37d8def338a26245 -size 60336 +oid sha256:81122e1af83e0411e44fc71ff66981efe220def900a1a0ca5b1e6a0b06dadeab +size 60272 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-dark-linux.png index 7b4d2f8b95..31b5bc444c 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da8eb7b0b7215c05b92fe89012903b3a921ad404d26e06958e9408aa49552f20 -size 58080 +oid sha256:123eebf6f03c79ac2ea575f15acfa077ee13fa6363940c2a71d0bc7ae7790b2f +size 58184 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-light-linux.png index 1ebcbab3a6..1f52ea0dbc 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:95a30f41692f242e0226fa866f6063c96dcc267665278d1da296da537285b8e3 -size 58164 +oid sha256:8ce6210ae103a58a5418adb2900fcecb89c26be4de86711315072800bb96c440 +size 58092 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-dark-linux.png index edecc52ae3..118a24094d 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a106964e496fd918edc019d03492e560076478e3661dbff1f89f7393035c4b8f -size 55232 +oid sha256:e44e44fc9550c39483b4accddcd49f31830af6da9cd28e60e0e522a07944bd88 +size 55285 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-light-linux.png index 39560276b8..5fdc4fa0ca 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:39c95a6f7a18641264fe147e798c942709cacc67b61721af07e2f00362875ba3 -size 55113 +oid sha256:41d01fc832a8dac39368c866c35200cb95538721811349d78aeb6e2792c7c060 +size 55069 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-dark-linux.png index d8e4511eb2..c6059a55ac 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eea79b8dfc70b2d38c9de61b572b5b4bb2987d81c5b002a67996eae0e5b669eb -size 53614 +oid sha256:9ac8d416a1be47543255c0621f8dfd6df18a588336104269d2942e159b6adc30 +size 53553 diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-light-linux.png index 4bc1eae5b6..9e1beb29d0 100644 --- a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:dce8551eb3c23dff1937db7725a3277f4d8ccfb19c06fb31096047da8e62df08 -size 53454 +oid sha256:de59219e094854f4e0c1a04b9e39fa392c8ff7dacd73300ee8b3aa377c584402 +size 53444 diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-dark-linux.png index ea4ffea2e3..f5a8a5a16f 100644 --- a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:02417f05982f080a1db511d0aedfecd52f9c233a22dda96706930bd7456a8202 -size 34697 +oid sha256:b9d10b3dd9c549f03a19ce3d6397dda2f26a8f13665ab2f57e40308c006f3f2e +size 34589 diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-light-linux.png index a251131617..627dbf054c 100644 --- a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0154239f474dab1d6231631cf08b36ad2ca963d3f81366a4f4cfe6229fa1bc45 -size 34715 +oid sha256:e751f69c619dd5e91d2b9377f1d7b63b7f370becb96789fbbd00b17d76d31c0d +size 34670 diff --git a/projects/element-ng/datepicker/components/si-day-selection.component.html b/projects/element-ng/datepicker/components/si-day-selection.component.html index b192fcb274..6fbc6c9a33 100644 --- a/projects/element-ng/datepicker/components/si-day-selection.component.html +++ b/projects/element-ng/datepicker/components/si-day-selection.component.html @@ -8,7 +8,7 @@
- +
@if (!hideWeekNumbers()) { @@ -64,7 +64,7 @@ >
-
+
- +
+
diff --git a/projects/element-ng/datepicker/components/si-month-selection.component.ts b/projects/element-ng/datepicker/components/si-month-selection.component.ts index 4ef71c49e4..751ce25a83 100644 --- a/projects/element-ng/datepicker/components/si-month-selection.component.ts +++ b/projects/element-ng/datepicker/components/si-month-selection.component.ts @@ -38,7 +38,10 @@ import { SiInitialFocusComponent } from './si-initial-focus.component'; selector: 'si-month-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], templateUrl: './si-month-selection.component.html', - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'd-flex flex-column gap-6' + } }) export class SiMonthSelectionComponent extends SiInitialFocusComponent implements OnChanges { /** diff --git a/projects/element-ng/datepicker/components/si-year-selection.component.html b/projects/element-ng/datepicker/components/si-year-selection.component.html index fc8c0d6094..ea979c677a 100644 --- a/projects/element-ng/datepicker/components/si-year-selection.component.html +++ b/projects/element-ng/datepicker/components/si-year-selection.component.html @@ -15,7 +15,7 @@ (clicked)="changeVisibleYearRange(1)" />
- +
+
diff --git a/projects/element-ng/datepicker/components/si-year-selection.component.ts b/projects/element-ng/datepicker/components/si-year-selection.component.ts index bc1de5a056..fd3e32a63f 100644 --- a/projects/element-ng/datepicker/components/si-year-selection.component.ts +++ b/projects/element-ng/datepicker/components/si-year-selection.component.ts @@ -37,7 +37,10 @@ import { SiInitialFocusComponent } from './si-initial-focus.component'; selector: 'si-year-selection', imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe], templateUrl: './si-year-selection.component.html', - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'd-flex flex-column gap-6' + } }) export class SiYearSelectionComponent extends SiInitialFocusComponent implements OnChanges { /** diff --git a/projects/element-ng/datepicker/si-datepicker-overlay.component.scss b/projects/element-ng/datepicker/si-datepicker-overlay.component.scss index 14497c3a7e..7bcf0aa2c5 100644 --- a/projects/element-ng/datepicker/si-datepicker-overlay.component.scss +++ b/projects/element-ng/datepicker/si-datepicker-overlay.component.scss @@ -2,6 +2,7 @@ @use '@siemens/element-theme/src/styles/variables'; :host { + background: variables.$element-base-1; max-block-size: max-content; // Shrink the container when the two month layout wraps the content // so that the scrollbar is positioned directly at the end of the content. @@ -25,7 +26,7 @@ // and making the screen larger has no effect on expanding to two // pickers again. Seems to be acceptable as size is adjusted after // closing and reopening again. - max-inline-size: 348px; + max-inline-size: 43.5ch; } .first-datepicker { diff --git a/projects/element-ng/datepicker/si-datepicker.component.scss b/projects/element-ng/datepicker/si-datepicker.component.scss index c1f1d4bf58..dc75328007 100644 --- a/projects/element-ng/datepicker/si-datepicker.component.scss +++ b/projects/element-ng/datepicker/si-datepicker.component.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '@siemens/element-theme/src/styles/variables'; +@use '@siemens/element-theme/src/styles/bootstrap/variables' as bootstrap-variables; %selection-hover { background: variables.$element-base-1-hover; @@ -8,15 +9,15 @@ } %table-cell-height-32 { - block-size: 32px; - line-height: 32px; + block-size: 2rem; + line-height: 2rem; inline-size: 100%; } // Enforce square for date cells %square { @extend %table-cell-height-32; - inline-size: 32px; + inline-size: 2rem; } %table-cell-base { @@ -34,7 +35,7 @@ border-radius: variables.$element-radius-2; display: flex; flex-direction: column; - inline-size: 348px; + inline-size: 43.5ch; } // FIXME: this is a hack to avoid style leaking. File needs to be split to the components @@ -43,11 +44,12 @@ .footer { display: flex; align-items: center; + // Ensure empty footer have the same height as the header with the button, so that the calendar doesn't jump when the today button appears. + min-block-size: calc(1rem + 2 * bootstrap-variables.$btn-padding-y); } .header { - padding-block-start: map.get(variables.$spacers, 5); - padding-block-end: map.get(variables.$spacers, 6); + padding-block: map.get(variables.$spacers, 5); padding-inline: map.get(variables.$spacers, 9); border-block-end: 1px solid variables.$element-ui-4; @@ -65,9 +67,11 @@ table { inline-size: 100%; border-collapse: separate; - border-spacing: 0 3px; + border-spacing: 0 map.get(variables.$spacers, 2); table-layout: fixed; margin-block-end: -3px; + // Ensure the tables in the two month layout have the same height, so that the calendar doesn't jump when switching between one and two month layout. + min-block-size: calc(7 * calc(2rem + 2 * map.get(variables.$spacers, 2))); } // days cell class @@ -100,7 +104,7 @@ } } - // month cell class + // year cell class .year { @extend %table-cell-height-32; @extend %table-cell-base; @@ -115,21 +119,23 @@ } } - td[role='gridcell'] { + td, + th { text-align: center; + padding: 0; } + td, th { + @extend %square; font-weight: variables.$si-font-weight-caption; - text-align: center; - block-size: 32px; } .week-num, th { font-size: variables.$si-font-size-caption; color: variables.$element-text-secondary; - inline-size: 32px; + inline-size: 2rem; cursor: default; } @@ -148,27 +154,6 @@ } } - .selection { - .month, - .year { - block-size: 30px; - line-height: 30px; - cursor: pointer; - - &:not(.disabled):hover { - @extend %selection-hover; - } - } - - .month { - inline-size: 50%; - } - - .year { - inline-size: 33.3%; - } - } - .disabled { color: variables.$element-text-disabled; font-weight: variables.$si-font-weight-normal !important; // stylelint-disable-line declaration-no-important @@ -231,10 +216,6 @@ min-inline-size: 0 !important; // stylelint-disable-line declaration-no-important } - .calendar { - block-size: 28em; - } - .timepicker-container { display: flex; flex: 1 1 auto;