refactor(button): remove spectrum-ButtonWithFocusRing extend (#2725)

The styles had previously diverged from what this placeholder class was
providing, which was causing an issue with needing to override styles
with unnecessary CSS. This cleans that up by integrating the small
number of styles from spectrum-ButtonWithFocusRing that were not already
present, and removing that "extend".

Author: jawinn

.changeset/fresh-seahorses-join.md

@@ -0,0 +1,8 @@
+---
+"@spectrum-css/button": patch
+---
+
+#### refactor: remove spectrum-ButtonWithFocusRing placeholder class extend
+
+Removes the need for the extend from this placeholder class, as the styles it provides have diverged slightly from what is in button and it was causing some unnecessary CSS to override.
+This should not result in any changed visuals or behavior, as the same CSS has been integrated.

components/button/index.css

@@ -331,7 +331,6 @@ governing permissions and limitations under the License.
 
 .spectrum-Button {
   @extend %spectrum-BaseButton;
-  @extend %spectrum-ButtonWithFocusRing;
 
   border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius));
   border-width: var(--mod-button-border-width, var(--spectrum-button-border-width));
@@ -384,6 +383,8 @@ governing permissions and limitations under the License.
 
   /* Focus indicator */
   &::after {
+    content: "";
+    display: block;
     position: absolute;
     inset: 0;
     margin: calc((
@@ -397,7 +398,6 @@ governing permissions and limitations under the License.
     ));
     transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out;
     pointer-events: none;
-    content: '';
   }
 
   &:focus-visible,
@@ -409,13 +409,6 @@ governing permissions and limitations under the License.
       box-shadow: 0 0 0
         var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness))
         var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)));
-
-      /* Margin is repeated to override declaration coming from the imported BaseButton. */
-      margin: calc((
-          var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) +
-          var(--mod-button-border-width, var(--spectrum-button-border-width))
-        ) * -1
-      );
     }
   }
 

components/button/metadata/mods.md

@@ -22,7 +22,6 @@
 | `--mod-button-edge-to-text`              |
 | `--mod-button-edge-to-visual`            |
 | `--mod-button-edge-to-visual-only`       |
-| `--mod-button-focus-indicator-gap`       |
 | `--mod-button-focus-ring-border-radius`  |
 | `--mod-button-focus-ring-color`          |
 | `--mod-button-focus-ring-gap`            |