CR

Author: OS-pedrolourenco

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

@@ -107,7 +107,7 @@
 // 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
@@ -118,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
 // --------------------------------------------------
 
@@ -263,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,
@@ -275,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,
@@ -290,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 {
@@ -301,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, 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,
@@ -329,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,

core/src/components/searchbar/searchbar.tsx

@@ -6,7 +6,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdat
 import { debounceEvent, raf, componentOnReady, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { isRTL } from '@utils/rtl';
-import { createColorClasses } from '@utils/theme';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -805,6 +805,7 @@ export class Searchbar implements ComponentInterface {
           'searchbar-should-show-cancel': this.shouldShowCancelButton(),
           [`searchbar-shape-${shape}`]: shape !== undefined,
           [`searchbar-size-${size}`]: size !== undefined,
+          'in-toolbar': hostContext('ion-toolbar', this.el),
         })}
       >
         <div class="searchbar-input-container">

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

@@ -188,8 +188,6 @@ <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>