ButtonGroup: Change reset selector to use .Button class (#2072)

primer · Jun 12, 2023 · 70086f5 · 70086f5
1 parent aa8b1e2
commit 70086f5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/.changeset/seven-vans-brake.md b/.changeset/seven-vans-brake.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+ButtonGroup: Change reset selector to use .Button class
diff --git a/app/components/primer/beta/button_group.pcss b/app/components/primer/beta/button_group.pcss
@@ -1,7 +1,7 @@
 .ButtonGroup {
   display: inline-flex;
 
-  & button {
+  & .Button {
     margin-inline-end: -1px;
     position: relative;
     border-radius: 0;
@@ -14,13 +14,13 @@
   }
 
   & > :first-child,
-  & > :first-child.Button-withTooltip button {
+  & > :first-child.Button-withTooltip .Button {
     border-top-left-radius: var(--borderRadius-medium);
     border-bottom-left-radius: var(--borderRadius-medium);
   }
 
   & > :last-child,
-  & > :last-child.Button-withTooltip button {
+  & > :last-child.Button-withTooltip .Button {
     border-top-right-radius: var(--borderRadius-medium);
     border-bottom-right-radius: var(--borderRadius-medium);
   }

diff --git a/previews/primer/beta/button_group_preview.rb b/previews/primer/beta/button_group_preview.rb
@@ -47,6 +47,24 @@ def icon_buttons(size: :medium)
           component.with_button(icon: "sort-desc", "aria-label": "button 3")
         end
       end
+
+      # @label Button group with all tags
+      def all_tags
+        render(Primer::Beta::ButtonGroup.new) do |component|
+          component.with_button(id: "button-1", tag: :button) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 1"
+          end
+          component.with_button(id: "button-2", tag: :a) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 2"
+          end
+          component.with_button(id: "button-3", tag: :summary) do |component|
+            component.with_tooltip(text: "Button Tooltip")
+            "Button 3"
+          end
+        end
+      end
     end
   end
 end