From b3ec2d6d190a956cdc6dec2ba306ee55375ecdc8 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Fri, 24 Jan 2025 17:52:47 -0500
Subject: [PATCH] fix(search): style fix for search bar

---
 .../src/search-box/search-box.component.html  |  3 +-
 .../src/search-box/search-box.component.scss  | 43 ++++++++++---------
 .../src/search-box/search-box.component.ts    |  2 +-
 .../search-input/search-input.component.html  | 30 ++++---------
 .../search-input/search-input.component.scss  | 15 +++++--
 .../search-input/search-input.component.ts    |  5 ++-
 6 files changed, 50 insertions(+), 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
index a62624630..2a7a16c1a 100644
--- 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
index 9634c161c..74024c9b5 100644
--- 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,43 @@
 }
 
 .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;
 
-    ::ng-deep [dir='rtl'] & {
-      margin-right: 12px;
-      margin-left: 0 !important;
-    }
+    --mdc-filled-text-field-active-indicator-color: transparent;
+    --mdc-filled-text-field-hover-active-indicator-color: transparent;
+
+    ::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
index 8fbc58e51..e90a1239a 100644
--- 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
index cc3f03d81..f78523f2f 100644
--- 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
index c80787e52..d4173c98c 100644
--- 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
index 5d65c366c..df633f976 100644
--- a/libs/angular/search/src/search-input/search-input.component.ts
+++ b/libs/angular/search/src/search-input/search-input.component.ts
@@ -56,6 +56,7 @@ export const _TdSearchInputMixinBase =
         'hide-left',
         style({
           transform: 'translateX(-150%)',
+          opacity: 0,
           display: 'none',
         })
       ),
@@ -63,6 +64,7 @@ export const _TdSearchInputMixinBase =
         'hide-right',
         style({
           transform: 'translateX(150%)',
+          opacity: 0,
           display: 'none',
         })
       ),
@@ -70,6 +72,7 @@ export const _TdSearchInputMixinBase =
         '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