Skip to content

Commit ae9235e

Browse files
kampsykampsy
committed
refactor: 🎨 remove capitalize from badge inner span
Remove capitalize from the span and let the user specify capitalize as an option to Badge
1 parent 9920499 commit ae9235e

File tree

3 files changed

+43
-43
lines changed

3 files changed

+43
-43
lines changed

‎src/docs/data/badge.ts‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,46 @@ export const badgeVariants = `
22
import { Badge } from 'kampsy-ui';
33
44
<div class="flex flex-col gap-2">
5-
<div class="flex gap-1">
5+
<div class="flex gap-1 capitalize">
66
<Badge variant="gray">gray</Badge>
77
<Badge variant="gray-subtle">gray-subtle</Badge>
88
</div>
99
10-
<div class="flex gap-1">
10+
<div class="flex gap-1 capitalize">
1111
<Badge variant="blue">blue</Badge>
1212
<Badge variant="blue-subtle">blue-subtle</Badge>
1313
</div>
1414
15-
<div class="flex gap-1">
15+
<div class="flex gap-1 capitalize">
1616
<Badge variant="purple">purple</Badge>
1717
<Badge variant="purple-subtle">purple-subtle</Badge>
1818
</div>
1919
20-
<div class="flex gap-1">
20+
<div class="flex gap-1 capitalize">
2121
<Badge variant="amber">amber</Badge>
2222
<Badge variant="amber-subtle">amber-subtle</Badge>
2323
</div>
2424
25-
<div class="flex gap-1">
25+
<div class="flex gap-1 capitalize">
2626
<Badge variant="red">red</Badge>
2727
<Badge variant="red-subtle">red-subtle</Badge>
2828
</div>
2929
30-
<div class="flex gap-1">
30+
<div class="flex gap-1 capitalize">
3131
<Badge variant="pink">pink</Badge>
3232
<Badge variant="pink-subtle">pink-subtle</Badge>
3333
</div>
3434
35-
<div class="flex gap-1">
35+
<div class="flex gap-1 capitalize">
3636
<Badge variant="green">green</Badge>
3737
<Badge variant="green-subtle">green-subtle</Badge>
3838
</div>
3939
40-
<div class="flex gap-1">
40+
<div class="flex gap-1 capitalize">
4141
<Badge variant="teal">teal</Badge>
4242
<Badge variant="teal-subtle">teal-subtle</Badge>
4343
</div>
44-
<div class="flex gap-1">
44+
<div class="flex gap-1 capitalize">
4545
<Badge variant="inverted">inverted</Badge>
4646
</div>
4747
</div>`;
@@ -51,15 +51,15 @@ import { Badge } from 'kampsy-ui';
5151
5252
<div class="flex flex-col gap-2">
5353
54-
<div class="flex gap-1">
54+
<div class="flex gap-1 capitalize">
5555
<Badge size="sm" >small</Badge>
5656
</div>
5757
58-
<div class="flex gap-1">
58+
<div class="flex gap-1 capitalize">
5959
<Badge size="md" >medium</Badge>
6060
</div>
6161
62-
<div class="flex gap-1">
62+
<div class="flex gap-1 capitalize">
6363
<Badge size="lg" >large</Badge>
6464
</div>
6565
</div>`;
@@ -70,7 +70,7 @@ import { Shield } from 'kampsy-ui/icons';
7070
7171
<div class="flex flex-col gap-2">
7272
73-
<div class="flex items-center gap-1">
73+
<div class="flex items-center gap-1 capitalize">
7474
<Badge icon={Shield} size="lg" variant="gray">gray</Badge>
7575
<Badge icon={Shield} size="md" variant="gray" >gray</Badge>
7676
<Badge icon={Shield} size="sm" variant="gray">gray</Badge>
@@ -79,7 +79,7 @@ import { Shield } from 'kampsy-ui/icons';
7979
<Badge icon={Shield} size="lg" variant="gray-subtle">gray</Badge>
8080
</div>
8181
82-
<div class="flex items-center gap-1">
82+
<div class="flex items-center gap-1 capitalize">
8383
<Badge icon={Shield} size="lg" variant="blue">blue</Badge>
8484
<Badge icon={Shield} size="md" variant="blue" >blue</Badge>
8585
<Badge icon={Shield} size="sm" variant="blue">blue</Badge>
@@ -88,7 +88,7 @@ import { Shield } from 'kampsy-ui/icons';
8888
<Badge icon={Shield} size="lg" variant="blue-subtle">blue</Badge>
8989
</div>
9090
91-
<div class="flex items-center gap-1">
91+
<div class="flex items-center gap-1 capitalize">
9292
<Badge icon={Shield} size="lg" variant="purple">purple</Badge>
9393
<Badge icon={Shield} size="md" variant="purple" >purple</Badge>
9494
<Badge icon={Shield} size="sm" variant="purple">purple</Badge>
@@ -97,7 +97,7 @@ import { Shield } from 'kampsy-ui/icons';
9797
<Badge icon={Shield} size="lg" variant="purple-subtle">purple</Badge>
9898
</div>
9999
100-
<div class="flex items-center gap-1">
100+
<div class="flex items-center gap-1 capitalize">
101101
<Badge icon={Shield} size="lg" variant="amber">amber</Badge>
102102
<Badge icon={Shield} size="md" variant="amber" >amber</Badge>
103103
<Badge icon={Shield} size="sm" variant="amber">amber</Badge>
@@ -106,7 +106,7 @@ import { Shield } from 'kampsy-ui/icons';
106106
<Badge icon={Shield} size="lg" variant="amber-subtle">amber</Badge>
107107
</div>
108108
109-
<div class="flex items-center gap-1">
109+
<div class="flex items-center gap-1 capitalize">
110110
<Badge icon={Shield} size="lg" variant="red">red</Badge>
111111
<Badge icon={Shield} size="md" variant="red" >red</Badge>
112112
<Badge icon={Shield} size="sm" variant="red">red</Badge>
@@ -115,7 +115,7 @@ import { Shield } from 'kampsy-ui/icons';
115115
<Badge icon={Shield} size="lg" variant="red-subtle">red</Badge>
116116
</div>
117117
118-
<div class="flex items-center gap-1">
118+
<div class="flex items-center gap-1 capitalize">
119119
<Badge icon={Shield} size="lg" variant="pink">pink</Badge>
120120
<Badge icon={Shield} size="md" variant="pink" >pink</Badge>
121121
<Badge icon={Shield} size="sm" variant="pink">pink</Badge>
@@ -124,7 +124,7 @@ import { Shield } from 'kampsy-ui/icons';
124124
<Badge icon={Shield} size="lg" variant="pink-subtle">pink</Badge>
125125
</div>
126126
127-
<div class="flex items-center gap-1">
127+
<div class="flex items-center gap-1 capitalize">
128128
<Badge icon={Shield} size="lg" variant="green">green</Badge>
129129
<Badge icon={Shield} size="md" variant="green" >green</Badge>
130130
<Badge icon={Shield} size="sm" variant="green">green</Badge>
@@ -133,7 +133,7 @@ import { Shield } from 'kampsy-ui/icons';
133133
<Badge icon={Shield} size="lg" variant="green-subtle">green</Badge>
134134
</div>
135135
136-
<div class="flex items-center gap-1">
136+
<div class="flex items-center gap-1 capitalize">
137137
<Badge icon={Shield} size="lg" variant="teal">teal</Badge>
138138
<Badge icon={Shield} size="md" variant="teal" >teal</Badge>
139139
<Badge icon={Shield} size="sm" variant="teal">teal</Badge>
@@ -142,7 +142,7 @@ import { Shield } from 'kampsy-ui/icons';
142142
<Badge icon={Shield} size="lg" variant="teal-subtle">teal</Badge>
143143
</div>
144144
145-
<div class="flex items-center gap-1">
145+
<div class="flex items-center gap-1 capitalize">
146146
<Badge icon={Shield} size="lg" variant="inverted">inverted</Badge>
147147
<Badge icon={Shield} size="md" variant="inverted" >inverted</Badge>
148148
<Badge icon={Shield} size="sm" variant="inverted">inverted</Badge>

‎src/lib/badge/badge.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
{/snippet}
114114

115115
<span class="flex items-center justify-center rounded-full {badgeClass} {klass}">
116-
<span class="flex items-center {iconXGap} capitalize">
116+
<span class="flex items-center {iconXGap}">
117117
{@render iconSnip()}
118118
{@render children()}
119119
</span>

‎src/routes/badge/+page.svelte‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,47 +53,47 @@
5353
<div class="mt-4 xl:mt-7">
5454
{#snippet demo()}
5555
<div class="flex flex-col gap-2">
56-
<div class="flex gap-1">
56+
<div class="flex gap-1 capitalize">
5757
<Badge variant="gray">gray</Badge>
5858
<Badge variant="gray-subtle">gray-subtle</Badge>
5959
</div>
6060

61-
<div class="flex gap-1">
61+
<div class="flex gap-1 capitalize">
6262
<Badge variant="blue">blue</Badge>
6363
<Badge variant="blue-subtle">blue-subtle</Badge>
6464
</div>
6565

66-
<div class="flex gap-1">
66+
<div class="flex gap-1 capitalize">
6767
<Badge variant="purple">purple</Badge>
6868
<Badge variant="purple-subtle">purple-subtle</Badge>
6969
</div>
7070

71-
<div class="flex gap-1">
71+
<div class="flex gap-1 capitalize">
7272
<Badge variant="amber">amber</Badge>
7373
<Badge variant="amber-subtle">amber-subtle</Badge>
7474
</div>
7575

76-
<div class="flex gap-1">
76+
<div class="flex gap-1 capitalize">
7777
<Badge variant="red">red</Badge>
7878
<Badge variant="red-subtle">red-subtle</Badge>
7979
</div>
8080

81-
<div class="flex gap-1">
81+
<div class="flex gap-1 capitalize">
8282
<Badge variant="pink">pink</Badge>
8383
<Badge variant="pink-subtle">pink-subtle</Badge>
8484
</div>
8585

86-
<div class="flex gap-1">
86+
<div class="flex gap-1 capitalize">
8787
<Badge variant="green">green</Badge>
8888
<Badge variant="green-subtle">green-subtle</Badge>
8989
</div>
9090

91-
<div class="flex gap-1">
91+
<div class="flex gap-1 capitalize">
9292
<Badge variant="teal">teal</Badge>
9393
<Badge variant="teal-subtle">teal-subtle</Badge>
9494
</div>
9595

96-
<div class="flex gap-1">
96+
<div class="flex gap-1 capitalize">
9797
<Badge variant="inverted">inverted</Badge>
9898
</div>
9999
</div>
@@ -113,15 +113,15 @@
113113
<div class="mt-4 xl:mt-7">
114114
{#snippet demo()}
115115
<div class="flex flex-col gap-2">
116-
<div class="flex gap-1">
116+
<div class="flex gap-1 capitalize">
117117
<Badge size="sm">small</Badge>
118118
</div>
119119

120-
<div class="flex gap-1">
120+
<div class="flex gap-1 capitalize">
121121
<Badge size="md">medium</Badge>
122122
</div>
123123

124-
<div class="flex gap-1">
124+
<div class="flex gap-1 capitalize">
125125
<Badge size="lg">large</Badge>
126126
</div>
127127
</div>
@@ -142,7 +142,7 @@
142142
<div class="mt-4 xl:mt-7">
143143
{#snippet demo()}
144144
<div class="flex flex-col gap-2">
145-
<div class="flex items-center gap-1">
145+
<div class="flex items-center gap-1 capitalize">
146146
<Badge icon={Shield} size="lg" variant="gray">gray</Badge>
147147
<Badge icon={Shield} size="md" variant="gray" >gray</Badge>
148148
<Badge icon={Shield} size="sm" variant="gray">gray</Badge>
@@ -151,7 +151,7 @@
151151
<Badge icon={Shield} size="lg" variant="gray-subtle">gray</Badge>
152152
</div>
153153

154-
<div class="flex items-center gap-1">
154+
<div class="flex items-center gap-1 capitalize">
155155
<Badge icon={Shield} size="lg" variant="blue">blue</Badge>
156156
<Badge icon={Shield} size="md" variant="blue" >blue</Badge>
157157
<Badge icon={Shield} size="sm" variant="blue">blue</Badge>
@@ -160,7 +160,7 @@
160160
<Badge icon={Shield} size="lg" variant="blue-subtle">blue</Badge>
161161
</div>
162162

163-
<div class="flex items-center gap-1">
163+
<div class="flex items-center gap-1 capitalize">
164164
<Badge icon={Shield} size="lg" variant="purple">purple</Badge>
165165
<Badge icon={Shield} size="md" variant="purple" >purple</Badge>
166166
<Badge icon={Shield} size="sm" variant="purple">purple</Badge>
@@ -169,7 +169,7 @@
169169
<Badge icon={Shield} size="lg" variant="purple-subtle">purple</Badge>
170170
</div>
171171

172-
<div class="flex items-center gap-1">
172+
<div class="flex items-center gap-1 capitalize">
173173
<Badge icon={Shield} size="lg" variant="amber">amber</Badge>
174174
<Badge icon={Shield} size="md" variant="amber" >amber</Badge>
175175
<Badge icon={Shield} size="sm" variant="amber">amber</Badge>
@@ -178,7 +178,7 @@
178178
<Badge icon={Shield} size="lg" variant="amber-subtle">amber</Badge>
179179
</div>
180180

181-
<div class="flex items-center gap-1">
181+
<div class="flex items-center gap-1 capitalize">
182182
<Badge icon={Shield} size="lg" variant="red">red</Badge>
183183
<Badge icon={Shield} size="md" variant="red" >red</Badge>
184184
<Badge icon={Shield} size="sm" variant="red">red</Badge>
@@ -187,7 +187,7 @@
187187
<Badge icon={Shield} size="lg" variant="red-subtle">red</Badge>
188188
</div>
189189

190-
<div class="flex items-center gap-1">
190+
<div class="flex items-center gap-1 capitalize">
191191
<Badge icon={Shield} size="lg" variant="pink">pink</Badge>
192192
<Badge icon={Shield} size="md" variant="pink" >pink</Badge>
193193
<Badge icon={Shield} size="sm" variant="pink">pink</Badge>
@@ -196,7 +196,7 @@
196196
<Badge icon={Shield} size="lg" variant="pink-subtle">pink</Badge>
197197
</div>
198198

199-
<div class="flex items-center gap-1">
199+
<div class="flex items-center gap-1 capitalize">
200200
<Badge icon={Shield} size="lg" variant="green">green</Badge>
201201
<Badge icon={Shield} size="md" variant="green" >green</Badge>
202202
<Badge icon={Shield} size="sm" variant="green">green</Badge>
@@ -205,7 +205,7 @@
205205
<Badge icon={Shield} size="lg" variant="green-subtle">green</Badge>
206206
</div>
207207

208-
<div class="flex items-center gap-1">
208+
<div class="flex items-center gap-1 capitalize">
209209
<Badge icon={Shield} size="lg" variant="teal">teal</Badge>
210210
<Badge icon={Shield} size="md" variant="teal" >teal</Badge>
211211
<Badge icon={Shield} size="sm" variant="teal">teal</Badge>
@@ -214,7 +214,7 @@
214214
<Badge icon={Shield} size="lg" variant="teal-subtle">teal</Badge>
215215
</div>
216216

217-
<div class="flex items-center gap-1">
217+
<div class="flex items-center gap-1 capitalize">
218218
<Badge icon={Shield} size="lg" variant="inverted">inverted</Badge>
219219
<Badge icon={Shield} size="md" variant="inverted" >inverted</Badge>
220220
<Badge icon={Shield} size="sm" variant="inverted">inverted</Badge>

0 commit comments

Comments
 (0)