Adjust padding when the clear button is not present + ellipsis text-overflow

Author: OS-pedrolourenco

core/src/components.d.ts

@@ -3053,7 +3053,7 @@ export namespace Components {
          */
         "cancelButtonIcon"?: string;
         /**
-          * Set the the cancel button text. Only available when the theme is `"ios"`.
+          * Set the cancel button text. Only available when the theme is `"ios"`.
          */
         "cancelButtonText": string;
         /**
@@ -8452,7 +8452,7 @@ declare namespace LocalJSX {
          */
         "cancelButtonIcon"?: string;
         /**
-          * Set the the cancel button text. Only available when the theme is `"ios"`.
+          * Set the cancel button text. Only available when the theme is `"ios"`.
          */
         "cancelButtonText"?: string;
         /**

core/src/components/searchbar/searchbar.ionic.scss

@@ -20,6 +20,7 @@
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
   --leading-icon-padding: #{calc(globals.$ion-scale-400 + globals.$ion-space-200)};
+  --clear-button-padding: #{calc(globals.$ion-scale-400 + globals.$ion-space-200)};
 
   @include globals.typography(globals.$ion-body-md-regular);
   @include globals.padding(0);
@@ -40,6 +41,7 @@
   @include globals.padding(globals.$ion-space-300, null);
 
   contain: strict;
+  text-overflow: ellipsis;
 }
 
 // Searchbar Clear Input Icon
@@ -56,6 +58,10 @@
   contain: strict;
 }
 
+:host(:not(.searchbar-should-show-clear)) {
+  --clear-button-padding: #{globals.$ion-scale-0};
+}
+
 // Searchbar Cancel Icon
 // -----------------------------------------
 
@@ -188,7 +194,10 @@
    * the size of the trailing icon (clear),
    * and the gap between the icon and the input.
    */
-  @include globals.padding-horizontal(calc(globals.$ion-space-300 + var(--leading-icon-padding)));
+  @include globals.padding-horizontal(
+    calc(globals.$ion-space-300 + var(--leading-icon-padding)),
+    calc(globals.$ion-space-300 + var(--clear-button-padding)),
+  );
 
   height: globals.$ion-scale-1000;
 }
@@ -217,7 +226,10 @@
    * the size of the trailing icon (clear),
    * and the gap between the icon and the input.
    */
-  @include globals.padding-horizontal(calc(globals.$ion-space-400 + var(--leading-icon-padding)));
+  @include globals.padding-horizontal(
+    calc(globals.$ion-space-400 + var(--leading-icon-padding)),
+    calc(globals.$ion-space-400 + var(--clear-button-padding))
+  );
 
   height: globals.$ion-scale-1200;
 }
@@ -272,7 +284,7 @@
    */
   @include globals.padding-horizontal(
     calc(globals.$ion-space-500 + var(--leading-icon-padding)),
-    calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
+    calc(globals.$ion-space-500 + var(--clear-button-padding))
   );
 
   height: globals.$ion-scale-1400;

core/src/components/searchbar/searchbar.tsx

@@ -106,7 +106,7 @@ export class Searchbar implements ComponentInterface {
   @Prop() cancelButtonIcon?: string;
 
   /**
-   * Set the the cancel button text. Only available when the theme is `"ios"`.
+   * Set the cancel button text. Only available when the theme is `"ios"`.
    */
   @Prop() cancelButtonText = 'Cancel';
 
@@ -827,23 +827,25 @@ export class Searchbar implements ComponentInterface {
             ></ion-icon>
           ) : null}
 
-          <button
-            aria-label="reset"
-            type="button"
-            no-blur
-            class="searchbar-clear-button"
-            onPointerDown={(ev) => {
-              /**
-               * This prevents mobile browsers from
-               * blurring the input when the clear
-               * button is activated.
-               */
-              ev.preventDefault();
-            }}
-            onClick={() => this.onClearInput(true)}
-          >
-            <ion-icon aria-hidden="true" icon={searchbarClearIcon} lazy={false} class="searchbar-clear-icon"></ion-icon>
-          </button>
+          {theme !== 'ionic' || this.shouldShowClearButton() !== undefined ? (
+            <button
+              aria-label="reset"
+              type="button"
+              no-blur
+              class="searchbar-clear-button"
+              onPointerDown={(ev) => {
+                /**
+                 * This prevents mobile browsers from
+                 * blurring the input when the clear
+                 * button is activated.
+                 */
+                ev.preventDefault();
+              }}
+              onClick={() => this.onClearInput(true)}
+            >
+              <ion-icon aria-hidden="true" icon={searchbarClearIcon} lazy={false} class="searchbar-clear-icon"></ion-icon>
+            </button>
+          ) : null}
         </div>
         {theme === 'ios' && cancelButton}
       </Host>