CR

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

@@ -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.
          */
@@ -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

@@ -1,6 +1,9 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "searchbar.common";
 
+$leading-icon-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
+$clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
+
 // Ionic Searchbar
 // --------------------------------------------------
 
@@ -15,12 +18,10 @@
   --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-icon-default};
+  --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};
-  --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);
@@ -60,7 +61,7 @@
 }
 
 :host(:not(.searchbar-should-show-clear)) {
-  --clear-button-padding: #{globals.$ion-scale-0};
+  $clear-button-padding: #{globals.$ion-scale-0};
 }
 
 // Searchbar Cancel Icon
@@ -103,11 +104,11 @@
 // Searchbar Search Icon & Cancel Icon
 // -----------------------------------------
 :host(:not(.searchbar-has-leading-icons)) {
-  --leading-icon-padding: #{globals.$ion-scale-0};
+  $leading-icon-padding: #{globals.$ion-scale-0};
 }
 
-:host(:not(.searchbar-has-value)) {
-  --icon-color: #{globals.$ion-icon-subtlest};
+:host(.searchbar-has-value) {
+  --icon-color: #{globals.$ion-icon-default};
 }
 
 // Searchbar in Toolbar
@@ -131,7 +132,7 @@
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + var(--leading-icon-padding));
+  padding-inline-start: calc(9px + $leading-icon-padding);
 }
 
 // Searchbar States
@@ -200,8 +201,8 @@
    * and the gap between the icon and the input.
    */
   @include globals.padding-horizontal(
-    calc(globals.$ion-space-300 + var(--leading-icon-padding)),
-    calc(globals.$ion-space-300 + var(--clear-button-padding))
+    calc(globals.$ion-space-300 + $leading-icon-padding),
+    calc(globals.$ion-space-300 + $clear-button-padding)
   );
 
   height: globals.$ion-scale-1000;
@@ -231,9 +232,12 @@
    * the size of the trailing icon (clear),
    * and the gap between the icon and the input.
    */
+  @debug "Leading icon padding is equal to #{$leading-icon-padding}";
+  @debug "Clear button padding is equal to #{$clear-button-padding}";
+
   @include globals.padding-horizontal(
-    calc(globals.$ion-space-400 + var(--leading-icon-padding)),
-    calc(globals.$ion-space-400 + var(--clear-button-padding))
+    calc(globals.$ion-space-400 + $leading-icon-padding),
+    calc(globals.$ion-space-400 + $clear-button-padding)
   );
 
   height: globals.$ion-scale-1200;
@@ -253,7 +257,7 @@
 /* Large */
 :host(.searchbar-size-large) .searchbar-search-icon,
 :host(.searchbar-size-large) .searchbar-cancel-button {
-  --leading-icon-padding: #{calc(globals.$ion-scale-500 + globals.$ion-space-200)};
+  $leading-icon-padding: #{calc(globals.$ion-scale-500 + globals.$ion-space-200)};
 
   width: globals.$ion-scale-500;
   height: globals.$ion-scale-500;
@@ -270,7 +274,7 @@
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + var(--leading-icon-padding));
+  padding-inline-start: calc(9px + $leading-icon-padding);
 }
 
 :host(.searchbar-size-large) .searchbar-input {
@@ -288,8 +292,8 @@
    * and the gap between the icon and the input.
    */
   @include globals.padding-horizontal(
-    calc(globals.$ion-space-500 + var(--leading-icon-padding)),
-    calc(globals.$ion-space-500 + var(--clear-button-padding))
+    calc(globals.$ion-space-500 + $leading-icon-padding),
+    calc(globals.$ion-space-500 + $clear-button-padding)
   );
 
   height: globals.$ion-scale-1400;

core/src/components/searchbar/searchbar.tsx

@@ -179,8 +179,9 @@ export class Searchbar implements ComponentInterface {
   /**
    * 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.
    */
-  @Prop() searchIcon?: string;
+  @Prop() searchIcon?: string | boolean;
 
   /**
    * Sets the behavior for the cancel button. Defaults to `"never"`.
@@ -620,13 +621,16 @@ export class Searchbar implements ComponentInterface {
    * Clear button should be shown if one of two conditions applies:
    * 1. `showClearButton` is set to `always`.
    * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+   * 3. `theme` is not set `ionic`, or the searchbar has not been disabled.
    */
   private shouldShowClearButton(): boolean {
+    const theme = getIonTheme(this);
+
     if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
       return false;
     }
 
-    if (getIonTheme(this) === 'ionic' && this.disabled) {
+    if (theme === 'ionic' && this.disabled) {
       return false;
     }
 
@@ -698,7 +702,7 @@ export class Searchbar implements ComponentInterface {
    * Otherwise, use the icon set in the config.
    * If no icon is set in the config, use the default icon.
    */
-  get searchbarSearchIcon(): string {
+  get searchbarSearchIcon(): string | boolean {
     // Return the icon if it is explicitly set
     if (this.searchIcon != null) {
       return this.searchIcon;
@@ -788,7 +792,7 @@ export class Searchbar implements ComponentInterface {
           'searchbar-left-aligned': this.shouldAlignLeft,
           'searchbar-has-focus': this.focused,
           'searchbar-has-leading-icons':
-            theme === 'ionic' && (this.searchIcon !== undefined || this.showCancelButton !== 'never'),
+            theme === 'ionic' && (this.searchIcon !== false || this.showCancelButton !== 'never'),
           'searchbar-should-show-clear': this.shouldShowClearButton(),
           'searchbar-should-show-cancel': this.shouldShowCancelButton(),
           [`searchbar-shape-${shape}`]: shape !== undefined,
@@ -822,7 +826,7 @@ export class Searchbar implements ComponentInterface {
 
           {(theme === 'md' || theme === 'ionic') && cancelButton}
 
-          {theme !== 'ionic' || this.searchIcon !== undefined ? (
+          {this.searchIcon !== false ? (
             <ion-icon
               aria-hidden="true"
               icon={searchbarSearchIcon}
@@ -831,7 +835,7 @@ export class Searchbar implements ComponentInterface {
             ></ion-icon>
           ) : null}
 
-          {theme !== 'ionic' || this.shouldShowClearButton() !== undefined ? (
+          {this.shouldShowClearButton() ? (
             <button
               aria-label="reset"
               type="button"
@@ -851,7 +855,7 @@ export class Searchbar implements ComponentInterface {
                 aria-hidden="true"
                 icon={searchbarClearIcon}
                 lazy={false}
-                class="searchbar-clear-icon"
+                className="searchbar-clear-icon"
               ></ion-icon>
             </button>
           ) : null}

core/src/components/searchbar/test/basic/index.html

@@ -188,6 +188,8 @@ <h5 class="ion-padding-start ion-padding-top">Search - Name</h5>
             const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
             dynamicProp.spellcheck = propIsSpellcheck;
           }
+
+          document.querySelector("#noCancel").searchIcon = false;
         </script>
       </ion-content>
     </ion-app>