Skip to content

Commit b24cc94

Browse files
thetaPCthetaPC
committed
feat(searchbar): add sizes for ionic theme
1 parent d73faf5 commit b24cc94

File tree

6 files changed

+133
-31
lines changed

6 files changed

+133
-31
lines changed

‎core/src/components.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3115,6 +3115,10 @@ export namespace Components {
31153115
* 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.
31163116
*/
31173117
"showClearButton": 'never' | 'focus' | 'always';
3118+
/**
3119+
* Set to `"large"` for a searchbar with an increase in height, or `"medium"` for a searchbar with a medium height. Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
3120+
*/
3121+
"size"?: 'medium' | 'large';
31183122
/**
31193123
* If `true`, enable spellcheck on the input.
31203124
*/
@@ -8522,6 +8526,10 @@ declare namespace LocalJSX {
85228526
* 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.
85238527
*/
85248528
"showClearButton"?: 'never' | 'focus' | 'always';
8529+
/**
8530+
* Set to `"large"` for a searchbar with an increase in height, or `"medium"` for a searchbar with a medium height. Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
8531+
*/
8532+
"size"?: 'medium' | 'large';
85258533
/**
85268534
* If `true`, enable spellcheck on the input.
85278535
*/

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

Lines changed: 66 additions & 29 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
}
@@ -50,14 +47,7 @@
5047
* the size of the clear icon,
5148
* and the gap between the icon and the input.
5249
*/
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;
50+
@include globals.padding(globals.$ion-space-300, null);
6151

6252
contain: strict;
6353
}
@@ -66,9 +56,6 @@
6656
// -----------------------------------------
6757

6858
.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-
7259
width: globals.$ion-scale-400;
7360
height: globals.$ion-scale-400;
7461

@@ -83,14 +70,6 @@
8370
// -----------------------------------------
8471

8572
.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);
93-
9473
background-color: transparent;
9574

9675
font-size: globals.$ion-font-size-400;
@@ -102,7 +81,11 @@
10281
.searchbar-search-icon,
10382
.searchbar-clear-button,
10483
.searchbar-cancel-button {
84+
@include globals.position(50%, null);
85+
10586
position: absolute;
87+
88+
transform: translateY(-50%);
10689
}
10790

10891
// Clear Icon & Cancel Icon
@@ -117,13 +100,6 @@
117100
opacity: 1;
118101
}
119102

120-
// Searchbar in Toolbar
121-
// -----------------------------------------
122-
123-
:host-context(ion-toolbar) {
124-
min-height: globals.$ion-scale-1200;
125-
}
126-
127103
// Searchbar States
128104
// --------------------------------------------------
129105

