Skip to content

Commit 3692846

Browse files
brandyscarneybrandyscarney
committed
feat(badge): add subtle hue for the ionic theme
1 parent 2a0fdf3 commit 3692846

File tree

3 files changed

+103
-1
lines changed

3 files changed

+103
-1
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,20 @@
2020
font-weight: globals.$ion-font-weight-medium;
2121
}
2222

23+
// Subtle Badge
24+
// --------------------------------------------------
25+
26+
:host(.badge-subtle) {
27+
--background: #{globals.ion-color(primary, base, $subtle: true)};
28+
--background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
29+
--color: #{globals.ion-color(primary, contrast, $subtle: true)};
30+
}
31+
32+
:host(.badge-subtle.ion-color) {
33+
background: globals.current-color(base, $subtle: true);
34+
color: globals.current-color(contrast, $subtle: true);
35+
}
36+
2337
// Badge Shapes
2438
// --------------------------------------------------
2539

‎core/src/components/badge/badge.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ export class Badge implements ComponentInterface {
2828
*/
2929
@Prop({ reflect: true }) color?: Color;
3030

31+
/**
32+
* Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for
33+
* a badge with muted, subtle colors.
34+
*/
35+
@Prop() hue?: 'bold' | 'subtle' = 'bold';
36+
3137
/**
3238
* Set to `"rectangular"` for non-rounded corners.
3339
* Set to `"soft"` for slightly rounded corners.
@@ -88,6 +94,7 @@ export class Badge implements ComponentInterface {
8894
}
8995

9096
render() {
97+
const { hue } = this;
9198
const shape = this.getShape();
9299
const size = this.getSize();
93100
const theme = getIonTheme(this);
@@ -96,6 +103,7 @@ export class Badge implements ComponentInterface {
96103
<Host
97104
class={createColorClasses(this.color, {
98105
[theme]: true,
106+
[`badge-${hue}`]: hue !== undefined,
99107
[`badge-${shape}`]: shape !== undefined,
100108
[`badge-${size}`]: size !== undefined,
101109
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,

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

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,72 +30,112 @@
3030
<ion-item>
3131
<ion-label>Default Badge</ion-label>
3232
<ion-badge slot="end">00</ion-badge>
33+
<ion-badge slot="end" hue="subtle">00</ion-badge>
3334
<ion-badge slot="end">
3435
<ion-icon name="logo-ionic"></ion-icon>
3536
</ion-badge>
37+
<ion-badge slot="end" hue="subtle">
38+
<ion-icon name="logo-ionic"></ion-icon>
39+
</ion-badge>
3640
</ion-item>
3741
<ion-item>
3842
<ion-label>Primary Badge</ion-label>
3943
<ion-badge slot="end" color="primary">11</ion-badge>
44+
<ion-badge slot="end" hue="subtle" color="primary">11</ion-badge>
4045
<ion-badge slot="end" color="primary">
4146
<ion-icon name="logo-ionic"></ion-icon>
4247
</ion-badge>
48+
<ion-badge slot="end" hue="subtle" color="primary">
49+
<ion-icon name="logo-ionic"></ion-icon>
50+
</ion-badge>
4351
</ion-item>
4452
<ion-item>
4553
<ion-label>Secondary Badge</ion-label>
4654
<ion-badge slot="end" color="secondary">22</ion-badge>
55+
<ion-badge slot="end" hue="subtle" color="secondary">22</ion-badge>
4756
<ion-badge slot="end" color="secondary">
4857
<ion-icon name="logo-ionic"></ion-icon>
4958
</ion-badge>
59+
<ion-badge slot="end" hue="subtle" color="secondary">
60+
<ion-icon name="logo-ionic"></ion-icon>
61+
</ion-badge>
5062
</ion-item>
5163
<ion-item>
5264
<ion-label>Tertiary Badge</ion-label>
5365
<ion-badge slot="end" color="tertiary">33</ion-badge>
66+
<ion-badge slot="end" hue="subtle" color="tertiary">33</ion-badge>
5467
<ion-badge slot="end" color="tertiary">
5568
<ion-icon name="logo-ionic"></ion-icon>
5669
</ion-badge>
70+
<ion-badge slot="end" hue="subtle" color="tertiary">
71+
<ion-icon name="logo-ionic"></ion-icon>
72+
</ion-badge>
5773
</ion-item>
5874
<ion-item>
5975
<ion-label>Success Badge</ion-label>
6076
<ion-badge slot="end" color="success">44</ion-badge>
77+
<ion-badge slot="end" hue="subtle" color="success">44</ion-badge>
6178
<ion-badge slot="end" color="success">
6279
<ion-icon name="logo-ionic"></ion-icon>
6380
</ion-badge>
81+
<ion-badge slot="end" hue="subtle" color="success">
82+
<ion-icon name="logo-ionic"></ion-icon>
83+
</ion-badge>
6484
</ion-item>
6585
<ion-item>
6686
<ion-label>Warning Badge</ion-label>
6787
<ion-badge slot="end" color="warning">55</ion-badge>
88+
<ion-badge slot="end" hue="subtle" color="warning">55</ion-badge>
6889
<ion-badge slot="end" color="warning">
6990
<ion-icon name="logo-ionic"></ion-icon>
7091
</ion-badge>
92+
<ion-badge slot="end" hue="subtle" color="warning">
93+
<ion-icon name="logo-ionic"></ion-icon>
94+
</ion-badge>
7195
</ion-item>
7296
<ion-item>
7397
<ion-label>Danger Badge</ion-label>
7498
<ion-badge slot="end" color="danger">66</ion-badge>
99+
<ion-badge slot="end" hue="subtle" color="danger">66</ion-badge>
75100
<ion-badge slot="end" color="danger">
76101
<ion-icon name="logo-ionic"></ion-icon>
77102
</ion-badge>
103+
<ion-badge slot="end" hue="subtle" color="danger">
104+
<ion-icon name="logo-ionic"></ion-icon>
105+
</ion-badge>
78106
</ion-item>
79107
<ion-item>
80108
<ion-label>Light Badge</ion-label>
81109
<ion-badge slot="end" color="light">77</ion-badge>
110+
<ion-badge slot="end" hue="subtle" color="light">77</ion-badge>
82111
<ion-badge slot="end" color="light">
83112
<ion-icon name="logo-ionic"></ion-icon>
84113
</ion-badge>
114+
<ion-badge slot="end" hue="subtle" color="light">
115+
<ion-icon name="logo-ionic"></ion-icon>
116+
</ion-badge>
85117
</ion-item>
86118
<ion-item>
87119
<ion-label>Medium Badge</ion-label>
88120
<ion-badge slot="end" color="medium">88</ion-badge>
121+
<ion-badge slot="end" hue="subtle" color="medium">88</ion-badge>
89122
<ion-badge slot="end" color="medium">
90123
<ion-icon name="logo-ionic"></ion-icon>
91124
</ion-badge>
125+
<ion-badge slot="end" hue="subtle" color="medium">
126+
<ion-icon name="logo-ionic"></ion-icon>
127+
</ion-badge>
92128
</ion-item>
93129
<ion-item>
94130
<ion-label>Dark Badge</ion-label>
95131
<ion-badge slot="end" color="dark">99</ion-badge>
132+
<ion-badge slot="end" hue="subtle" color="dark">99</ion-badge>
96133
<ion-badge slot="end" color="dark">
97134
<ion-icon name="logo-ionic"></ion-icon>
98135
</ion-badge>
136+
<ion-badge slot="end" hue="subtle" color="dark">
137+
<ion-icon name="logo-ionic"></ion-icon>
138+
</ion-badge>
99139
</ion-item>
100140
<ion-item onclick="toggleColor()">
101141
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
@@ -110,72 +150,112 @@
110150
<ion-item>
111151
<ion-label>Default Badge</ion-label>
112152
<ion-badge slot="start">00</ion-badge>
113-
<ion-badge slot="start" color="primary">
153+
<ion-badge slot="start" hue="subtle">00</ion-badge>
154+
<ion-badge slot="start">
155+
<ion-icon name="logo-ionic"></ion-icon>
156+
</ion-badge>
157+
<ion-badge hue="subtle" slot="start">
114158
<ion-icon name="logo-ionic"></ion-icon>
115159
</ion-badge>
116160
</ion-item>
117161
<ion-item>
118162
<ion-label>Primary Badge</ion-label>
119163
<ion-badge slot="start" color="primary">11</ion-badge>
164+
<ion-badge slot="start" hue="subtle" color="primary">11</ion-badge>
120165
<ion-badge slot="start" color="primary">
121166
<ion-icon name="logo-ionic"></ion-icon>
122167
</ion-badge>
168+
<ion-badge slot="start" hue="subtle" color="primary">
169+
<ion-icon name="logo-ionic"></ion-icon>
170+
</ion-badge>
123171
</ion-item>
124172
<ion-item>
125173
<ion-label>Secondary Badge</ion-label>
126174
<ion-badge slot="start" color="secondary">22</ion-badge>
175+
<ion-badge slot="start" hue="subtle" color="secondary">22</ion-badge>
127176
<ion-badge slot="start" color="secondary">
128177
<ion-icon name="logo-ionic"></ion-icon>
129178
</ion-badge>
179+
<ion-badge slot="start" hue="subtle" color="secondary">
180+
<ion-icon name="logo-ionic"></ion-icon>
181+
</ion-badge>
130182
</ion-item>
131183
<ion-item>
132184
<ion-label>Tertiary Badge</ion-label>
133185
<ion-badge slot="start" color="tertiary">33</ion-badge>
186+
<ion-badge slot="start" hue="subtle" color="tertiary">33</ion-badge>
134187
<ion-badge slot="start" color="tertiary">
135188
<ion-icon name="logo-ionic"></ion-icon>
136189
</ion-badge>
190+
<ion-badge slot="start" hue="subtle" color="tertiary">
191+
<ion-icon name="logo-ionic"></ion-icon>
192+
</ion-badge>
137193
</ion-item>
138194
<ion-item>
139195
<ion-label>Success Badge</ion-label>
140196
<ion-badge slot="start" color="success">44</ion-badge>
197+
<ion-badge slot="start" hue="subtle" color="success">44</ion-badge>
141198
<ion-badge slot="start" color="success">
142199
<ion-icon name="logo-ionic"></ion-icon>
143200
</ion-badge>
201+
<ion-badge slot="start" hue="subtle" color="success">
202+
<ion-icon name="logo-ionic"></ion-icon>
203+
</ion-badge>
144204
</ion-item>
145205
<ion-item>
146206
<ion-label>Warning Badge</ion-label>
147207
<ion-badge slot="start" color="warning">55</ion-badge>
208+
<ion-badge slot="start" hue="subtle" color="warning">55</ion-badge>
148209
<ion-badge slot="start" color="warning">
149210
<ion-icon name="logo-ionic"></ion-icon>
150211
</ion-badge>
212+
<ion-badge slot="start" hue="subtle" color="warning">
213+
<ion-icon name="logo-ionic"></ion-icon>
214+
</ion-badge>
151215
</ion-item>
152216
<ion-item>
153217
<ion-label>Danger Badge</ion-label>
154218
<ion-badge slot="start" color="danger">66</ion-badge>
219+
<ion-badge slot="start" hue="subtle" color="danger">66</ion-badge>
155220
<ion-badge slot="start" color="danger">
156221
<ion-icon name="logo-ionic"></ion-icon>
157222
</ion-badge>
223+
<ion-badge slot="start" hue="subtle" color="danger">
224+
<ion-icon name="logo-ionic"></ion-icon>
225+
</ion-badge>
158226
</ion-item>
159227
<ion-item>
160228
<ion-label>Light Badge</ion-label>
161229
<ion-badge slot="start" color="light">77</ion-badge>
230+
<ion-badge slot="start" hue="subtle" color="light">77</ion-badge>
162231
<ion-badge slot="start" color="light">
163232
<ion-icon name="logo-ionic"></ion-icon>
164233
</ion-badge>
234+
<ion-badge slot="start" hue="subtle" color="light">
235+
<ion-icon name="logo-ionic"></ion-icon>
236+
</ion-badge>
165237
</ion-item>
166238
<ion-item>
167239
<ion-label>Medium Badge</ion-label>
168240
<ion-badge slot="start" color="medium">88</ion-badge>
241+
<ion-badge slot="start" hue="subtle" color="medium">88</ion-badge>
169242
<ion-badge slot="start" color="medium">
170243
<ion-icon name="logo-ionic"></ion-icon>
171244
</ion-badge>
245+
<ion-badge slot="start" hue="subtle" color="medium">
246+
<ion-icon name="logo-ionic"></ion-icon>
247+
</ion-badge>
172248
</ion-item>
173249
<ion-item>
174250
<ion-label>Dark Badge</ion-label>
175251
<ion-badge slot="start" color="dark">99</ion-badge>
252+
<ion-badge slot="start" hue="subtle" color="dark">99</ion-badge>
176253
<ion-badge slot="start" color="dark">
177254
<ion-icon name="logo-ionic"></ion-icon>
178255
</ion-badge>
256+
<ion-badge slot="start" hue="subtle" color="dark">
257+
<ion-icon name="logo-ionic"></ion-icon>
258+
</ion-badge>
179259
</ion-item>
180260
</ion-list>
181261
</ion-content>

0 commit comments

Comments
 (0)