Skip to content

Commit 2f6cf04

Browse files
thetaPCthetaPC
committed
refactor(searchbar): update default styles for ionic theme
1 parent 7002933 commit 2f6cf04

File tree

3 files changed

+130
-26
lines changed

3 files changed

+130
-26
lines changed

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

Lines changed: 99 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,57 @@
1-
@use "searchbar.common";
21
@use "../../themes/ionic/ionic.globals.scss" as globals;
2+
@use "searchbar.common";
3+
@use "./searchbar.ionic.vars" as searchbarVars;
34

45
// Ionic Searchbar
56
// --------------------------------------------------
67

78
:host {
9+
/**
10+
* @prop --focus-ring-color: The color of the ring around the focused element.
11+
* @prop --focus-ring-width: The width of the ring around the focused element.
12+
*/
813
--background: #{globals.$ionic-color-neutral-100};
9-
--border-radius: #{globals.$ionic-border-radius-800};
14+
--border-radius: #{globals.$ionic-border-radius-400};
1015
--box-shadow: none;
1116
--cancel-button-color: #{globals.$ionic-color-neutral-800};
12-
--clear-button-color: #{globals.$ionic-color-neutral-800};
13-
--color: #{globals.$ionic-color-neutral-800};
17+
--clear-button-color: #{globals.$ionic-color-neutral-1000};
18+
--color: #{globals.$ionic-color-neutral-1200};
1419
--icon-color: #{globals.$ionic-color-neutral-800};
20+
--placeholder-color: #{globals.$ionic-color-neutral-800};
21+
--focus-ring-color: #{globals.$ionic-state-focus-1};
22+
--focus-ring-width: #{globals.$ionic-border-size-050};
1523

24+
@include globals.typography(globals.$ionic-body-md-regular);
1625
@include globals.padding(0);
17-
18-
min-height: globals.$ionic-scale-1000;
19-
20-
contain: content;
21-
}
22-
23-
.searchbar-input-container {
24-
min-height: globals.$ionic-scale-1000;
2526
}
2627

2728
// Searchbar Search Icon
2829
// -----------------------------------------
2930

3031
.searchbar-search-icon {
31-
display: none;
32+
@include globals.position(
33+
searchbarVars.$searchbar-ionic-input-search-icon-size,
34+
null,
35+
null,
36+
searchbarVars.$searchbar-ionic-input-search-icon-size
37+
);
38+
39+
width: searchbarVars.$searchbar-ionic-input-search-icon-size;
40+
height: searchbarVars.$searchbar-ionic-input-search-icon-size;
3241
}
3342

3443
// Searchbar Input Field
3544
// -----------------------------------------
3645

3746
.searchbar-input {
38-
@include globals.padding(globals.$ionic-space-300);
39-
40-
height: 100%;
47+
@include globals.padding(
48+
globals.$ionic-space-300,
49+
searchbarVars.$searchbar-ionic-padding-end,
50+
globals.$ionic-space-300,
51+
searchbarVars.$searchbar-ionic-padding-start
52+
);
4153

42-
font-size: globals.$ionic-font-size-350;
43-
font-weight: globals.$ionic-font-weight-regular;
54+
min-height: globals.$ionic-scale-1200;
4455

4556
contain: strict;
4657
}
@@ -49,14 +60,15 @@
4960
// -----------------------------------------
5061

5162
.searchbar-clear-button {
52-
@include globals.position(50%, globals.$ionic-space-200, null, null);
53-
54-
position: absolute;
63+
@include globals.position(
64+
searchbarVars.$searchbar-ionic-input-clear-icon-size,
65+
searchbarVars.$searchbar-ionic-input-clear-icon-size,
66+
null,
67+
null
68+
);
5569

56-
width: globals.$ionic-scale-600;
57-
height: globals.$ionic-scale-600;
58-
59-
transform: translateY(-50%);
70+
width: searchbarVars.$searchbar-ionic-input-clear-icon-size;
71+
height: searchbarVars.$searchbar-ionic-input-clear-icon-size;
6072

6173
background-color: transparent;
6274

@@ -65,9 +77,70 @@
6577
contain: strict;
6678
}
6779