@@ -157,3 +133,64 @@
157133
cursor: default;
158134
pointer-events: none;
159135
}
136+
137+
// Searchbar Sizes
138+
// --------------------------------------------------
139+
140+
/* Medium */
141+
:host(.searchbar-size-medium) .searchbar-input {
142+
/**
143+
* Padding start is based on
144+
* desired padding from design,
145+
* the size of the search icon,
146+
* and the gap between the icon and the input.
147+
*
148+
* Padding end is based on
149+
* desired padding from design,
150+
* the size of the clear icon,
151+
* and the gap between the icon and the input.
152+
*/
153+
@include globals.padding-horizontal(calc(globals.$ion-space-400 + globals.$ion-scale-400 + globals.$ion-space-200));
154+
155+
min-height: globals.$ion-scale-1200;
156+
}
157+
158+
:host(.searchbar-size-medium) .searchbar-search-icon,
159+
:host(.searchbar-size-medium) .searchbar-cancel-button {
160+
// Start is based on the desired padding start from design.
161+
@include globals.position-horizontal(globals.$ion-space-400, null);
162+
}
163+
164+
:host(.searchbar-size-medium) .searchbar-clear-button {
165+
// End is based on the desired padding end from design.
166+
@include globals.position-horizontal(null, globals.$ion-scale-400);
167+
}
168+
169+
/* Large */
170+
:host(.searchbar-size-large) .searchbar-input {
171+
/**
172+
* Padding start is based on
173+
* desired padding from design,
174+
* the size of the search icon,
175+
* and the gap between the icon and the input.
176+
*
177+
* Padding end is based on
178+
* desired padding from design,
179+
* the size of the clear icon,
180+
* and the gap between the icon and the input.
181+
*/
182+
@include globals.padding-horizontal(calc(globals.$ion-space-500 + globals.$ion-scale-400 + globals.$ion-space-200));
183+
184+
min-height: globals.$ion-scale-1400;
185+
}
186+
187+
:host(.searchbar-size-large) .searchbar-search-icon,
188+
:host(.searchbar-size-large) .searchbar-cancel-button {
189+
// Start is based on the desired padding start from design.
190+
@include globals.position-horizontal(globals.$ion-space-500, null);
191+
}
192+
193+
:host(.searchbar-size-large) .searchbar-clear-button {
194+
// End is based on the desired padding end from design.
195+
@include globals.position-horizontal(null, globals.$ion-scale-500);
196+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,13 @@ export class Searchbar implements ComponentInterface {
216216
*/
217217
@Prop({ mutable: true }) value?: string | null = '';
218218

219+
/**
220+
* Set to `"large"` for a searchbar with an increase in height,
221+
* or `"medium"` for a searchbar with a medium height.
222+
* Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
223+
*/
224+
@Prop() size?: 'medium' | 'large';
225+
219226
/**
220227
* Emitted when the `value` of the `ion-searchbar` element has changed.
221228
*/
@@ -612,6 +619,22 @@ export class Searchbar implements ComponentInterface {
612619
return true;
613620
}
614621

622+
private getSize(): string | undefined {
623+
const theme = getIonTheme(this);
624+
const { size } = this;
625+
626+
// TODO(ROU-11678): Remove theme check when sizes are defined for all themes.
627+
if (theme !== 'ionic') {
628+
return undefined;
629+
}
630+
631+
if (size === undefined) {
632+
return 'medium';
633+
}
634+
635+
return size;
636+
}
637+
615638
/**
616639
* Get the icon to use for the clear icon.
617640
* If an icon is set on the component, use that.
@@ -698,6 +721,7 @@ export class Searchbar implements ComponentInterface {
698721
const animated = this.animated && config.getBoolean('animated', true);
699722
const theme = getIonTheme(this);
700723
const shouldShowCancelButton = this.shouldShowCancelButton();
724+
const size = this.getSize();
701725

702726
const cancelButton = this.showCancelButton !== 'never' && (
703727
<button
@@ -734,6 +758,7 @@ export class Searchbar implements ComponentInterface {
734758
'searchbar-has-focus': this.focused,
735759
'searchbar-should-show-clear': this.shouldShowClearButton(),
736760
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
761+
[`searchbar-size-${size}`]: size !== undefined,
737762
})}
738763
>
739764
<div class="searchbar-input-container">

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Searchbar - Size</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-content>
20+
<h5 class="ion-padding-start ion-padding-top">Search - Default</h5>
21+
<ion-searchbar show-clear-button="always" value="Filled text"></ion-searchbar>
22+
23+
<h5 class="ion-padding-start ion-padding-top">Search - Medium</h5>
24+
<ion-searchbar size="medium" show-clear-button="always" value="Filled text"></ion-searchbar>
25+
26+
<h5 class="ion-padding-start ion-padding-top">Search - Large</h5>
27+
<ion-searchbar size="large" show-clear-button="always" value="Filled text"></ion-searchbar>
28+
</ion-content>
29+
</ion-app>
30+
</body>
31+
</html>

‎packages/angular/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1900,15 +1900,15 @@ export declare interface IonRow extends Components.IonRow {}
19001900

19011901

19021902
@ProxyCmp({
1903-
inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'theme', 'type', 'value'],
1903+
inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'size', 'spellcheck', 'theme', 'type', 'value'],
19041904
methods: ['setFocus', 'getInputElement']
19051905
})
19061906
@Component({
19071907
selector: 'ion-searchbar',
19081908
changeDetection: ChangeDetectionStrategy.OnPush,
19091909
template: '<ng-content></ng-content>',
19101910
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1911-
inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'theme', 'type', 'value'],
1911+
inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'size', 'spellcheck', 'theme', 'type', 'value'],
19121912
})
19131913
export class IonSearchbar {
19141914
protected el: HTMLElement;

‎packages/vue/src/proxies.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -737,6 +737,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
737737
'spellcheck',
738738
'type',
739739
'value',
740+
'size',
740741
'ionInput',
741742
'ionChange',
742743
'ionCancel',

0 commit comments

Comments
 (0)