AAE-23556 Fix search text input component styles (#9895)

Alfresco · Jul 9, 2024 · 89f300b · 89f300b
1 parent a64ffb3
commit 89f300b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 16 deletions.
diff --git a/lib/core/src/lib/search-text/search-text-input.component.html b/lib/core/src/lib/search-text/search-text-input.component.html
@@ -27,13 +27,10 @@
                    (ngModelChange)="inputChange($event)"
                    [searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null"
                    (keyup.enter)="searchSubmit($event)">
-            <button mat-icon-button matSuffix
+                <mat-icon *ngIf="canShowClearSearch()" matSuffix
                     data-automation-id="adf-clear-search-button"
                     class="adf-clear-search-button"
-                    *ngIf="canShowClearSearch()"
-                    (mousedown)="resetSearch()">
-                <mat-icon>clear</mat-icon>
-            </button>
+                    (mousedown)="resetSearch()">clear</mat-icon>
         </mat-form-field>
     </div>
 </div>
diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss
@@ -21,12 +21,9 @@
         line-height: normal;
     }
 
-    &-input-form-field-divider {
-        #{$mat-line-ripple} {
-            background-color: var(--adf-theme-primary-50);
-        }
-
-        font-size: var(--theme-subheading-2-font-size);
+    &-clear-search-button {
+        font-size: var(--theme-button-font-size);
+        cursor: pointer;
     }
 }
 

diff --git a/lib/core/src/lib/search-text/search-text-input.component.ts b/lib/core/src/lib/search-text/search-text-input.component.ts
@@ -99,7 +99,6 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     @Input()
     placeholder: string = '';
 
-
     /** Label text to show over the input field */
     @Input()
     label: string = '';
@@ -144,11 +143,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     animationStates: SearchAnimationDirection = {
         ltr: {
             active: { value: 'active', params: { 'margin-left': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(82%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(95%)' } }
         },
         rtl: {
             active: { value: 'active', params: { 'margin-right': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(-82%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(-95%)' } }
         }
     };
 
@@ -202,11 +201,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
         if (this.dir === 'ltr') {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-left': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(82%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(95%)' } };
         } else {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-right': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(-82%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(-95%)' } };
         }
     }