feat(input): end-slot hover and 16px icon buttons #IX-2004 (#2441)

Author: alexkaduk

.changeset/ix-2004-icon-size-end-slot.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix': patch
+---
+
+Unify hover behavior for input end slots and use 16px icon in end-slot icon buttons.
+
+**Affected components:** ix-input (password toggle), ix-date-input (calendar), ix-time-input (clock).

packages/core/src/components/date-input/date-input.tsx

@@ -456,6 +456,7 @@ export class DateInput implements IxInputFieldComponent<string | undefined> {
             data-testid="open-calendar"
             class={{ 'calendar-hidden': this.disabled || this.readonly }}
             variant="subtle-tertiary"
+            size="16"
             icon={iconCalendar}
             onClick={(event) => this.onCalenderClick(event)}
             aria-label={this.ariaLabelCalendarButton}

packages/core/src/components/input/input.mixins.scss

@@ -76,11 +76,11 @@
     }
 
     .start-container {
-      left: 0;
+      left: var(--theme-input--border-thickness);
     }
 
     .end-container {
-      right: 0;
+      right: calc(var(--theme-input--border-thickness) + 0.125rem);
     }
 
     @include applySpacingToStartSlot;
@@ -90,6 +90,11 @@
       margin-top: 0.25rem;
       margin-bottom: 0.25rem;
     }
+
+    .input-wrapper:hover input:not(:disabled):not(:read-only) {
+      border-color: var(--theme-input--border-color--hover) !important;
+      background-color: var(--theme-input--background--hover);
+    }
   }
 
   :host(.disabled) {
@@ -108,7 +113,8 @@
       border-color: var(--theme-input--border-color--info);
     }
 
-    input:hover {
+    input:hover,
+    .input-wrapper:hover input {
       border-color: var(--theme-input--border-color--info--hover) !important;
     }
 
@@ -125,7 +131,8 @@
       ) !important;
     }
 
-    input:hover {
+    input:hover,
+    .input-wrapper:hover input {
       background-color: var(--theme-input--background--warning--hover);
       border-color: var(
         --theme-input--border-color--warning--active
@@ -145,7 +152,8 @@
       border-color: var(--theme-input--border-color--invalid) !important;
     }
 
-    input:hover {
+    input:hover,
+    .input-wrapper:hover input {
       background-color: var(--theme-input--background--invalid--hover);
       border-color: var(--theme-input--border-color--invalid--hover) !important;
     }

packages/core/src/components/input/input.tsx

@@ -361,6 +361,7 @@ export class Input implements IxInputFieldComponent<string> {
                   'eye-hidden': this.type !== 'password' || this.disabled,
                 }}
                 variant="tertiary"
+                size="16"
                 icon={
                   this.inputType === 'password' ? iconEye : iconEyeCancelled
                 }

packages/core/src/components/input/number-input.scss

@@ -22,7 +22,6 @@
     position: relative;
     flex-direction: row;
     flex-wrap: nowrap;
-    margin-right: 0.25rem;
 
     &.container-hidden {
       display: none;

packages/core/src/components/time-input/time-input.tsx

@@ -469,6 +469,7 @@ export class TimeInput implements IxInputFieldComponent<string> {
             data-testid="open-time-picker"
             class={{ 'time-icon-hidden': this.disabled || this.readonly }}
             variant="subtle-tertiary"
+            size="16"
             icon={iconClock}
             onClick={(event) => this.onTimeIconClick(event)}
             aria-label="Toggle time picker"