feat(input): use type enum & manage padding with search and clearable

Signed-off-by: astagnol <[email protected]>
ovh · Nov 28, 2024 · 78b7ccb · 78b7ccb
1 parent 8b46c6b
commit 78b7ccb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/ods/src/components/input/src/components/ods-input/ods-input.scss b/packages/ods/src/components/input/src/components/ods-input/ods-input.scss
@@ -60,12 +60,19 @@
       }
     }
 
-    &--clearable, &--loading, &--toggle-mask {
+    &--clearable, &--loading, &--toggle-mask, &--search {
       padding-right: input.$ods-input-input-padding-right;
     }
 
-    &.ods-input__input--clearable.ods-input__input--toggle-mask {
-      padding-right: calc(input.$ods-input-input-padding-right * 2);
+    &--clearable {
+      &.ods-input__input--toggle-mask,
+      &.ods-input__input--search {
+        padding-right: calc(input.$ods-input-input-padding-right * 2);
+      }
+    }
+
+    &--clearable.ods-input__input--toggle-mask.ods-input__input--search {
+      padding-right: calc(input.$ods-input-input-padding-right * 3);
     }
 
     &[type="number"] {

diff --git a/packages/ods/src/components/input/src/components/ods-input/ods-input.tsx b/packages/ods/src/components/input/src/components/ods-input/ods-input.tsx
@@ -265,7 +265,7 @@ export class OdsInput {
   render(): FunctionalComponent {
     const hasClearableIcon = this.isClearable && !this.isLoading && !!this.value;
     const hasToggleMaskIcon = this.isPassword && !this.isLoading;
-    const hasSearchIcon = this.type === 'search' && !this.isLoading;
+    const hasSearchIcon = this.type === ODS_INPUT_TYPE.search && !this.isLoading;
 
     return (
       <Host
@@ -280,6 +280,7 @@ export class OdsInput {
             'ods-input__input--clearable': hasClearableIcon,
             'ods-input__input--error': this.hasError || this.isInvalid,
             'ods-input__input--loading': this.isLoading,
+            'ods-input__input--search': hasSearchIcon,
             'ods-input__input--toggle-mask': hasToggleMaskIcon,
           }}
           disabled={ this.isDisabled }