Apply smaller focus ring to plain and monochrome buttons (#11473)

Closes #11422 Reduces the focus ring closer to the original size for the `plain` and `plainMonochrome` button variants. This PR also applied the underline text decoration styles when focused for the `plain` varaint. ### `plain` https://github.com/Shopify/polaris/assets/11774595/a46629d5-d0e5-414d-8296-7caba60d0831 ### `plainMonochrome` https://github.com/Shopify/polaris/assets/11774595/785757b2-7b9b-4f15-b3b0-53b0b2ce8285
Shopify · Jan 21, 2024 · 6579537 · 6579537
1 parent c9abd3c
commit 6579537
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/fuzzy-dancers-hug.md b/.changeset/fuzzy-dancers-hug.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed focus ring size for plain and plain monochrome Button variants
diff --git a/polaris-react/src/components/Button/Button.module.scss b/polaris-react/src/components/Button/Button.module.scss
@@ -174,8 +174,7 @@
   --pc-button-color_active: var(--p-color-text-link-active);
 }
 
-.variantPlain:hover,
-.variantPlain:active {
+.variantPlain:is(:hover, :active, :focus-visible) {
   text-decoration: underline;
 }
 
@@ -194,6 +193,12 @@
   line-height: var(--p-font-line-height-400);
 }
 
+.variantPlain:focus-visible,
+.variantMonochromePlain:focus-visible {
+  border-radius: var(--p-border-radius-300);
+  outline-offset: calc(-1 * var(--pc-button-padding-block));
+}
+
 // TONES
 .toneSuccess:is(.variantSecondary, .variantTertiary, .variantPlain) {
   --pc-button-color: var(--p-color-text-success);