refactor(searchbar): update padding based on icons

Author: thetaPC

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

@@ -1,9 +1,6 @@
 @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
 // --------------------------------------------------
 
@@ -60,10 +57,6 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
   contain: strict;
 }
 
-:host(:not(.searchbar-should-show-clear)) {
-  $clear-button-padding: #{globals.$ion-scale-0};
-}
-
 // Searchbar Cancel Icon
 // -----------------------------------------
 
@@ -132,7 +125,7 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + $leading-icon-padding);
+  padding-inline-start: calc(9px + globals.$ion-scale-400 + globals.$ion-space-200);
 }
 
 // Searchbar States
@@ -189,6 +182,42 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
 
 /* 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,
@@ -200,12 +229,25 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
    * 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 + globals.$ion-scale-400 + globals.$ion-space-200));
+}
+
+/* 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(
-    calc(globals.$ion-space-300 + $leading-icon-padding),
-    calc(globals.$ion-space-300 + $clear-button-padding)
+    globals.$ion-space-300,
+    calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200)
   );
-
-  height: globals.$ion-scale-1000;
 }
 
 :host(.searchbar-size-small) .searchbar-search-icon,
@@ -232,13 +274,7 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
    * 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 + $leading-icon-padding),
-    calc(globals.$ion-space-400 + $clear-button-padding)
-  );
+  @include globals.padding-horizontal(calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200));
 
   height: globals.$ion-scale-1200;
 }
@@ -257,8 +293,6 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
 /* 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)};
-
   width: globals.$ion-scale-500;
   height: globals.$ion-scale-500;
 }
@@ -274,7 +308,7 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
    * the size of the leading icon (search or cancel),
    * and the gap between the icon and the input.
    */
-  padding-inline-start: calc(9px + $leading-icon-padding);
+  padding-inline-start: calc(9px + globals.$ion-scale-500 + globals.$ion-space-200);
 }
 
 :host(.searchbar-size-large) .searchbar-input {
@@ -292,8 +326,8 @@ $clear-button-padding: calc(globals.$ion-scale-400 + globals.$ion-space-200);
    * and the gap between the icon and the input.
    */
   @include globals.padding-horizontal(
-    calc(globals.$ion-space-500 + $leading-icon-padding),
-    calc(globals.$ion-space-500 + $clear-button-padding)
+    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;

core/src/components/searchbar/searchbar.tsx

@@ -602,6 +602,14 @@ export class Searchbar implements ComponentInterface {
     return this.getValue() !== '';
   }
 
+  private shouldShowSearchIcon(): boolean {
+    if (this.searchIcon === false || this.searchIcon === 'false') {
+      return false;
+    }
+
+    return true;
+  }
+
   /**
    * Determines whether or not the cancel button should be visible onscreen.
    * Cancel button should be shown if one of two conditions applies:
@@ -702,9 +710,10 @@ 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 | boolean {
-    // Return the icon if it is explicitly set
-    if (this.searchIcon != null) {
+  get searchbarSearchIcon(): string {
+    // Return the icon if it is explicitly set.
+    // If the icon is set to a boolean or string 'true', use the default icon.
+    if (this.searchIcon != null && this.searchIcon !== 'true' && typeof this.searchIcon !== 'boolean') {
       return this.searchIcon;
     }
 
@@ -791,8 +800,7 @@ export class Searchbar implements ComponentInterface {
           'searchbar-has-value': this.hasValue(),
           'searchbar-left-aligned': this.shouldAlignLeft,
           'searchbar-has-focus': this.focused,
-          'searchbar-has-leading-icons':
-            theme === 'ionic' && (this.searchIcon !== false || this.showCancelButton !== 'never'),
+          'searchbar-should-show-search-icon': this.shouldShowSearchIcon(),
           'searchbar-should-show-clear': this.shouldShowClearButton(),
           'searchbar-should-show-cancel': this.shouldShowCancelButton(),
           [`searchbar-shape-${shape}`]: shape !== undefined,
@@ -826,16 +834,16 @@ export class Searchbar implements ComponentInterface {
 
           {(theme === 'md' || theme === 'ionic') && cancelButton}
 
-          {this.searchIcon !== false ? (
+          {this.shouldShowSearchIcon() && (
             <ion-icon
               aria-hidden="true"
               icon={searchbarSearchIcon}
               lazy={false}
               class="searchbar-search-icon"
             ></ion-icon>
-          ) : null}
+          )}
 
-          {this.shouldShowClearButton() ? (
+          {this.shouldShowClearButton() && (
             <button
               aria-label="reset"
               type="button"
@@ -858,7 +866,7 @@ export class Searchbar implements ComponentInterface {
                 className="searchbar-clear-icon"
               ></ion-icon>
             </button>
-          ) : null}
+          )}
         </div>
         {theme === 'ios' && cancelButton}
       </Host>