fix: more visual alignments 💅 (#1929)

* fix(telekom-mega-menu): icon size

* feat(date-picker): visual alignment

* test(visual): update snapshots (#1931)

Co-authored-by: acstll <[email protected]>

* fix(date-picker): popover position

* test(visual): update snapshots (#1938)

Co-authored-by: acstll <[email protected]>

* test(visual): revert automated flakies

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: acstll <[email protected]>

packages/components/src/components/date-picker/date-picker.css

@@ -9,6 +9,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+/*
+  TODO clean up CSS variables, some are not used, new ones might be needed (fonts mostly, but also sizes/spacing)
+*/
+
 duet-date-picker {
   --duet-color-primary: var(--telekom-color-primary-standard);
   --duet-color-text: var(--telekom-color-text-and-icon-standard);
@@ -29,10 +33,10 @@ duet-date-picker {
 
   --spacing-heading: 0 0 var(--telekom-spacing-unit-x4) 0;
   --font-size-heading: var(--telekom-typography-font-size-body);
-  --font-size-select-label: var(--telekom-typography-font-size-body);
+  /* --font-size-select-label: var(--telekom-typography-font-size-body); */
   --radius-day: var(--telekom-radius-standard);
-  --font-size-day: var(--telekom-typography-font-size-caption);
-  --font-size-table-header: var(--font-size-day);
+  --font-size-day: var(--telekom-typography-font-size-body);
+  --font-size-table-header: var(--telekom-typography-font-size-caption);
   --font-weight-table-header: var(--telekom-typography-font-weight-extra-bold);
   --focus-outline: var(--telekom-line-weight-highlight) solid
     var(--telekom-color-functional-focus-standard);
@@ -70,6 +74,7 @@ duet-date-picker .duet-date__toggle {
   background: transparent;
   z-index: var(--duet-z-index-toggle);
   box-shadow: inset 1px 0 0 var(--telekom-color-ui-faint);
+  width: var(--telekom-spacing-unit-x11);
 }
 
 duet-date-picker .duet-date__toggle:focus {
@@ -155,11 +160,24 @@ duet-date-picker .duet-date__input::placeholder {
     var(--telekom-motion-easing-standard);
 }
 
+duet-date-picker .duet-date__header {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+duet-date-picker .duet-date__select {
+  height: var(--telekom-spacing-unit-x8);
+}
+
 duet-date-picker .duet-date__prev,
-duet-date-picker .duet-date__next,
+duet-date-picker .duet-date__next {
+  width: var(--telekom-spacing-unit-x8);
+  height: var(--telekom-spacing-unit-x8);
+}
+
 duet-date-picker .duet-date__day {
-  width: 44px;
-  height: 44px;
+  width: var(--telekom-spacing-unit-x11);
+  height: var(--telekom-spacing-unit-x11);
 }
 
 .scale-date-picker.scale-date-picker--focus .date-picker__label,
@@ -183,6 +201,10 @@ duet-date-picker .duet-date__input:focus::placeholder {
     var(--telekom-motion-easing-standard);
 }
 
+duet-date-picker .duet-date__table {
+  margin-top: var(--telekom-spacing-unit-x2);
+}
+
 /* Error state */
 
 .scale-date-picker--status-error duet-date-picker .duet-date__input {
@@ -239,6 +261,8 @@ duet-date-picker .duet-date__input:focus::placeholder {
   text-align: center;
   padding: var(--spacing-heading);
   font-size: var(--font-size-heading);
+  /* FIXME this is overwriting the font-size rule above thus the variable is not doing anything */
+  font: var(--telekom-text-style-heading-6);
   /* FIXME remove !important (fix Storybook?) */
   color: var(--telekom-color-text-and-icon-standard) !important;
 }
@@ -248,6 +272,7 @@ duet-date-picker .duet-date__dialog-content {
   box-shadow: var(--telekom-shadow-top);
   max-width: 324px;
   padding: var(--telekom-spacing-unit-x2);
+  margin-top: var(--telekom-spacing-unit-x1);
 }
 
 duet-date-picker .duet-date__cell {
@@ -267,7 +292,8 @@ duet-date-picker .duet-date__select:nth-of-type(1) {
 }
 
 duet-date-picker .duet-date__select-label {
-  font-size: var(--font-size-select-label);
+  /* font-size: var(--font-size-select-label); */
+  font: var(--telekom-text-style-ui);
 }
 
 duet-date-picker .duet-date__select-label svg {
@@ -320,6 +346,8 @@ duet-date-picker .duet-date__close:focus {
 }
 
 duet-date-picker .duet-date__table-header {
+  height: var(--telekom-spacing-unit-x12);
+  padding: 0;
   font-size: var(--font-size-table-header);
   font-weight: var(--font-weight-table-header);
 }

packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-column.css

@@ -37,7 +37,7 @@
 }
 
 [part~='icon'] {
-  transform: translateY(-0.25ch);
+  transform: translateY(-0.125ch);
 }
 
 @media screen and (--xl) {

packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css

@@ -59,6 +59,11 @@
   width: 100%;
 }
 
+.scale-telekom-mega-menu .scale-icon {
+  width: 20px;
+  height: 20px;
+}
+
 .scale-telekom-mega-menu :where(a):hover {
   color: var(--telekom-color-text-and-icon-primary-hovered);
 }