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

Jump to bottom

fix(Tag): update filter tags to match updated spec #7664

Merged
merged 7 commits into from
Jan 28, 2021
Merged

fix(Tag): update filter tags to match updated spec #7664

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
de32f41
fix(tag): increase close button size and make flush with tag edges
emyarod Jan 27, 2021
3c81bd4
fix(tag): reduce close button outline width
emyarod Jan 27, 2021
eaf6039
fix(tag): reduce small tag padding
emyarod Jan 27, 2021
32caa05
fix(tag): reduce small tag close button size
emyarod Jan 27, 2021
fdb0d76
fix(tag): reduce close button spacing to text
emyarod Jan 27, 2021
aac0684
fix(tag): reduce high contrast tag outline
emyarod Jan 27, 2021
d14a965
fix(tag): add transition
emyarod Jan 27, 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
28 changes: 20 additions & 8 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 @@ -147,7 +147,9 @@

// tags used for filtering
.#{$prefix}--tag--filter {
padding-right: rem(2px);
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
cursor: pointer;

&:hover {
Expand All @@ -156,17 +158,21 @@
}

.#{$prefix}--tag__close-icon {
display: flex;
flex-shrink: 0;
width: rem(16px);
height: rem(16px);
margin: 0 0 0 rem(4px);
align-items: center;
justify-content: center;
width: rem(24px);
height: rem(24px);
margin: 0 0 0 rem(2px);
tw15egan marked this conversation as resolved.
Show resolved Hide resolved
padding: 0;
color: currentColor;
background-color: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;

transition: background-color $duration--fast-01 motion(standard, productive),
box-shadow $duration--fast-01 motion(standard, productive);
svg {
fill: currentColor;
}
Expand Down Expand Up @@ -195,7 +201,7 @@
.#{$prefix}--tag__close-icon:focus {
border-radius: 50%;
outline: none;
box-shadow: inset 0 0 0 2px $focus;
box-shadow: inset 0 0 0 1px $focus;
tw15egan marked this conversation as resolved.
Show resolved Hide resolved

// Windows, Firefox HCM Fix
@media screen and (-ms-high-contrast: active),
Expand All @@ -206,7 +212,7 @@
}

.#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
box-shadow: inset 0 0 0 2px $inverse-focus-ui;
box-shadow: inset 0 0 0 1px $inverse-focus-ui;
}

.#{$prefix}--tag--filter.#{$prefix}--tag--disabled
Expand All @@ -225,7 +231,13 @@
}

.#{$prefix}--tag--sm.#{$prefix}--tag--filter {
padding-right: rem(2px);
padding-right: 0;
}

.#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
width: rem(18px);
height: rem(18px);
margin-left: rem(5px);
}

// Skeleton state
Expand Down