Skip to content

Commit 5dae2dc

Browse files
brandyscarneybrandyscarney
committed
Merge branch 'next' into chore-merge-main-into-next
2 parents e6c1318 + 723868d commit 5dae2dc

File tree

24 files changed

+284
-59
lines changed

24 files changed

+284
-59
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1895,7 +1895,7 @@ ion-searchbar,prop,minlength,number | undefined,undefined,false,false
18951895
ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
18961896
ion-searchbar,prop,name,string,this.inputId,false,false
18971897
ion-searchbar,prop,placeholder,string,'Search',false,false
1898-
ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
1898+
ion-searchbar,prop,searchIcon,boolean | string | undefined,undefined,false,false
18991899
ion-searchbar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
19001900
ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
19011901
ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false

‎core/src/components.d.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3077,7 +3077,7 @@ export namespace Components {
30773077
*/
30783078
"cancelButtonIcon"?: string;
30793079
/**
3080-
* Set the the cancel button text. Only available when the theme is `"ios"`.
3080+
* Set the cancel button text. Only available when the theme is `"ios"`.
30813081
*/
30823082
"cancelButtonText": string;
30833083
/**
@@ -3129,9 +3129,9 @@ export namespace Components {
31293129
*/
31303130
"placeholder": string;
31313131
/**
3132-
* 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.
3132+
* 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.
31333133
*/
3134-
"searchIcon"?: string;
3134+
"searchIcon"?: string | boolean;
31353135
/**
31363136
* 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.
31373137
*/
@@ -8524,7 +8524,7 @@ declare namespace LocalJSX {
85248524
*/
85258525
"cancelButtonIcon"?: string;
85268526
/**
8527-
* Set the the cancel button text. Only available when the theme is `"ios"`.
8527+
* Set the cancel button text. Only available when the theme is `"ios"`.
85288528
*/
85298529
"cancelButtonText"?: string;
85308530
/**
@@ -8600,9 +8600,9 @@ declare namespace LocalJSX {
86008600
*/
86018601
"placeholder"?: string;
86028602
/**
8603-
* 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.
8603+
* 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.
86048604
*/
8605-
"searchIcon"?: string;
8605+
"searchIcon"?: string | boolean;
86068606
/**
86078607
* 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.
86088608
*/

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

Lines changed: 197 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@
99
* @prop --focus-ring-color: The color of the ring around the focused element.
1010
* @prop --focus-ring-width: The width of the ring around the focused element.
1111
*/
12-
--background: #{globals.$ion-primitives-neutral-100};
12+
--background: #{globals.$ion-bg-neutral-subtle-default};
1313
--border-radius: #{globals.$ion-border-radius-400};
1414
--box-shadow: none;
1515
--cancel-button-color: #{globals.$ion-primitives-neutral-800};
1616
--clear-button-color: #{globals.$ion-primitives-neutral-1000};
1717
--color: #{globals.$ion-primitives-neutral-1200};
18-
--icon-color: #{globals.$ion-primitives-neutral-800};
19-
--placeholder-color: #{globals.$ion-primitives-neutral-800};
18+
--icon-color: #{globals.$ion-icon-subtlest};
19+
--placeholder-color: #{globals.$ion-text-subtlest};
2020
--focus-ring-color: #{globals.$ion-border-focus-default};
2121
--focus-ring-width: #{globals.$ion-border-size-050};
2222

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

41+
text-overflow: ellipsis;
42+
4143
contain: strict;
4244
}
4345

@@ -67,7 +69,7 @@
6769
font-size: globals.$ion-font-size-400;
6870
}
6971

70-
// Searchbar Search & Clear Icon & Cancel Icon
72+
// Searchbar Search Icon & Clear Icon & Cancel Icon
7173
// -----------------------------------------
7274

7375
.searchbar-search-icon,
@@ -80,7 +82,7 @@
8082
transform: translateY(-50%);
8183
}
8284

83-
// Clear Icon & Cancel Icon
85+
// Searchbar Clear Icon & Cancel Icon
8486
// -----------------------------------------
8587

8688
.searchbar-clear-button:focus-visible,
@@ -92,10 +94,20 @@
9294
opacity: 1;
9395
}
9496

97+
// Searchbar Search Icon & Cancel Icon
98+
// -----------------------------------------
99+
:host(:not(.searchbar-has-leading-icons)) {
100+
$leading-icon-padding: #{globals.$ion-scale-0};
101+
}
102+
103+
:host(.searchbar-has-value) {
104+
--icon-color: #{globals.$ion-icon-default};
105+
}
106+
95107
// Searchbar in Toolbar
96108
// -----------------------------------------
97109

