Add :primary and :secondary scheme to IconButton and Match scheme for ButtonGroup menu (#2707)

Author: jonrohan

.changeset/angry-files-eat.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add `:primary` and `:secondary` scheme to IconButton and Match scheme for ButtonGroup menu

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/default.png

@@ -170,6 +170,10 @@ summary.Button {
   border-color: var(--button-primary-borderColor-rest);
   box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
 
+  &.Button--iconOnly {
+    color: var(--button-primary-iconColor-rest);
+  }
+
   &:hover:not(:disabled, .Button--inactive) {
     background-color: var(--button-primary-bgColor-hover);
     border-color: var(--button-primary-borderColor-hover);
@@ -316,6 +320,10 @@ summary.Button {
   border-color: var(--button-danger-borderColor-rest);
   box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
+  &.Button--iconOnly {
+    color: var(--button-danger-iconColor-rest);
+  }
+
   &:hover:not(:disabled, .Button--inactive) {
     color: var(--button-danger-fgColor-hover);
     fill: var(--button-danger-fgColor-hover);

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/focused.png

@@ -46,8 +46,10 @@ class ButtonGroup < Primer::Component
         },
 
         menu_button: {
-          renders: lambda { |**system_arguments|
-            MenuButton.new(**system_arguments)
+          renders: lambda { |menu_arguments: {}, button_arguments: {}|
+            button_arguments[:size] = @size
+            button_arguments[:scheme] = @scheme
+            MenuButton.new(menu_arguments: menu_arguments, button_arguments: button_arguments)
           },
 
           as: :menu_button

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/primary/default.png

@@ -20,6 +20,8 @@ class IconButton < Primer::Component
       DEFAULT_SCHEME = :default
       SCHEME_MAPPINGS = {
         DEFAULT_SCHEME => "Button--secondary",
+        :primary => "Button--primary",
+        :secondary => "Button--secondary",
         :danger => "Button--danger",
         :invisible => "Button--invisible"
       }.freeze

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/primary/focused.png

@@ -41,8 +41,14 @@ def split_button(size: :medium)
 
       # @label With menu button
       #
+      # @param scheme [Symbol] select [default, primary, secondary, danger, invisible]
+      # @param size [Symbol] select [medium, small]
       # @snapshot
-      def with_menu_button
+      def with_menu_button(scheme: :default, size: :medium)
+        render_with_template(locals: {
+          scheme: scheme,
+          size: size
+        })
       end
 
       # @label Icon buttons

app/components/primer/beta/button.pcss

@@ -1,4 +1,4 @@
-<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+<%= render(Primer::Beta::ButtonGroup.new(scheme: scheme, size: size)) do |component| %>
   <% component.with_button { "Main menu" } %>
   <% component.with_menu_button(button_arguments: { "aria-label": "secondary menu" }, menu_arguments: { anchor_align: :end }) do |menu, button| %>
     <% menu.with_item(label: "Item 1", item_id: :item1) %>

app/components/primer/beta/button_group.rb

@@ -87,6 +87,31 @@ def invisible(
                ))
       end
 
+      # @label Primary
+      # @param size select [small, medium, large]
+      # @param aria_label text
+      # @param disabled toggle
+      # @param tag select [a, summary, button]
+      # @snapshot
+      def primary(
+        size: :medium,
+        id: "button-preview",
+        tag: :button,
+        disabled: false,
+        icon: :x,
+        aria_label: "Button"
+      )
+        render(Primer::Beta::IconButton.new(
+                 scheme: :primary,
+                 size: size,
+                 id: id,
+                 tag: tag,
+                 disabled: disabled,
+                 icon: icon,
+                 "aria-label": aria_label
+               ))
+      end
+
       # @label Danger
       # @param size select [small, medium, large]
       # @param aria_label text

app/components/primer/beta/icon_button.rb

@@ -17,7 +17,7 @@ def setup
   def bench_allocations_without_cache
     Primer::Beta::Octicon.new(**@options)
     Primer::Octicon::Cache.clear!
-    assert_allocations "3.2" => 28, "3.1" => 29, "3.0" => 29, "2.7" => 30 do
+    assert_allocations "3.2" => 26, "3.1" => 27, "3.0" => 27 do
       Primer::Beta::Octicon.new(**@options)
     end
   ensure
@@ -26,7 +26,7 @@ def bench_allocations_without_cache
 
   def bench_allocations_with_cache
     Primer::Octicon::Cache.preload!
-    assert_allocations "3.2" => 10, "3.1" => 10, "3.0" => 10, "2.7" => 12 do
+    assert_allocations "3.2" => 10, "3.1" => 10, "3.0" => 10 do
       Primer::Beta::Octicon.new(**@options)
     end
   end