Skip to content

refactor(searchbar): update according to design #30245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Mar 19, 2025
Merged

refactor(searchbar): update according to design #30245

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0be1594
Adjust padding when searchIcon is undefined
OS-pedrolourenco Mar 7, 2025
a97ead6
Simplify syntax
OS-pedrolourenco Mar 7, 2025
b71f442
Adjust padding when the clear button is not present + ellipsis text-o…
OS-pedrolourenco Mar 10, 2025
859c4df
Fix searchbar colors + hide clear button when searchbar is disabled +…
OS-pedrolourenco Mar 13, 2025
a1202e6
Fix lint issues
OS-pedrolourenco Mar 13, 2025
1c3cc35
Merge branch 'next' into ROU-11253
OS-pedrolourenco Mar 13, 2025
f47153f
CR
OS-pedrolourenco Mar 14, 2025
bfceabd
refactor(searchbar): update padding based on icons
thetaPC Mar 14, 2025
a361fc5
CR
OS-pedrolourenco Mar 17, 2025
6a2fc08
Merge branch 'next' into ROU-11253
OS-pedrolourenco Mar 17, 2025
9511dee
CR
OS-pedrolourenco Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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.
*/
Expand Down
223 changes: 197 additions & 26 deletions core/src/components/searchbar/searchbar.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};

Expand All @@ -38,6 +38,8 @@
.searchbar-input {
@include globals.padding(globals.$ion-space-300, null);

text-overflow: ellipsis;

contain: strict;
}

Expand Down Expand Up @@ -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,
Expand All @@ -80,7 +82,7 @@
transform: translateY(-50%);
}

// Clear Icon & Cancel Icon
// Searchbar Clear Icon & Cancel Icon
// -----------------------------------------

.searchbar-clear-button:focus-visible,
Expand All @@ -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
Expand All @@ -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
// --------------------------------------------------

Expand Down Expand Up @@ -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;
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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 {
Expand All @@ -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, 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,
Expand All @@ -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,
Expand Down
Loading
Loading