Merge pull request #2353 from Teradata/fix/search-box-style

fix(search): style fix for search bar
Teradata · Jan 28, 2025 · d2f3c4b · d2f3c4b
2 parents 8b0233b + fdd7fcf
commit d2f3c4b
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 48 deletions.
diff --git a/libs/angular/search/src/search-box/search-box.component.html b/libs/angular/search/src/search-box/search-box.component.html
@@ -4,6 +4,7 @@
     type="button"
     class="td-search-icon"
     (click)="searchClicked()"
+    [ngClass]="{ 'td-search-icon-active': searchVisible || alwaysVisible }"
   >
     <mat-icon *ngIf="searchVisible && !alwaysVisible">{{ backIcon }}</mat-icon>
     <mat-icon *ngIf="!searchVisible || alwaysVisible">{{
@@ -20,7 +21,7 @@
     [clearIcon]="clearIcon"
     (searchDebounce)="handleSearchDebounce($event)"
     (search)="handleSearch($event)"
-    (clear)="handleClear(); toggleVisibility()"
+    (clear)="handleClear();"
     (blur)="handleBlur()"
   ></td-search-input>
 </div>
diff --git a/libs/angular/search/src/search-box/search-box.component.scss b/libs/angular/search/src/search-box/search-box.component.scss
@@ -3,40 +3,42 @@
 }
 
 .td-search-box {
-  // [layout]
   box-sizing: border-box;
   display: flex;
-  // [layout="row"]
   flex-direction: row;
-  // [layout-align="end center"]
   align-content: center;
   max-width: 100%;
   justify-content: flex-end;
+  align-items: center;
+  position: relative;
 
   .td-search-icon {
-    margin-top: 4px;
+    &.td-search-icon-active {
+      margin-right: -48px;
+      margin-left: 0;
+      z-index: 1;
+    }
   }
 
   td-search-input {
-    margin-left: 12px;
+    --mdc-filled-text-field-container-color: transparent;
+    --mat-form-field-state-layer-color: transparent;
+    --mdc-filled-text-field-active-indicator-color: transparent;
+    --mdc-filled-text-field-hover-active-indicator-color: transparent;
 
-    ::ng-deep [dir='rtl'] & {
-      margin-right: 12px;
-      margin-left: 0 !important;
-    }
+    ::ng-deep {
+      [dir='rtl'] & {
+        margin-left: 0 !important;
+      }
 
-    ::ng-deep .mat-form.field.mat-form-field-appearance-legacy {
-      .mat-form-field-wrapper {
-        padding-bottom: 1em;
+      .mat-mdc-text-field-wrapper.mdc-text-field {
+        padding-left: 48px;
+        overflow: visible;
+      }
+
+      .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
+        bottom: -1px;
       }
     }
   }
 }
-
-.mat-toolbar
-  :host
-  ::ng-deep
-  .mdc-text-field:not(.mdc-text-field--disabled)
-  .mdc-text-field__input {
-  color: #ffffff;
-}
diff --git a/libs/angular/search/src/search-box/search-box.component.ts b/libs/angular/search/src/search-box/search-box.component.ts
@@ -86,7 +86,7 @@ export class TdSearchBoxComponent implements ControlValueAccessor {
    * The icon used to clear the search input.
    * Defaults to 'cancel' icon.
    */
-  @Input() clearIcon = 'cancel';
+  @Input() clearIcon = 'close';
 
   /**
    * showUnderline?: boolean

diff --git a/libs/angular/search/src/search-input/search-input.component.html b/libs/angular/search/src/search-input/search-input.component.html
@@ -13,28 +13,16 @@
       (blur)="handleBlur()"
       (keyup.enter)="handleSearch($event)"
     />
-    <span
-      matSuffix
-      *ngIf="
-        appearance === 'fill' ||
-        appearance === 'outline' ||
-        appearance === 'standard'
-      "
-    >
-      <ng-template [ngTemplateOutlet]="clearButton"></ng-template>
-    </span>
   </mat-form-field>
+  <div class="td-search-input-clear-wrapper">
+    <button mat-icon-button class="td-search-input-clear" type="button" [@searchState]="
+      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'
+    " (click)="clearSearch()">
+      <mat-icon>{{ clearIcon }}</mat-icon>
+    </button>
+  </div>
 </div>
+
 <ng-template #clearButton>
-  <button
-    mat-icon-button
-    class="td-search-input-clear"
-    type="button"
-    [@searchState]="
-      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'
-    "
-    (click)="clearSearch()"
-  >
-    <mat-icon>{{ clearIcon }}</mat-icon>
-  </button>
+
 </ng-template>
diff --git a/libs/angular/search/src/search-input/search-input.component.scss b/libs/angular/search/src/search-input/search-input.component.scss
@@ -1,13 +1,12 @@
 :host {
   .td-search-input {
-    overflow-x: hidden;
     // [layout]
     box-sizing: border-box;
     display: flex;
     // [layout="row"]
     flex-direction: row;
     // [layout-align="end center"]
-    align-items: baseline;
+    align-items: center;
     align-content: center;
     max-width: 100%;
     justify-content: flex-end;
@@ -16,6 +15,12 @@
       flex: 1;
     }
 
+    ::ng-deep {
+      .mat-mdc-text-field-wrapper.mdc-text-field {
+        padding-right: 48px;
+      }
+    }
+
     ::ng-deep mat-form-field {
       .mat-mdc-form-field-subscript-wrapper {
         display: none;
@@ -65,8 +70,10 @@
     }
 
     .td-search-input-clear {
-      // [flex="none"]
-      flex: 0 0 auto;
+      margin-left: -48px;
+      margin-right: 0;
+      overflow: hidden;
     }
   }
 }
+
diff --git a/libs/angular/search/src/search-input/search-input.component.ts b/libs/angular/search/src/search-input/search-input.component.ts
@@ -56,20 +56,23 @@ export const _TdSearchInputMixinBase =
         'hide-left',
         style({
           transform: 'translateX(-150%)',
+          opacity: 0,
           display: 'none',
         })
       ),
       state(
         'hide-right',
         style({
           transform: 'translateX(150%)',
+          opacity: 0,
           display: 'none',
         })
       ),
       state(
         'show',
         style({
           transform: 'translateX(0%)',
+          opacity: 1,
           display: 'block',
         })
       ),
@@ -91,7 +94,7 @@ export class TdSearchInputComponent
    * appearance?: MatFormFieldAppearance
    * Appearance style for the underlying input component.
    */
-  @Input() appearance: MatFormFieldAppearance = 'outline';
+  @Input() appearance: MatFormFieldAppearance = 'fill';
 
   /**
    * showUnderline?: boolean