refactor(ButtonBase): update selector to have specificty 0,1,0 (#5584)

* refactor(ButtonBase): update selector to have specificty 0,1,0 * chore: add changeset
primer · Jan 22, 2025 · b661959 · b661959
1 parent 5c33323
commit b661959
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/slow-nails-reflect.md b/.changeset/slow-nails-reflect.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update specificity for ButtonBase to be at least 0,1,0
diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -1,5 +1,5 @@
 /* Base styles */
-:where(.ButtonBase) {
+.ButtonBase {
   display: flex;
   min-width: max-content;
   height: var(--control-medium-size);
@@ -54,21 +54,21 @@
   }
 
   /* Visuals */
-  & .Visual {
+  & :where(.Visual) {
     display: flex;
     color: var(--fgColor-muted);
     pointer-events: none;
   }
 
   /* mostly for CounterLabel */
-  & .VisualWrap {
+  & :where(.VisualWrap) {
     display: flex;
     pointer-events: none;
   }
 
   /* IconButton */
 
-  &.IconButton {
+  &:where(.IconButton) {
     display: inline-grid;
     width: var(--control-medium-size);
     min-width: unset;
@@ -88,7 +88,7 @@
 
   /* LinkButton */
 
-  &[href] {
+  &:where([href]) {
     display: inline-flex;
 
     &:hover {
@@ -98,7 +98,7 @@
 
   /* Button layout */
 
-  & .ButtonContent {
+  & :where(.ButtonContent) {
     flex: 1 0 auto;
     display: grid;
     grid-template-areas: 'leadingVisual text trailingVisual';
@@ -125,7 +125,7 @@
     grid-area: leadingVisual;
   }
 
-  & .Label {
+  & :where(.Label) {
     /* stylelint-disable-next-line primer/typography */
     line-height: 1.4285714; /* temporary until we use Text component with --text-body-lineHeight-medium */
     white-space: nowrap;