Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tag): introducing custom icon #7262

Merged
merged 24 commits into from
Jan 20, 2021
Merged

feat(tag): introducing custom icon #7262

Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
a6baba6
feat(tag): introducing custom icon
IgnacioBecerra Nov 9, 2020
23bc7b5
feat(tag): add test
IgnacioBecerra Nov 9, 2020
8ae8b49
feat(tag): fixed variable name
IgnacioBecerra Nov 10, 2020
68a0cdd
Merge branch 'master' into tag-icon-feature
IgnacioBecerra Nov 10, 2020
77776ba
feat(tag): improving design based on feedback
IgnacioBecerra Nov 11, 2020
30b368a
feat(tag): removed unecessary icon import
IgnacioBecerra Nov 11, 2020
a265405
feat(tag): added custom icon knob to story
IgnacioBecerra Nov 11, 2020
c1e6df6
feat(tag): fixed spacing on imports
IgnacioBecerra Nov 11, 2020
7149c0b
feat(tag): removed redundant boolean
IgnacioBecerra Nov 11, 2020
73f1f5c
Update packages/react/src/components/Tag/Tag-test.js
IgnacioBecerra Nov 11, 2020
cc59c09
Update packages/react/src/components/Tag/Tag.js
IgnacioBecerra Nov 11, 2020
334b053
Merge branch 'master' into tag-icon-feature
tw15egan Nov 11, 2020
f1db35c
chore(snapshot): update snapshots, run prettier
tw15egan Nov 11, 2020
9dddc6d
feat(tag): refactored nested ternary
IgnacioBecerra Nov 12, 2020
c8576ec
Merge branch 'tag-icon-feature' of https://github.com/IgnacioBecerra/…
IgnacioBecerra Nov 12, 2020
8b5dc4f
feat(tag): reformatted conditionals
IgnacioBecerra Nov 12, 2020
6a074c3
Merge branch 'master' into tag-icon-feature
IgnacioBecerra Nov 12, 2020
4a4fffe
Merge branch 'master' into tag-icon-feature
tw15egan Nov 12, 2020
7ea5438
feat(tag): refactored icon rendering code
IgnacioBecerra Nov 13, 2020
69a105f
feat(tag): ran formatter
IgnacioBecerra Nov 13, 2020
c4acdc2
Merge branch 'master' into tag-icon-feature
IgnacioBecerra Nov 16, 2020
3cb8399
feat(tag): removed inner span's ...other options
IgnacioBecerra Dec 7, 2020
ab4969f
Merge branch 'master' into tag-icon-feature
joshblack Dec 7, 2020
77a582d
Merge branch 'master' into tag-icon-feature
kodiakhq[bot] Jan 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/components/docs/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3731,6 +3731,7 @@ $spacing-02: $carbon--spacing-02;
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
- [modal [mixin]](#modal-mixin)
- [tags [mixin]](#tags-mixin)

### ✅spacing-03 [variable]

Expand Down Expand Up @@ -25177,6 +25178,22 @@ Tag styles
}
}

.#{$prefix}--tag__custom-icon {
flex-shrink: 0;
width: rem(16px);
height: rem(16px);
margin-right: $spacing-02;
padding: 0;
color: currentColor;
background-color: transparent;
border: 0;
outline: none;

svg {
fill: currentColor;
}
}

