Update ButtonGroup to use Beta::Button

.changeset/forty-jokes-punch.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Update `ButtonGroup` to use `Beta::Button`

app/components/primer/beta/button_group.pcss

@@ -0,0 +1,28 @@
+.ButtonGroup {
+  display: inline-flex;
+
+  & button {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+
+    &:focus,
+    &:active,
+    &:hover {
+      z-index: 1;
+    }
+  }
+
+  & > :first-child,
+  & > :first-child.Button-withTooltip button {
+    border-top-left-radius: var(--borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+  }
+
+  & > :last-child,
+  & > :last-child.Button-withTooltip button {
+    border-top-right-radius: var(--borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium, 6px);
+  }
+
+}

app/components/primer/beta/button_group.rb

@@ -8,45 +8,45 @@ class ButtonGroup < Primer::Component
 
       # Required list of buttons to be rendered.
       #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `size` and `group_item`.
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>
       renders_many :buttons, lambda { |**kwargs|
-        kwargs[:group_item] = true
         kwargs[:size] = @size
+        kwargs[:scheme] = @scheme
 
-        # rubocop:disable Primer/ComponentNameMigration
-        Primer::ButtonComponent.new(**kwargs)
-        # rubocop:enable Primer/ComponentNameMigration
+        if kwargs[:icon]
+          Primer::Beta::IconButton.new(**kwargs)
+        else
+          Primer::Beta::Button.new(**kwargs)
+        end
       }
 
       # @example Default
       #
       #   <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
-      #     <% component.with_button { "Default" } %>
-      #     <% component.with_button(scheme: :primary) { "Primary" } %>
-      #     <% component.with_button(scheme: :danger) { "Danger" } %>
-      #     <% component.with_button(scheme: :outline) { "Outline" } %>
-      #     <% component.with_button(classes: "custom-class") { "Custom class" } %>
+      #     <% component.with_button { "Button 1" } %>
+      #     <% component.with_button { "Button 2" } %>
+      #     <% component.with_button { "Button 3" } %>
       #   <% end %>
       #
       # @example Sizes
       #
       #   <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
-      #     <% component.with_button { "Default" } %>
-      #     <% component.with_button(scheme: :primary) { "Primary" } %>
-      #     <% component.with_button(scheme: :danger) { "Danger" } %>
-      #     <% component.with_button(scheme: :outline) { "Outline" } %>
+      #     <% component.with_button { "Button 1" } %>
+      #     <% component.with_button { "Button 2" } %>
+      #     <% component.with_button { "Button 3" } %>
       #   <% end %>
       #
-      # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-      # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+      # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(variant: nil, size: Primer::ButtonComponent::DEFAULT_SIZE, **system_arguments)
-        @size = variant || size
+      def initialize(scheme: Primer::Beta::Button::DEFAULT_SCHEME, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @size = size
+        @scheme = scheme
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
 
         @system_arguments[:classes] = class_names(
-          "BtnGroup",
+          "ButtonGroup",
           system_arguments[:classes]
         )
       end

app/components/primer/primer.pcss

@@ -25,6 +25,7 @@
 @import "./alpha/overlay.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
+@import "./beta/button_group.pcss";
 @import "./beta/counter.pcss";
 @import "./beta/flash.pcss";
 @import "./beta/label.pcss";

previews/primer/beta/button_group_preview.rb

@@ -6,13 +6,13 @@ module Beta
     class ButtonGroupPreview < ViewComponent::Preview
       # @label Playground
       #
-      # @param size [Symbol] select [medium, small]
-      def playground(size: :medium)
-        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
-          component.with_button { "Button" }
-          component.with_button(scheme: :primary) { "Primary" }
-          component.with_button(scheme: :danger) { "Danger" }
-          component.with_button(scheme: :outline) { "Outline" }
+      # @param size [Symbol] select [small, medium, large]
+      # @param scheme [Symbol] select [default, primary, secondary, danger, invisible]
+      def playground(size: :medium, scheme: :default)
+        render(Primer::Beta::ButtonGroup.new(size: size, scheme: scheme)) do |component|
+          component.with_button { "Button 1" }
+          component.with_button { "Button 2" }
+          component.with_button { "Button 3" }
         end
       end
 
@@ -21,10 +21,30 @@ def playground(size: :medium)
       # @param size [Symbol] select [medium, small]
       def default(size: :medium)
         render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
-          component.with_button { "Button" }
-          component.with_button(scheme: :primary) { "Primary" }
-          component.with_button(scheme: :danger) { "Danger" }
-          component.with_button(scheme: :outline) { "Outline" }
+          component.with_button { "Button 1" }
+          component.with_button { "Button 2" }
+          component.with_button { "Button 3" }
+        end
+      end
+
+      # @label Split button
+      #
+      # @param size [Symbol] select [medium, small]
+      def split_button(size: :medium)
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button { "Button 1" }
+          component.with_button(icon: "triangle-down", "aria-label": "menu")
+        end
+      end
+
+      # @label Icon buttons
+      #
+      # @param size [Symbol] select [medium, small]
+      def icon_buttons(size: :medium)
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |component|
+          component.with_button(icon: :note, "aria-label": "button 1")
+          component.with_button(icon: :rows, "aria-label": "button 2")
+          component.with_button(icon: "sort-desc", "aria-label": "button 3")
         end
       end
     end

previews/primer/beta/button_group_preview/action_menus.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+  <% component.with_button() { "Main menu" } %>
+  <% component.with_button(icon: "triangle-down", "aria-label": "secondary menu", data: { "menu-id": "my-id" }) %>
+<% end %>
+
+<%= render(Primer::Alpha::ActionMenu.new(anchor_align: :end, menu_id: "my-id")) do |component| %>
+  <% component.with_item(label: "Item", tag: :button, value: "") %>
+<% end %>

static/classes.json

@@ -69,6 +69,10 @@
   "Box--danger": [
     "Primer::Beta::BorderBox"
   ],
+  "ButtonGroup": [
+    "Primer::Beta::ButtonGroup",
+    "Primer::Beta::Button-group"
+  ],
   "Label--info": [
     "Primer::Beta::Label"
   ],
@@ -375,10 +379,10 @@
   "ActionListWrap--inset": [
     "Primer::Alpha::ActionList"
   ],
-  "ActionListItem-action": [
+  "ActionListItem-visual": [
     "Primer::Alpha::ActionList"
   ],
-  "ActionListItem-visual": [
+  "ActionListItem-action": [
     "Primer::Alpha::ActionList"
   ],
   "SegmentedControl-item": [
@@ -513,10 +517,10 @@
   "FormControl-inlineValidation": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-check-group-wrap": [
+  "FormControl-radio-group-wrap": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-radio-group-wrap": [
+  "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],
   "Popover-message--bottom-left": [

test/components/beta/button_group_test.rb

@@ -8,14 +8,14 @@ class PrimerBetaButtonGroupTest < Minitest::Test
   def test_does_not_render_without_buttons
     render_inline(Primer::Beta::ButtonGroup.new)
 
-    refute_selector("div.BtnGroup")
+    refute_selector("div.ButtonGroup")
   end
 
   def test_renders_button_items
     render_inline(Primer::Beta::ButtonGroup.new) { |component| component.with_button { "Button" } }
 
-    assert_selector("div.BtnGroup") do
-      assert_selector("button.btn.BtnGroup-item", text: "Button")
+    assert_selector("div.ButtonGroup") do
+      assert_selector("button.Button--secondary.Button", text: "Button")
     end
   end
 
@@ -24,16 +24,14 @@ def test_renders_button_with_props
       component.with_button { "Button" }
       component.with_button(scheme: :primary) { "Primary" }
       component.with_button(scheme: :danger) { "Danger" }
-      component.with_button(scheme: :outline) { "Outline" }
       component.with_button(classes: "custom-class") { "Custom class" }
     end
 
-    assert_selector("div.BtnGroup") do
-      assert_selector("button.btn.BtnGroup-item", text: "Button")
-      assert_selector("button.btn.BtnGroup-item.btn-primary", text: "Primary")
-      assert_selector("button.btn.BtnGroup-item.btn-danger", text: "Danger")
-      assert_selector("button.btn.BtnGroup-item.btn-outline", text: "Outline")
-      assert_selector("button.btn.BtnGroup-item.custom-class", text: "Custom class")
+    assert_selector("div.ButtonGroup") do
+      assert_selector("button.Button--secondary.Button", text: "Button")
+      assert_selector("button.Button--primary.Button", text: "Primary")
+      assert_selector("button.Button--danger.Button", text: "Danger")
+      assert_selector("button.custom-class", text: "Custom class")
     end
   end
 
@@ -46,20 +44,24 @@ def test_does_not_render_content
   def test_all_buttons_with_same_size
     render_inline(Primer::Beta::ButtonGroup.new(size: :small)) do |component|
       component.with_button(size: :medium) { "Medium" }
+      component.with_button(size: :large) { "Large" }
     end
 
-    assert_selector("div.BtnGroup") do
-      assert_selector("button.btn.BtnGroup-item.btn-sm", text: "Medium")
+    assert_selector("div.ButtonGroup") do
+      assert_selector("button.Button-small.Button", text: "Medium")
+      assert_selector("button.Button-small.Button", text: "Large")
     end
   end
 
-  def test_all_buttons_with_same_variant
-    render_inline(Primer::Beta::ButtonGroup.new(variant: :small)) do |component|
-      component.with_button(size: :medium) { "Medium" }
+  def test_all_buttons_with_same_scheme
+    render_inline(Primer::Beta::ButtonGroup.new(scheme: :primary)) do |component|
+      component.with_button(scheme: :primary) { "Primary" }
+      component.with_button(scheme: :danger) { "Danger" }
     end
 
-    assert_selector("div.BtnGroup") do
-      assert_selector("button.btn.BtnGroup-item.btn-sm", text: "Medium")
+    assert_selector("div.ButtonGroup") do
+      assert_selector("button.Button--primary.Button", text: "Primary")
+      assert_selector("button.Button--primary.Button", text: "Danger")
     end
   end
 end

test/css/component_selector_use_test.rb

@@ -12,7 +12,7 @@
   Primer::Alpha::ActionMenu => ["ActionListItem-multiSelectIcon", "copy-link", "quote-reply"],
   Primer::Alpha::AutoComplete => ["form-control", "ActionList"],
   Primer::Alpha::HiddenTextExpander => ["ellipsis-expander", "hidden-text-expander"],
-  Primer::Beta::ButtonGroup => ["BtnGroup", "BtnGroup-item"],
+  Primer::Beta::ButtonGroup => ["ButtonGroup"],
   Primer::Beta::CloseButton => ["close-button"],
   Primer::Beta::Details => ["details-overlay"],
   Primer::Beta::Markdown => ["markdown-body"],

test/css/component_specific_selectors_test.rb

@@ -106,8 +106,7 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".Button--iconOnly.Button--large"
     ],
     Primer::Beta::ButtonGroup => [
-      ".BtnGroup-item.btn.selected",
-      ".BtnGroup-parent"
+      ".ButtonGroup"
     ],
     Primer::Beta::Avatar => [
       ".avatar-link",