98-
:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
110+
:host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
99111
/**
100112
* The left edge of the cancel button
101113
* should align with the left edge
@@ -106,16 +118,6 @@
106118
@include globals.position-horizontal(9px, null);
107119
}
108120

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);
117-
}
118-
119121
// Searchbar States
120122
// --------------------------------------------------
121123

@@ -143,8 +145,8 @@
143145
/* Disabled */
144146
:host(.searchbar-disabled) {
145147
--color: #{globals.$ion-primitives-neutral-500};
146-
--icon-color: #{globals.$ion-primitives-neutral-500};
147-
--placeholder-color: #{globals.$ion-primitives-neutral-500};
148+
--icon-color: #{globals.$ion-icon-disabled};
149+
--placeholder-color: #{globals.$ion-text-disabled};
148150

149151
cursor: default;
150152
pointer-events: none;
@@ -170,6 +172,42 @@
170172

171173
/* Small */
172174
:host(.searchbar-size-small) .searchbar-input {
175+
/**
176+
* Padding start is based on
177+
* desired padding from design,
178+
* no leading icons.
179+
*
180+
* Padding end is based on
181+
* desired padding from design,
182+
* no trailing icons.
183+
*/
184+
@include globals.padding-horizontal(globals.$ion-space-300);
185+
186+
height: globals.$ion-scale-1000;
187+
}
188+
189+
/* Small with Leading Icons */
190+
:host(.searchbar-size-small.searchbar-should-show-search-icon) .searchbar-input,
191+
:host(.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input {
192+
/**
193+
* Padding start is based on
194+
* desired padding from design,
195+
* the size of the leading icon (search or cancel),
196+
* and the gap between the icon and the input.
197+
*
198+
* Padding end is based on
199+
* desired padding from design,
200+
* no trailing icons.
201+
*/
202+
@include globals.padding-horizontal(
203+
calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200),
204+
globals.$ion-space-300
205+
);
206+
}
207+
208+
/* Small with Leading Icons and Trailing Icons */
209+
:host(.searchbar-size-small.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
210+
:host(.searchbar-size-small.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
173211
/**
174212
* Padding start is based on
175213
* desired padding from design,
@@ -182,8 +220,24 @@
182220
* and the gap between the icon and the input.
183221
*/
184222
@include globals.padding-horizontal(calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200));
223+
}
185224

186-
height: globals.$ion-scale-1000;
225+
/* Small with Trailing Icons */
226+
:host(.searchbar-size-small.searchbar-should-show-clear) .searchbar-input {
227+
/**
228+
* Padding start is based on
229+
* desired padding from design,
230+
* no leading icons.
231+
*
232+
* Padding end is based on
233+
* desired padding from design,
234+
* the size of the trailing icon (clear),
235+
* and the gap between the icon and the input.
236+
*/
237+
@include globals.padding-horizontal(
238+
globals.$ion-space-300,
239+
calc(globals.$ion-space-300 + globals.$ion-scale-400 + globals.$ion-space-200)
240+
);
187241
}
188242

189243
:host(.searchbar-size-small) .searchbar-search-icon,
@@ -199,6 +253,42 @@
199253

200254
/* Medium */
201255
:host(.searchbar-size-medium) .searchbar-input {
256+
/**
257+
* Padding start is based on
258+
* desired padding from design,
259+
* no leading icons.
260+
*
261+
* Padding end is based on
262+
* desired padding from design,
263+
* no trailing icons.
264+
*/
265+
@include globals.padding-horizontal(globals.$ion-space-400);
266+
267+
height: globals.$ion-scale-1200;
268+
}
269+
270+
/* Medium with Leading Icons */
271+
:host(.searchbar-size-medium.searchbar-should-show-search-icon) .searchbar-input,
272+
:host(.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
273+
/**
274+
* Padding start is based on
275+
* desired padding from design,
276+
* the size of the leading icon (search or cancel),
277+
* and the gap between the icon and the input.
278+
*
279+
* Padding end is based on
280+
* desired padding from design,
281+
* no trailing icons.
282+
*/
283+
@include globals.padding-horizontal(
284+
calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200),
285+
globals.$ion-space-400
286+
);
287+
}
288+
289+
/* Medium with Leading Icons and Trailing Icons */
290+
:host(.searchbar-size-medium.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
291+
:host(.searchbar-size-medium.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
202292
/**
203293
* Padding start is based on
204294
* desired padding from design,
@@ -211,8 +301,24 @@
211301
* and the gap between the icon and the input.
212302
*/
213303
@include globals.padding-horizontal(calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200));
304+
}
214305

