Skip to content

Commit 31e19ca

Browse files
IgnacioBecerratw15eganjoshblack
authored
feat(tag): introducing custom icon (#7262)
* feat(tag): introducing custom icon * feat(tag): add test * feat(tag): fixed variable name * feat(tag): improving design based on feedback * feat(tag): removed unecessary icon import * feat(tag): added custom icon knob to story * feat(tag): fixed spacing on imports * feat(tag): removed redundant boolean * Update packages/react/src/components/Tag/Tag-test.js Co-authored-by: TJ Egan <tw15egan@gmail.com> * Update packages/react/src/components/Tag/Tag.js Co-authored-by: TJ Egan <tw15egan@gmail.com> * chore(snapshot): update snapshots, run prettier * feat(tag): refactored nested ternary * feat(tag): reformatted conditionals * feat(tag): refactored icon rendering code * feat(tag): ran formatter * feat(tag): removed inner span's ...other options Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Josh Black <josh@josh.black>
1 parent 83ecc8d commit 31e19ca

File tree

7 files changed

+152
-46
lines changed

7 files changed

+152
-46
lines changed

‎packages/components/docs/sass.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5989,6 +5989,7 @@ $spacing-02: $carbon--spacing-02;
59895989
- **Used by**:
59905990
- [carbon--theme [mixin]](#carbon--theme-mixin)
59915991
- [modal [mixin]](#modal-mixin)
5992+
- [tags [mixin]](#tags-mixin)
59925993

59935994
### ✅spacing-03 [variable]
59945995

@@ -27532,6 +27533,22 @@ Tag styles
2753227533
}
2753327534
}
2753427535

27536+
.#{$prefix}--tag__custom-icon {
27537+
flex-shrink: 0;
27538+
width: rem(16px);
27539+
height: rem(16px);
27540+
margin-right: $spacing-02;
27541+
padding: 0;
27542+
color: currentColor;
27543+
background-color: transparent;
27544+
border: 0;
27545+
outline: none;
27546+
27547+
svg {
27548+
fill: currentColor;
27549+
}
27550+
}
27551+
2753527552
.#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
2753627553
cursor: not-allowed;
2753727554
}
@@ -27586,6 +27603,7 @@ Tag styles
2758627603
- [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
2758727604
- [disabled-01 [variable]](#disabled-01-variable)
2758827605
- [disabled-02 [variable]](#disabled-02-variable)
27606+
- [spacing-02 [variable]](#spacing-02-variable)
2758927607
- [focus [variable]](#focus-variable)
2759027608
- [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
2759127609
- [ui-03 [variable]](#ui-03-variable)

‎packages/components/src/components/tag/_tag.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,22 @@
172172
}
173173
}
174174

175+
.#{$prefix}--tag__custom-icon {
176+
flex-shrink: 0;
177+
width: rem(16px);
178+
height: rem(16px);
179+
margin-right: $spacing-02;
180+
padding: 0;
181+
color: currentColor;
182+
background-color: transparent;
183+
border: 0;
184+
outline: none;
185+
186+
svg {
187+
fill: currentColor;
188+
}
189+
}
190+
175191
.#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
176192
cursor: not-allowed;
177193
}

‎packages/components/src/components/tag/_tokens.scss‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ $tag-colors: (
3838
),
3939
),
4040
'tag-color-red': (
41-
fallback: $carbon__red-70,
41+
fallback: $carbon__red-80,
4242
values: (
4343
(
4444
theme: $carbon--theme--white,
45-
value: $carbon__red-70,
45+
value: $carbon__red-80,
4646
),
4747
(
4848
theme: $carbon--theme--g10,
49-
value: $carbon__red-70,
49+
value: $carbon__red-80,
5050
),
5151
(
5252
theme: $carbon--theme--g90,
@@ -58,7 +58,7 @@ $tag-colors: (
5858
),
5959
(
6060
theme: $carbon--theme--v9,
61-
value: $carbon__red-70,
61+
value: $carbon__red-80,
6262
),
6363
),
6464
),
@@ -115,15 +115,15 @@ $tag-colors: (
115115
),
116116
),
117117
'tag-color-magenta': (
118-
fallback: $carbon__magenta-70,
118+
fallback: $carbon__magenta-80,
119119
values: (
120120
(
121121
theme: $carbon--theme--white,
122-
value: $carbon__magenta-70,
122+
value: $carbon__magenta-80,
123123
),
124124
(
125125
theme: $carbon--theme--g10,
126-
value: $carbon__magenta-70,
126+
value: $carbon__magenta-80,
127127
),
128128
(
129129
theme: $carbon--theme--g90,
@@ -135,7 +135,7 @@ $tag-colors: (
135135
),
136136
(
137137
theme: $carbon--theme--v9,
138-
value: $carbon__magenta-70,
138+
value: $carbon__magenta-80,
139139
),
140140
),
141141
),
@@ -192,15 +192,15 @@ $tag-colors: (
192192
),
193193
),
194194
'tag-color-purple': (
195-
fallback: $carbon__purple-70,
195+
fallback: $carbon__purple-80,
196196
values: (
197197
(
198198
theme: $carbon--theme--white,
199-
value: $carbon__purple-70,
199+
value: $carbon__purple-80,
200200
),
201201
(
202202
theme: $carbon--theme--g10,
203-
value: $carbon__purple-70,
203+
value: $carbon__purple-80,
204204
),
205205
(
206206
theme: $carbon--theme--g90,
@@ -212,7 +212,7 @@ $tag-colors: (
212212
),
213213
(
214214
theme: $carbon--theme--v9,
215-
value: $carbon__purple-70,
215+
value: $carbon__purple-80,
216216
),
217217
),
218218
),
@@ -269,15 +269,15 @@ $tag-colors: (
269269
),
270270
),
271271
'tag-color-blue': (
272-
fallback: $carbon__blue-70,
272+
fallback: $carbon__blue-80,
273273
values: (
274274
(
275275
theme: $carbon--theme--white,
276-
value: $carbon__blue-70,
276+
value: $carbon__blue-80,
277277
),
278278
(
279279
theme: $carbon--theme--g10,
280-
value: $carbon__blue-70,
280+
value: $carbon__blue-80,
281281
),
282282
(
283283
theme: $carbon--theme--g90,
@@ -289,7 +289,7 @@ $tag-colors: (
289289
),
290290
(
291291
theme: $carbon--theme--v9,
292-
value: $carbon__blue-70,
292+
value: $carbon__blue-80,
293293
),
294294
),
295295
),
@@ -346,15 +346,15 @@ $tag-colors: (
346346
),
347347
),
348348
'tag-color-cyan': (
349-
fallback: $carbon__cyan-70,
349+
fallback: $carbon__cyan-80,
350350
values: (
351351
(
352352
theme: $carbon--theme--white,
353-
value: $carbon__cyan-70,
353+
value: $carbon__cyan-80,
354354
),
355355
(
356356
theme: $carbon--theme--g10,
357-
value: $carbon__cyan-70,
357+
value: $carbon__cyan-80,
358358
),
359359
(
360360
theme: $carbon--theme--g90,
@@ -366,7 +366,7 @@ $tag-colors: (
366366
),
367367
(
368368
theme: $carbon--theme--v9,
369-
value: $carbon__cyan-70,
369+
value: $carbon__cyan-80,
370370
),
371371
),
372372
),
@@ -423,15 +423,15 @@ $tag-colors: (
423423
),
424424
),
425425
'tag-color-teal': (
426-
fallback: $carbon__teal-70,
426+
fallback: $carbon__teal-80,
427427
values: (
428428
(
429429
theme: $carbon--theme--white,
430-
value: $carbon__teal-70,
430+
value: $carbon__teal-80,
431431
),
432432
(
433433
theme: $carbon--theme--g10,
434-
value: $carbon__teal-70,
434+
value: $carbon__teal-80,
435435
),
436436
(
437437
theme: $carbon--theme--g90,
@@ -443,7 +443,7 @@ $tag-colors: (
443443
),
444444
(
445445
theme: $carbon--theme--v9,
446-
value: $carbon__teal-70,
446+
value: $carbon__teal-80,
447447
),
448448
),
449449
),
@@ -500,15 +500,15 @@ $tag-colors: (
500500
),
501501
),
502502
'tag-color-green': (
503-
fallback: $carbon__green-70,
503+
fallback: $carbon__green-80,
504504
values: (
505505
(
506506
theme: $carbon--theme--white,
507-
value: $carbon__green-70,
507+
value: $carbon__green-80,
508508
),
509509
(
510510
theme: $carbon--theme--g10,
511-
value: $carbon__green-70,
511+
value: $carbon__green-80,
512512
),
513513
(
514514
theme: $carbon--theme--g90,
@@ -520,7 +520,7 @@ $tag-colors: (
520520
),
521521
(
522522
theme: $carbon--theme--v9,
523-
value: $carbon__green-70,
523+
value: $carbon__green-80,
524524
),
525525
),
526526
),
@@ -577,15 +577,15 @@ $tag-colors: (
577577
),
578578
),
579579
'tag-color-gray': (
580-
fallback: $carbon__gray-70,
580+
fallback: $carbon__gray-80,
581581
values: (
582582
(
583583
theme: $carbon--theme--white,
584-
value: $carbon__gray-70,
584+
value: $carbon__gray-80,
585585
),
586586
(
587587
theme: $carbon--theme--g10,
588-
value: $carbon__gray-70,
588+
value: $carbon__gray-80,
589589
),
590590
(
591591
theme: $carbon--theme--g90,
@@ -597,7 +597,7 @@ $tag-colors: (
597597
),
598598
(
599599
theme: $carbon--theme--v9,
600-
value: $carbon__gray-70,
600+
value: $carbon__gray-80,
601601
),
602602
),
603603
),
@@ -654,15 +654,15 @@ $tag-colors: (
654654
),
655655
),
656656
'tag-color-cool-gray': (
657-
fallback: $carbon__cool-gray-70,
657+
fallback: $carbon__cool-gray-80,
658658
values: (
659659
(
660660
theme: $carbon--theme--white,
661-
value: $carbon__cool-gray-70,
661+
value: $carbon__cool-gray-80,
662662
),
663663
(
664664
theme: $carbon--theme--g10,
665-
value: $carbon__cool-gray-70,
665+
value: $carbon__cool-gray-80,
666666
),
667667
(
668668
theme: $carbon--theme--g90,
@@ -674,7 +674,7 @@ $tag-colors: (
674674
),
675675
(
676676
theme: $carbon--theme--v9,
677-
value: $carbon__cool-gray-70,
677+
value: $carbon__cool-gray-80,
678678
),
679679
),
680680
),
@@ -731,15 +731,15 @@ $tag-colors: (
731731
),
732732
),
733733
'tag-color-warm-gray': (
734-
fallback: $carbon__warm-gray-70,
734+
fallback: $carbon__warm-gray-80,
735735
values: (
736736
(
737737
theme: $carbon--theme--white,
738-
value: $carbon__warm-gray-70,
738+
value: $carbon__warm-gray-80,
739739
),
740740
(
741741
theme: $carbon--theme--g10,
742-
value: $carbon__warm-gray-70,
742+
value: $carbon__warm-gray-80,
743743
),
744744
(
745745
theme: $carbon--theme--g90,
@@ -751,7 +751,7 @@ $tag-colors: (
751751
),
752752
(
753753
theme: $carbon--theme--v9,
754-
value: $carbon__warm-gray-70,
754+
value: $carbon__warm-gray-80,
755755
),
756756
),
757757
),

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5168,6 +5168,19 @@ Map {
51685168
"onClose": Object {
51695169
"type": "func",
51705170
},
5171+
"renderIcon": Object {
5172+
"args": Array [
5173+
Array [
5174+
Object {
5175+
"type": "func",
5176+
},
5177+
Object {
5178+
"type": "object",
5179+
},
5180+
],
5181+
],
5182+
"type": "oneOfType",
5183+
},
51715184
"title": Object {
51725185
"type": "string",
51735186
},

0 commit comments

Comments
 (0)