80+
// Searchbar Cancel Icon
81+
// -----------------------------------------
82+
83+
.searchbar-cancel-button {
84+
/**
85+
* The left edge of the cancel button
86+
* should align with the left edge
87+
* of the back button if the searchbar
88+
* is used in a toolbar.
89+
*/
90+
@include globals.position(0, null, null, 9px);
91+
92+
font-size: globals.$ionic-font-size-400;
93+
}
94+
95+
// Searchbar Search & Clear Icon & Cancel Icon
96+
// -----------------------------------------
97+
98+
.searchbar-search-icon,
99+
.searchbar-clear-button,
100+
.searchbar-cancel-button {
101+
position: absolute;
102+
}
103+
68104
// Searchbar in Toolbar
69105
// -----------------------------------------
70106

71107
:host-context(ion-toolbar) {
72-
min-height: globals.$ionic-scale-1000;
108+
min-height: globals.$ionic-scale-1200;
109+
}
110+
111+
// Searchbar States
112+
// --------------------------------------------------
113+
114+
/* Hover */
115+
:host(:hover) {
116+
--icon-color: #{globals.$ionic-color-neutral-900};
117+
}
118+
119+
/* Focus */
120+
:host(.searchbar-has-focus) .searchbar-input {
121+
outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color);
122+
}
123+
124+
:host(.searchbar-has-focus) .searchbar-search-icon {
125+
display: block;
126+
}
127+
128+
:host(.searchbar-has-focus) .searchbar-cancel-button,
129+
:host(.searchbar-should-show-cancel) .searchbar-cancel-button {
130+
display: block;
131+
}
132+
133+
:host(.searchbar-has-focus) .searchbar-cancel-button + .searchbar-search-icon,
134+
:host(.searchbar-should-show-cancel) .searchbar-cancel-button + .searchbar-search-icon {
135+
display: none;
136+
}
137+
138+
/* Disabled */
139+
:host(.searchbar-disabled) {
140+
--color: #{globals.$ionic-color-neutral-500};
141+
--icon-color: #{globals.$ionic-color-neutral-500};
142+
--placeholder-color: #{globals.$ionic-color-neutral-500};
143+
144+
cursor: default;
145+
pointer-events: none;
73146
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@use "../../themes/ionic/ionic.globals.scss" as globals;
2+
3+
// Ionic Searchbar
4+
// --------------------------------------------------
5+
6+
/// @prop - Size of the searchbar input search icon
7+
$searchbar-ionic-input-search-icon-size: globals.$ionic-scale-400;
8+
9+
/// @prop - Size of the searchbar input clear icon
10+
$searchbar-ionic-input-clear-icon-size: globals.$ionic-scale-400;
11+
12+
/// @prop - Gap between searchbar elements
13+
$searchbar-ionic-gap: globals.$ionic-space-200;
14+
15+
/// @prop - Padding start of the searchbar
16+
$searchbar-ionic-padding-start: calc(
17+
globals.$ionic-space-400 + $searchbar-ionic-input-search-icon-size + $searchbar-ionic-gap
18+
);
19+
20+
/// @prop - Padding end of the searchbar
21+
$searchbar-ionic-padding-end: calc(
22+
globals.$ionic-space-400 + $searchbar-ionic-input-clear-icon-size + $searchbar-ionic-gap
23+
);

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@
1212
<script src="../../../../../scripts/testing/scripts.js"></script>
1313
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
1414
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
16+
<style>
17+
/* Remove the border that is added through the testing styling */
18+
ion-searchbar button {
19+
background: initial;
20+
border: none;
21+
}
22+
</style>
1523
</head>
1624

1725
<body>

0 commit comments

Comments
 (0)