refactor(searchbar): update according to design (#30245)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The searchbar component does not currently match our UX designs for the
ionic theme.

## What is the new behavior?
Updated the searchbar so that it does:
- Adjusted the searchbar input paddings when no leading or trailing
icons are rendered;
- Added an ellipsis text overflow to the searchbar input;
- Updated the background, text and icon colors so that they are reactive
to state changes like having inserted text and being disabled (some
design tokens are still TBD);
- The clear button is now hidden when the searchbar is disabled.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Maria Hutt <[email protected]>

Author: OS-pedrolourenco

core/api.txt

@@ -1886,7 +1886,7 @@ ion-searchbar,prop,minlength,number | undefined,undefined,false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,name,string,this.inputId,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
-ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
+ion-searchbar,prop,searchIcon,boolean | string | undefined,undefined,false,false
 ion-searchbar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
 ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false

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;
         /**
@@ -3105,9 +3105,9 @@ export namespace Components {
          */
         "placeholder": string;
         /**
-          * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes.
+          * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes. If `false`, no search icon will be displayed.
          */
-        "searchIcon"?: string;
+        "searchIcon"?: string | boolean;
         /**
           * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
@@ -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;
         /**
@@ -8528,9 +8528,9 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes.
+          * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes. If `false`, no search icon will be displayed.
          */
-        "searchIcon"?: string;
+        "searchIcon"?: string | boolean;
         /**
           * Set to `"soft"` for a searchbar with slightly rounded corners, `"round"` for a searchbar with fully rounded corners, or `"rectangular"` for a searchbar without rounded corners.  Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
          */

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

@@ -9,14 +9,14 @@
    * @prop --focus-ring-color: The color of the ring around the focused element.
    * @prop --focus-ring-width: The width of the ring around the focused element.
    */
-  --background: #{globals.$ion-primitives-neutral-100};
+  --background: #{globals.$ion-bg-neutral-subtle-default};
   --border-radius: #{globals.$ion-border-radius-400};
   --box-shadow: none;
   --cancel-button-color: #{globals.$ion-primitives-neutral-800};
   --clear-button-color: #{globals.$ion-primitives-neutral-1000};
   --color: #{globals.$ion-primitives-neutral-1200};
-  --icon-color: #{globals.$ion-primitives-neutral-800};
-  --placeholder-color: #{globals.$ion-primitives-neutral-800};
+  --icon-color: #{globals.$ion-icon-subtlest};
+  --placeholder-color: #{globals.$ion-text-subtlest};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
 
@@ -38,6 +38,8 @@
 .searchbar-input {
   @include globals.padding(globals.$ion-space-300, null);
 
+  text-overflow: ellipsis;
+
   contain: strict;
 }
 
@@ -67,7 +69,7 @@
   font-size: globals.$ion-font-size-400;
 }
 
-// Searchbar Search & Clear Icon & Cancel Icon
+// Searchbar Search Icon & Clear Icon & Cancel Icon
 // -----------------------------------------
 
 .searchbar-search-icon,
@@ -80,7 +82,7 @@
   transform: translateY(-50%);
 }
 
-// Clear Icon & Cancel Icon
+// Searchbar Clear Icon & Cancel Icon
 // -----------------------------------------
 
 .searchbar-clear-button:focus-visible,
@@ -92,10 +94,20 @@
   opacity: 1;
 }
 
+// Searchbar Search Icon & Cancel Icon
+// -----------------------------------------
+:host(:not(.searchbar-has-leading-icons)) {
+  $leading-icon-padding: #{globals.$ion-scale-0};
+}
+
+:host(.searchbar-has-value) {
+  --icon-color: #{globals.$ion-icon-default};
+}
+
 // Searchbar in Toolbar
 // -----------------------------------------
 
-:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
+:host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
   /**
    * The left edge of the cancel button
    * should align with the left edge
@@ -106,16 +118,6 @@
   @include globals.position-horizontal(9px, null);
 }
 
-:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-input {
-  /**
-   * Padding start is based on
-   * the alignment of the back button,
-   * the size of the leading icon (search or cancel),
-   * and the gap between the icon and the input.
-   */
-  padding-inline-start: calc(9px + globals.$ion-scale-400 + globals.$ion-space-200);
-}
-
 // Searchbar States
 // --------------------------------------------------
 
