@eui/styles 17.0.0-next.4 → 17.0.0-next.5

package/package.json

@@ -9,11 +9,11 @@
     "description": "eUI core styling",
     "author": "ec.europa.eui@gmail.com",
     "engines": {
-        "node": "^18.13.0",
+        "node": "^18.13.0 || >=20.0.0",
         "yarn": ">=1.22.4 <2",
         "npm": "Please use yarn instead of NPM to install dependencies"
     },
     "license": "EUPL-1.1",
-    "version": "17.0.0-next.4",
+    "version": "17.0.0-next.5",
     "tag": "next"
 }

package/src/styles/02-base/mixins/_eui-clearable-input.scss

@@ -1,18 +1,31 @@
+// This mixin sets the layout of the euiClearable directive
 @mixin eui-clearable-input() {
-    align-items: center;
-    background-color: v(eui-base-color-white);
-    color: v(eui-base-color-grey-35);
-    cursor: pointer;
-    display: flex;
-    font-size: v(eui-base-font-size-m);
-    user-select: none;
+    .eui-clearable-wrapper {
+        align-items: center;
+        display: flex;
+        position: relative;
+        width: 100%;
 
-    &:before {
-        position: absolute;
-        right: v(eui-base-spacing-s);
-    }
+        .eui-input-text--clearable-icon {
+            bottom: calc(#{v(eui-base-spacing-s)} - 2px);
+            cursor: pointer;
+            position: absolute;
+            right: v(eui-base-spacing-s);
+            user-select: none;
+            visibility: visible;
+            z-index: v(eui-base-z-index-clearable-icon);
+    
+            &:focus {
+                @include eui-accessible-focus-outline();
+            }
+
+            > svg {
+                fill: v(eui-base-color-grey-35);
 
-    &:hover {
-        color: v(eui-base-color-grey-100);
+                &:hover {
+                    fill: v(eui-base-color-danger-100);
+                }
+            }
+        }
     }
 }

package/src/styles/02-base/mixins/_eui-input.scss

@@ -2,7 +2,6 @@
 // Used for: eui-input-text, eui-input-number, eui-select, eui-textarea, eui-datepicker, eui-autocomplete
 @mixin eui-input() {
     @include eui-font(m, ui);
-    @include eui-accessible-focus-border();
     appearance: none;
     background-color: v(eui-base-color-white);
     border: 1px solid v(eui-base-color-grey-50);
@@ -12,6 +11,8 @@
     min-height: calc(#{v(eui-base-spacing-2xl)} + #{v(eui-base-spacing-2xs)});  // DS aligned 44px
     padding: calc(#{v(eui-base-spacing-s)} - 1px);  // Trick to have inner paddings without exceeding default min-height
     width: 100%;
+    @include eui-accessible-focus-border();
+    @include eui-clearable-input();
 
     &::placeholder {
         color: v(eui-base-color-grey-50) !important;
@@ -51,21 +52,22 @@
         padding-right: v(eui-base-spacing-2xl);
 
         &-icon {
-            visibility: visible;
+            bottom: calc(#{v(eui-base-spacing-s)} - 2px);
+            cursor: pointer;
             position: absolute;
             right: v(eui-base-spacing-s);
-            cursor: pointer;
             user-select: none;
+            visibility: visible;
 
             &:focus {
-                @include eui-accessible-focus-border-rounded();
+                @include eui-accessible-focus-outline();
             }
 
             > svg {
                 fill: v(eui-base-color-grey-35);
 
                 &:hover {
-                    fill: v(eui-base-color-grey-100);
+                    fill: v(eui-base-color-danger-100);
                 }
             }
         }

package/src/styles/03-assets/_module.scss

@@ -1 +1,2 @@
 @import '@eui/styles-base/src/styles/05-assets/module-icons-svg';
+@import '@eui/styles-base/src/styles/05-assets/module-icons-font';