From de32f412337731c62bfb0699fa0efe88a5e4ac9d Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 10:30:43 -0600 Subject: [PATCH 1/7] fix(tag): increase close button size and make flush with tag edges --- packages/components/src/components/tag/_tag.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 7e5393b3893e..2a90f2b43677 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -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 { @@ -156,9 +158,12 @@ } .#{$prefix}--tag__close-icon { + display: flex; flex-shrink: 0; - width: rem(16px); - height: rem(16px); + align-items: center; + justify-content: center; + width: rem(24px); + height: rem(24px); margin: 0 0 0 rem(4px); padding: 0; color: currentColor; From 3c81bd4b48460b5f08c2b24138bed639367667d8 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 10:32:20 -0600 Subject: [PATCH 2/7] fix(tag): reduce close button outline width --- packages/components/src/components/tag/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 2a90f2b43677..d4c22f1bc5c2 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -200,7 +200,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; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), From eaf6039b352437e978e5dc7b5ebb48fbf48e411d Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 10:36:10 -0600 Subject: [PATCH 3/7] fix(tag): reduce small tag padding --- packages/components/src/components/tag/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index d4c22f1bc5c2..4405a9e4d095 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -230,7 +230,7 @@ } .#{$prefix}--tag--sm.#{$prefix}--tag--filter { - padding-right: rem(2px); + padding-right: 0; } // Skeleton state From 32caa05ffa1e57d8c5ee8273167d82dba5b683bd Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 10:36:33 -0600 Subject: [PATCH 4/7] fix(tag): reduce small tag close button size --- packages/components/src/components/tag/_tag.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 4405a9e4d095..7f3ce2306aa6 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -233,6 +233,11 @@ padding-right: 0; } + .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon { + width: rem(18px); + height: rem(18px); + } + // Skeleton state .#{$prefix}--tag.#{$prefix}--skeleton { @include skeleton; From fdb0d762657f9429935934dff15777e19e303a57 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 15:52:18 -0600 Subject: [PATCH 5/7] fix(tag): reduce close button spacing to text --- packages/components/src/components/tag/_tag.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 7f3ce2306aa6..73359aad7df8 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -164,7 +164,7 @@ justify-content: center; width: rem(24px); height: rem(24px); - margin: 0 0 0 rem(4px); + margin: 0 0 0 rem(2px); padding: 0; color: currentColor; background-color: transparent; @@ -236,6 +236,7 @@ .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon { width: rem(18px); height: rem(18px); + margin-left: rem(5px); } // Skeleton state From aac06841f33e4fd0bedafd96358f251502d077b9 Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 17:07:57 -0600 Subject: [PATCH 6/7] fix(tag): reduce high contrast tag outline --- packages/components/src/components/tag/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 73359aad7df8..bc93f8a45ef5 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -211,7 +211,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 From d14a965da6b2c3f7d201c85fdede1cc879fd55dc Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 27 Jan 2021 17:08:47 -0600 Subject: [PATCH 7/7] fix(tag): add transition --- packages/components/src/components/tag/_tag.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index bc93f8a45ef5..5af384956fea 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -171,7 +171,8 @@ 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; }