@@ -143,8 +145,8 @@
 /* Disabled */
 :host(.searchbar-disabled) {
   --color: #{globals.$ion-primitives-neutral-500};
-  --icon-color: #{globals.$ion-primitives-neutral-500};
-  --placeholder-color: #{globals.$ion-primitives-neutral-500};
+  --icon-color: #{globals.$ion-icon-disabled};
+  --placeholder-color: #{globals.$ion-text-disabled};
 
   cursor: default;
   pointer-events: none;
@@ -170,6 +172,42 @@
 
 /* Small */
 :host(.searchbar-size-small) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  @include globals.padding-horizontal(globals.$ion-space-300);
+
+  height: globals.$ion-scale-1000;
+}
+
+/* Small with Leading Icons */
+:host(.searchbar-size-small.searchbar-should-show-search-icon) .searchbar-input,
+:host(.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  @include globals.padding-horizontal(
+    calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200),
+    globals.$ion-space-300
+  );
+}
+
+/* Small with Leading Icons and Trailing Icons */
+:host(.searchbar-size-small.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
+:host(.searchbar-size-small.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
   /**
    * Padding start is based on
    * desired padding from design,
@@ -182,8 +220,24 @@
    * and the gap between the icon and the input.
    */
   @include globals.padding-horizontal(calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200));
+}
 
-  height: globals.$ion-scale-1000;
+/* Small with Trailing Icons */
+:host(.searchbar-size-small.searchbar-should-show-clear) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  @include globals.padding-horizontal(
+    globals.$ion-space-300,
+    calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200)
+  );
 }
 
 :host(.searchbar-size-small) .searchbar-search-icon,
@@ -199,6 +253,42 @@
 
 /* Medium */
 :host(.searchbar-size-medium) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  @include globals.padding-horizontal(globals.$ion-space-400);
+
+  height: globals.$ion-scale-1200;
+}
+
+/* Medium with Leading Icons */
+:host(.searchbar-size-medium.searchbar-should-show-search-icon) .searchbar-input,
+:host(.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  @include globals.padding-horizontal(
+    calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200),
+    globals.$ion-space-400
+  );
+}
+
+/* Medium with Leading Icons and Trailing Icons */
+:host(.searchbar-size-medium.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
+:host(.searchbar-size-medium.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
   /**
    * Padding start is based on
    * desired padding from design,
@@ -211,8 +301,24 @@
    * and the gap between the icon and the input.
    */
   @include globals.padding-horizontal(calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200));
+}
 
-  height: globals.$ion-scale-1200;
+/* Medium with Trailing Icons */
+:host(.searchbar-size-medium.searchbar-should-show-clear) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  @include globals.padding-horizontal(
+    globals.$ion-space-400,
+    calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200)
+  );
 }
 
 :host(.searchbar-size-medium) .searchbar-search-icon,
@@ -226,6 +332,17 @@
   @include globals.position-horizontal(null, globals.$ion-space-400);
 }
 
+:host(.in-toolbar.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input,
+:host(.in-toolbar.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * the alignment of the back button,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   */
+  padding-inline-start: calc(9px + globals.$ion-scale-400 + globals.$ion-space-200);
+}
+
 /* Large */
 :host(.searchbar-size-large) .searchbar-search-icon,
 :host(.searchbar-size-large) .searchbar-cancel-button {
@@ -237,19 +354,47 @@
   font-size: globals.$ion-font-size-500;
 }
 
-:host-context(ion-toolbar).searchbar-size-large.searchbar-should-show-cancel .searchbar-input {
+:host(.searchbar-size-large) .searchbar-input {
+  @include globals.padding(globals.$ion-space-400, null);
+
   /**
    * Padding start is based on
-   * the alignment of the back button,
+   * desired padding from design,
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + globals.$ion-scale-500 + globals.$ion-space-200);
+  @include globals.padding-horizontal(globals.$ion-space-500);
+
+  height: globals.$ion-scale-1400;
 }
 
-:host(.searchbar-size-large) .searchbar-input {
-  @include globals.padding(globals.$ion-space-400, null);
+/* Large with Leading Icons */
+:host(.searchbar-size-large.searchbar-should-show-search-icon) .searchbar-input,
+:host(.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * no trailing icons.
+   */
+  @include globals.padding-horizontal(
+    calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
+    globals.$ion-space-500
+  );
+}
 
+/* Large with Leading Icons and Trailing Icons */
+:host(.searchbar-size-large.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
+:host(.searchbar-size-large.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
   /**
    * Padding start is based on
    * desired padding from design,
@@ -265,8 +410,34 @@
     calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
     calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
   );
+}
 
-  height: globals.$ion-scale-1400;
+/* Large with Trailing Icons */
+:host(.searchbar-size-large.searchbar-should-show-clear) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * no leading icons.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  @include globals.padding-horizontal(
+    globals.$ion-space-500,
+    calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
+  );
+}
+
+:host(.in-toolbar.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
+  /**
+   * Padding start is based on
+   * the alignment of the back button,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   */
+  padding-inline-start: calc(9px + globals.$ion-scale-500 + globals.$ion-space-200);
 }
 
 :host(.searchbar-size-large) .searchbar-search-icon,