fix: Reverting border-radius update, and using overflow hidden on tag

hashicorp · Jan 3, 2025 · 9730dde · 9730dde
1 parent c512daa
commit 9730dde
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/components/src/styles/components/form/super-select.scss b/packages/components/src/styles/components/form/super-select.scss
@@ -7,7 +7,7 @@
 
 // Copied from components/src/styles/components/tag.scss styles
 // we set a higher value than the line-height (~13px) to accommodate cases where the text wraps
-$hds-tag-border-radius: 20px; // This variable is repeated from tag.scss
+$hds-tag-border-radius: 50px; // This variable is repeated from tag.scss
 $hds-super-select-item-height: 36px;
 
 // Style overrides:

diff --git a/packages/components/src/styles/components/tag.scss b/packages/components/src/styles/components/tag.scss
@@ -10,7 +10,7 @@
 @use "../mixins/focus-ring" as *;
 
 // we set a higher value than the line-height (~13px) to accommodate cases where the text wraps
-$hds-tag-border-radius: 20px;
+$hds-tag-border-radius: 50px;
 
 .hds-tag {
   display: inline-flex;
@@ -20,6 +20,12 @@ $hds-tag-border-radius: 20px;
   background-color: var(--token-color-surface-interactive);
   border: 1px solid var(--token-color-border-strong);
   border-radius: $hds-tag-border-radius;
+  overflow: hidden;
+}
+
+.hds-tag:focus-within,
+.hds-tag:has(.mock-focus) {
+  overflow: visible;
 }
 
 .hds-tag__dismiss {