215-
height: globals.$ion-scale-1200;
306+
/* Medium with Trailing Icons */
307+
:host(.searchbar-size-medium.searchbar-should-show-clear) .searchbar-input {
308+
/**
309+
* Padding start is based on
310+
* desired padding from design,
311+
* no leading icons.
312+
*
313+
* Padding end is based on
314+
* desired padding from design,
315+
* the size of the trailing icon (clear),
316+
* and the gap between the icon and the input.
317+
*/
318+
@include globals.padding-horizontal(
319+
globals.$ion-space-400,
320+
calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200)
321+
);
216322
}
217323

218324
:host(.searchbar-size-medium) .searchbar-search-icon,
@@ -226,6 +332,17 @@
226332
@include globals.position-horizontal(null, globals.$ion-space-400);
227333
}
228334

335+
:host(.in-toolbar.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input,
336+
:host(.in-toolbar.searchbar-size-medium.searchbar-should-show-cancel) .searchbar-input {
337+
/**
338+
* Padding start is based on
339+
* the alignment of the back button,
340+
* the size of the leading icon (search or cancel),
341+
* and the gap between the icon and the input.
342+
*/
343+
padding-inline-start: calc(9px + globals.$ion-scale-400 + globals.$ion-space-200);
344+
}
345+
229346
/* Large */
230347
:host(.searchbar-size-large) .searchbar-search-icon,
231348
:host(.searchbar-size-large) .searchbar-cancel-button {
@@ -237,19 +354,47 @@
237354
font-size: globals.$ion-font-size-500;
238355
}
239356

240-
:host-context(ion-toolbar).searchbar-size-large.searchbar-should-show-cancel .searchbar-input {
357+
:host(.searchbar-size-large) .searchbar-input {
358+
@include globals.padding(globals.$ion-space-400, null);
359+
241360
/**
242361
* Padding start is based on
243-
* the alignment of the back button,
362+
* desired padding from design,
244363
* the size of the leading icon (search or cancel),
245364
* and the gap between the icon and the input.
365+
*
366+
* Padding end is based on
367+
* desired padding from design,
368+
* the size of the trailing icon (clear),
369+
* and the gap between the icon and the input.
246370
*/
247-
padding-inline-start: calc(9px + globals.$ion-scale-500 + globals.$ion-space-200);
371+
@include globals.padding-horizontal(globals.$ion-space-500);
372+
373+
height: globals.$ion-scale-1400;
248374
}
249375

250-
:host(.searchbar-size-large) .searchbar-input {
251-
@include globals.padding(globals.$ion-space-400, null);
376+
/* Large with Leading Icons */
377+
:host(.searchbar-size-large.searchbar-should-show-search-icon) .searchbar-input,
378+
:host(.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
379+
/**
380+
* Padding start is based on
381+
* desired padding from design,
382+
* the size of the leading icon (search or cancel),
383+
* and the gap between the icon and the input.
384+
*
385+
* Padding end is based on
386+
* desired padding from design,
387+
* no trailing icons.
388+
*/
389+
@include globals.padding-horizontal(
390+
calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
391+
globals.$ion-space-500
392+
);
393+
}
252394

395+
/* Large with Leading Icons and Trailing Icons */
396+
:host(.searchbar-size-large.searchbar-should-show-search-icon.searchbar-should-show-clear) .searchbar-input,
397+
:host(.searchbar-size-large.searchbar-should-show-cancel.searchbar-should-show-clear) .searchbar-input {
253398
/**
254399
* Padding start is based on
255400
* desired padding from design,
@@ -265,8 +410,34 @@
265410
calc(globals.$ion-space-500 + globals.$ion-scale-500 + globals.$ion-space-200),
266411
calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
267412
);
413+
}
268414

269-
height: globals.$ion-scale-1400;
415+
/* Large with Trailing Icons */
416+
:host(.searchbar-size-large.searchbar-should-show-clear) .searchbar-input {
417+
/**
418+
* Padding start is based on
419+
* desired padding from design,
420+
* no leading icons.
421+
*
422+
* Padding end is based on
423+
* desired padding from design,
424+
* the size of the trailing icon (clear),
425+
* and the gap between the icon and the input.
426+
*/
427+
@include globals.padding-horizontal(
428+
globals.$ion-space-500,
429+
calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200)
430+
);
431+
}
432+
433+
:host(.in-toolbar.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
434+
/**
435+
* Padding start is based on
436+
* the alignment of the back button,
437+
* the size of the leading icon (search or cancel),
438+
* and the gap between the icon and the input.
439+
*/
440+
padding-inline-start: calc(9px + globals.$ion-scale-500 + globals.$ion-space-200);
270441
}
271442

272443
:host(.searchbar-size-large) .searchbar-search-icon,

0 commit comments

Comments
 (0)