Skip to content

Commit ab81f3d

Browse files
thetaPCthetaPC
authored
feat(searchbar): add sizes for ionic theme (#30211)
1 parent 715cc06 commit ab81f3d

File tree

45 files changed

+254
-38
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+254
-38
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1890,6 +1890,7 @@ ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
18901890
ion-searchbar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
18911891
ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
18921892
ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false
1893+
ion-searchbar,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
18931894
ion-searchbar,prop,spellcheck,boolean,false,false,false
18941895
ion-searchbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
18951896
ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false

‎core/src/components.d.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3113,7 +3113,7 @@ export namespace Components {
31133113
*/
31143114
"setFocus": () => Promise<void>;
31153115
/**
3116-
* 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.
3116+
* 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.
31173117
*/
31183118
"shape"?: 'soft' | 'round' | 'rectangular';
31193119
/**
@@ -3124,6 +3124,10 @@ export namespace Components {
31243124
* Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
31253125
*/
31263126
"showClearButton": 'never' | 'focus' | 'always';
3127+
/**
3128+
* Set to `"large"` for a searchbar with an increase in height, while "small" and "medium" provide progressively smaller heights. Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
3129+
*/
3130+
"size"?: 'small' | 'medium' | 'large';
31273131
/**
31283132
* If `true`, enable spellcheck on the input.
31293133
*/
@@ -8528,7 +8532,7 @@ declare namespace LocalJSX {
85288532
*/
85298533
"searchIcon"?: string;
85308534
/**
8531-
* 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.
8535+
* 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.
85328536
*/
85338537
"shape"?: 'soft' | 'round' | 'rectangular';
85348538
/**
@@ -8539,6 +8543,10 @@ declare namespace LocalJSX {
85398543
* Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
85408544
*/
85418545
"showClearButton"?: 'never' | 'focus' | 'always';
8546+
/**
8547+
* Set to `"large"` for a searchbar with an increase in height, while "small" and "medium" provide progressively smaller heights. Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
8548+
*/
8549+
"size"?: 'small' | 'medium' | 'large';
85428550
/**
85438551
* If `true`, enable spellcheck on the input.
85448552
*/

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

Lines changed: 141 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@
2828
// -----------------------------------------
2929

3030
.searchbar-search-icon {
31-
// Position is based on the size of the search icon.
32-
@include globals.position(globals.$ion-scale-400, null, null, globals.$ion-scale-400);
33-
3431
width: globals.$ion-scale-400;
3532
height: globals.$ion-scale-400;
3633
}
@@ -39,25 +36,7 @@
3936
// -----------------------------------------
4037

4138
.searchbar-input {
42-
/**
43-
* Padding start is based on
44-
* desired padding from design,
45-
* the size of the search icon,
46-
* and the gap between the icon and the input.
47-
*
48-
* Padding end is based on
49-
* desired padding from design,
50-
* the size of the clear icon,
51-
* and the gap between the icon and the input.
52-
*/
53-
@include globals.padding(
54-
globals.$ion-space-300,
55-
calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200),
56-
globals.$ion-space-300,
57-
calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200)
58-
);
59-
60-
min-height: globals.$ion-scale-1200;
39+
@include globals.padding(globals.$ion-space-300, null);
6140

6241
contain: strict;
6342
}
@@ -66,9 +45,6 @@
6645
// -----------------------------------------
6746

6847
.searchbar-clear-button {
69-
// Position is based on the size of the clear icon.
70-
@include globals.position(globals.$ion-scale-400, globals.$ion-scale-400, null, null);
71-
7248
width: globals.$ion-scale-400;
7349
height: globals.$ion-scale-400;
7450

@@ -83,13 +59,8 @@
8359
// -----------------------------------------
8460

8561
.searchbar-cancel-button {
86-
/**
87-
* The left edge of the cancel button
88-
* should align with the left edge
89-
* of the back button if the searchbar
90-
* is used in a toolbar.
91-
*/
92-
@include globals.position(0, null, null, 9px);
62+
width: globals.$ion-scale-400;
63+
height: globals.$ion-scale-400;
9364

9465
background-color: transparent;
9566

@@ -102,7 +73,11 @@
10273
.searchbar-search-icon,
10374
.searchbar-clear-button,
10475
.searchbar-cancel-button {
76+
@include globals.position(50%, null);
77+
10578
position: absolute;
79+
80+
transform: translateY(-50%);
10681
}
10782

10883
// Clear Icon & Cancel Icon
@@ -120,8 +95,25 @@
12095
// Searchbar in Toolbar
12196
// -----------------------------------------
12297

123-
:host-context(ion-toolbar) {
124-
min-height: globals.$ion-scale-1200;
98+
:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
99+
/**
100+
* The left edge of the cancel button
101+
* should align with the left edge
102+
* of the back button if the searchbar
103+
* is used in a toolbar regardless of
104+
* the searchbar size.
105+
*/
106+
@include globals.position-horizontal(9px, null);
107+
}
108+
109+
:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-input {
110+
/**
111+
* Padding start is based on
112+
* the alignment of the back button,
113+
* the size of the leading icon (search or cancel),
114+
* and the gap between the icon and the input.
115+
*/
116+
padding-inline-start: calc(9px + globals.$ion-scale-400 + globals.$ion-space-200);
125117
}
126118

127119
// Searchbar States
@@ -172,3 +164,118 @@
172164
:host(.searchbar-shape-rectangular) {
173165
--border-radius: #{globals.$ion-border-radius-0};
174166
}
167+
168+
// Searchbar Sizes
169+
// --------------------------------------------------
170+
171+
/* Small */
172+
:host(.searchbar-size-small) .searchbar-input {
173+
/**
174+
* Padding start is based on
175+
* desired padding from design,
176+
* the size of the leading icon (search or cancel),
177+
* and the gap between the icon and the input.
178+
*
179+
* Padding end is based on
180+
* desired padding from design,
181+
* the size of the trailing icon (clear),
182+
* and the gap between the icon and the input.
183+
*/
184+
@include globals.padding-horizontal(calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200));
185+
186+
height: globals.$ion-scale-1000;
187+
}
188+
189+
:host(.searchbar-size-small) .searchbar-search-icon,
190+
:host(.searchbar-size-small) .searchbar-cancel-button {
191+
// Start is based on the desired padding start from design.
192+
@include globals.position-horizontal(globals.$ion-space-300, null);
193+
}
194+
195+
:host(.searchbar-size-small) .searchbar-clear-button {
196+
// End is based on the desired padding end from design.
197+
@include globals.position-horizontal(null, globals.$ion-space-300);
198+
}
199+
200+
/* Medium */
201+
:host(.searchbar-size-medium) .searchbar-input {
202+
/**
203+
* Padding start is based on
204+
* desired padding from design,
205+
* the size of the leading icon (search or cancel),
206+
* and the gap between the icon and the input.
207+
*
208+
* Padding end is based on
209+
* desired padding from design,
210+
* the size of the trailing icon (clear),
211+
* and the gap between the icon and the input.
212+
*/
213+
@include globals.padding-horizontal(calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200));
214+
215+
height: globals.$ion-scale-1200;
216+
}
217+
218+
:host(.searchbar-size-medium) .searchbar-search-icon,
219+
:host(.searchbar-size-medium) .searchbar-cancel-button {
220+
// Start is based on the desired padding start from design.
221+
@include globals.position-horizontal(globals.$ion-space-400, null);
222+
}
223+
224+
:host(.searchbar-size-medium) .searchbar-clear-button {
225+
// End is based on the desired padding end from design.
226+
@include globals.position-horizontal(null, globals.$ion-space-400);
227+
}
228+
229+
/* Large */
230+
:host(.searchbar-size-large) .searchbar-search-icon,
231+
:host(.searchbar-size-large) .searchbar-cancel-button {
232+
width: globals.$ion-scale-500;
233+
height: globals.$ion-scale-500;
234+
}
235+
236+
:host(.searchbar-size-large) .searchbar-cancel-button {
237+
font-size: globals.$ion-font-size-500;
238+
}
239+
240+
:host-context(ion-toolbar).searchbar-size-large.searchbar-should-show-cancel .searchbar-input {
241+
/**
242+
* Padding start is based on
243+
* the alignment of the back button,
244+
* the size of the leading icon (search or cancel),
245+
* and the gap between the icon and the input.
246+
*/
247+
padding-inline-start: calc(9px + globals.$ion-scale-500 + globals.$ion-space-200);
248+
}
249+
250+
:host(.searchbar-size-large) .searchbar-input {
251+
@include globals.padding(globals.$ion-space-400, null);
252+
253+
/**
254+
* Padding start is based on
255+
* desired padding from design,
256+
* the size of the leading icon (search or cancel),
257+
* and the gap between the icon and the input.
258+
*
259+
* Padding end is based on
260+
* desired padding from design,
261+
* the size of the trailing icon (clear),
262+
* and the gap between the icon and the input.
263+
*/
264+
@include globals.padding-horizontal(
265+
calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
266+
calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
267+
);
268+
269+
height: globals.$ion-scale-1400;
270+
}
271+
272+
:host(.searchbar-size-large) .searchbar-search-icon,
273+
:host(.searchbar-size-large) .searchbar-cancel-button {
274+
// Start is based on the desired padding start from design.
275+
@include globals.position-horizontal(globals.$ion-space-500, null);
276+
}
277+
278+
:host(.searchbar-size-large) .searchbar-clear-button {
279+
// End is based on the desired padding end from design.
280+
@include globals.position-horizontal(null, globals.$ion-space-500);
281+
}

‎core/src/components/searchbar/searchbar.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,10 +220,19 @@ export class Searchbar implements ComponentInterface {
220220
* Set to `"soft"` for a searchbar with slightly rounded corners,
221221
* `"round"` for a searchbar with fully rounded corners,
222222
* or `"rectangular"` for a searchbar without rounded corners.
223+
*
223224
* Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
224225
*/
225226
@Prop() shape?: 'soft' | 'round' | 'rectangular';
226227

228+
/**
229+
* Set to `"large"` for a searchbar with an increase in height,
230+
* while "small" and "medium" provide progressively smaller heights.
231+
*
232+
* Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
233+
*/
234+
@Prop() size?: 'small' | 'medium' | 'large';
235+
227236
/**
228237
* Emitted when the `value` of the `ion-searchbar` element has changed.
229238
*/
@@ -636,6 +645,22 @@ export class Searchbar implements ComponentInterface {
636645
return shape;
637646
}
638647

648+
private getSize(): string | undefined {
649+
const theme = getIonTheme(this);
650+
const { size } = this;
651+
652+
// TODO(ROU-11678): Remove theme check when sizes are defined for all themes.
653+
if (theme !== 'ionic') {
654+
return undefined;
655+
}
656+
657+
if (size === undefined) {
658+
return 'medium';
659+
}
660+
661+
return size;
662+
}
663+
639664
/**
640665
* Get the icon to use for the clear icon.
641666
* If an icon is set on the component, use that.
@@ -723,6 +748,7 @@ export class Searchbar implements ComponentInterface {
723748
const theme = getIonTheme(this);
724749
const shouldShowCancelButton = this.shouldShowCancelButton();
725750
const shape = this.getShape();
751+
const size = this.getSize();
726752

727753
const cancelButton = this.showCancelButton !== 'never' && (
728754
<button
@@ -760,6 +786,7 @@ export class Searchbar implements ComponentInterface {
760786
'searchbar-should-show-clear': this.shouldShowClearButton(),
761787
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
762788
[`searchbar-shape-${shape}`]: shape !== undefined,
789+
[`searchbar-size-${size}`]: size !== undefined,
763790
})}
764791
>
765792
<div class="searchbar-input-container">

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,19 @@ <h5 class="ion-padding-start ion-padding-top">Search - Never Show Cancel Button<
3838
<h5 class="ion-padding-start ion-padding-top">Search - Show Cancel Button on Focus</h5>
3939
<ion-searchbar id="focusCancel" value="after view" animated="true" show-cancel-button="focus"> </ion-searchbar>
4040

41+
<h5 class="ion-padding-start ion-padding-top">Search - Show Cancel Button within Toolbar</h5>
42+
<ion-header>
43+
<ion-toolbar>
44+
<ion-buttons slot="start">
45+
<ion-back-button default-href="#"></ion-back-button>
46+
</ion-buttons>
47+
<ion-title>Test</ion-title>
48+
</ion-toolbar>
49+
<ion-toolbar>
50+
<ion-searchbar show-cancel-button="always"></ion-searchbar>
51+
</ion-toolbar>
52+
</ion-header>
53+
4154
<h5 class="ion-padding-start ion-padding-top">Search - No Clear Button</h5>
4255
<ion-searchbar id="noClear" value="after view" type="text" show-clear-button="never"> </ion-searchbar>
4356

‎core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

-77 Bytes
Loading

‎core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

-39 Bytes
Loading

‎core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-back-button-align-ionic-md-ltr-light-Mobile-Safari-linux.png‎

-53 Bytes
Loading

‎core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

-48 Bytes
Loading

‎core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

-26 Bytes
Loading

0 commit comments

Comments
 (0)