.#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
cursor: not-allowed;
}
Expand Down Expand Up @@ -25231,6 +25248,7 @@ Tag styles
- [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
- [disabled-01 [variable]](#disabled-01-variable)
- [disabled-02 [variable]](#disabled-02-variable)
- [spacing-02 [variable]](#spacing-02-variable)
- [focus [variable]](#focus-variable)
- [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
- [ui-03 [variable]](#ui-03-variable)
Expand Down
16 changes: 16 additions & 0 deletions packages/components/src/components/tag/_tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,22 @@
}
}

.#{$prefix}--tag__custom-icon {
flex-shrink: 0;
width: rem(16px);
height: rem(16px);
margin-right: $spacing-02;
padding: 0;
color: currentColor;
background-color: transparent;
border: 0;
outline: none;

svg {
fill: currentColor;
}
}

.#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
cursor: not-allowed;
}
Expand Down
80 changes: 40 additions & 40 deletions packages/components/src/components/tag/_tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,15 @@ $tag-colors: (
),
),
'tag-color-red': (
fallback: $carbon__red-70,
fallback: $carbon__red-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__red-70,
value: $carbon__red-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__red-70,
value: $carbon__red-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -58,7 +58,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__red-70,
value: $carbon__red-80,
),
),
),
Expand Down Expand Up @@ -115,15 +115,15 @@ $tag-colors: (
),
),
'tag-color-magenta': (
fallback: $carbon__magenta-70,
fallback: $carbon__magenta-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__magenta-70,
value: $carbon__magenta-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__magenta-70,
value: $carbon__magenta-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -135,7 +135,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__magenta-70,
value: $carbon__magenta-80,
),
),
),
Expand Down Expand Up @@ -192,15 +192,15 @@ $tag-colors: (
),
),
'tag-color-purple': (
fallback: $carbon__purple-70,
fallback: $carbon__purple-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__purple-70,
value: $carbon__purple-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__purple-70,
value: $carbon__purple-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -212,7 +212,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__purple-70,
value: $carbon__purple-80,
),
),
),
Expand Down Expand Up @@ -269,15 +269,15 @@ $tag-colors: (
),
),
'tag-color-blue': (
fallback: $carbon__blue-70,
fallback: $carbon__blue-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__blue-70,
value: $carbon__blue-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__blue-70,
value: $carbon__blue-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -289,7 +289,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__blue-70,
value: $carbon__blue-80,
),
),
),
Expand Down Expand Up @@ -346,15 +346,15 @@ $tag-colors: (
),
),
'tag-color-cyan': (
fallback: $carbon__cyan-70,
fallback: $carbon__cyan-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__cyan-70,
value: $carbon__cyan-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__cyan-70,
value: $carbon__cyan-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -366,7 +366,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__cyan-70,
value: $carbon__cyan-80,
),
),
),
Expand Down Expand Up @@ -423,15 +423,15 @@ $tag-colors: (
),
),
'tag-color-teal': (
fallback: $carbon__teal-70,
fallback: $carbon__teal-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__teal-70,
value: $carbon__teal-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__teal-70,
value: $carbon__teal-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -443,7 +443,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__teal-70,
value: $carbon__teal-80,
),
),
),
Expand Down Expand Up @@ -500,15 +500,15 @@ $tag-colors: (
),
),
'tag-color-green': (
fallback: $carbon__green-70,
fallback: $carbon__green-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__green-70,
value: $carbon__green-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__green-70,
value: $carbon__green-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -520,7 +520,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__green-70,
value: $carbon__green-80,
),
),
),
Expand Down Expand Up @@ -577,15 +577,15 @@ $tag-colors: (
),
),
'tag-color-gray': (
fallback: $carbon__gray-70,
fallback: $carbon__gray-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__gray-70,
value: $carbon__gray-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__gray-70,
value: $carbon__gray-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -597,7 +597,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__gray-70,
value: $carbon__gray-80,
),
),
),
Expand Down Expand Up @@ -654,15 +654,15 @@ $tag-colors: (
),
),
'tag-color-cool-gray': (
fallback: $carbon__cool-gray-70,
fallback: $carbon__cool-gray-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__cool-gray-70,
value: $carbon__cool-gray-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__cool-gray-70,
value: $carbon__cool-gray-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -674,7 +674,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__cool-gray-70,
value: $carbon__cool-gray-80,
),
),
),
Expand Down Expand Up @@ -731,15 +731,15 @@ $tag-colors: (
),
),
'tag-color-warm-gray': (
fallback: $carbon__warm-gray-70,
fallback: $carbon__warm-gray-80,
values: (
(
theme: $carbon--theme--white,
value: $carbon__warm-gray-70,
value: $carbon__warm-gray-80,
),
(
theme: $carbon--theme--g10,
value: $carbon__warm-gray-70,
value: $carbon__warm-gray-80,
),
(
theme: $carbon--theme--g90,
Expand All @@ -751,7 +751,7 @@ $tag-colors: (
),
(
theme: $carbon--theme--v9,
value: $carbon__warm-gray-70,
value: $carbon__warm-gray-80,
),
),
),
Expand Down
13 changes: 13 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5152,6 +5152,19 @@ Map {
"onClose": Object {
"type": "func",
},
"renderIcon": Object {
"args": Array [
Array [
Object {
"type": "func",
},
Object {
"type": "object",
},
],
],
"type": "oneOfType",
},
"title": Object {
"type": "string",
},
Expand Down
Loading