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

jonrohan · web-flow · commit 1c7353976a09 · 2024-03-19T19:09:29.000-07:00
diff --git a/.changeset/angry-files-eat.md b/.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
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/default.png
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/focused.png
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/primary/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/primary/default.png
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/primary/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/primary/focused.png
diff --git a/app/components/primer/beta/button.pcss b/app/components/primer/beta/button.pcss
@@ -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);
diff --git a/app/components/primer/beta/button_group.rb b/app/components/primer/beta/button_group.rb
@@ -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
diff --git a/app/components/primer/beta/icon_button.rb b/app/components/primer/beta/icon_button.rb
@@ -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
diff --git a/previews/primer/beta/button_group_preview.rb b/previews/primer/beta/button_group_preview.rb
@@ -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
diff --git a/previews/primer/beta/button_group_preview/with_menu_button.html.erb b/previews/primer/beta/button_group_preview/with_menu_button.html.erb
@@ -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) %>
diff --git a/previews/primer/beta/icon_button_preview.rb b/previews/primer/beta/icon_button_preview.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
diff --git a/test/performance/bench_octicons.rb b/test/performance/bench_octicons.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

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/view-components": patch
 +---
++
 +Add `:primary` and `:secondary` scheme to IconButton and Match scheme for ButtonGroup menu
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<%= render(Primer::Beta::ButtonGroup.new) do \|component\| %>`
	`1`	`+<%= render(Primer::Beta::ButtonGroup.new(scheme: scheme, size: size)) do \|component\| %>`
`2`	`2`	`<% component.with_button { "Main menu" } %>`
`3`	`3`	`<% component.with_menu_button(button_arguments: { "aria-label": "secondary menu" }, menu_arguments: { anchor_align: :end }) do \|menu, button\| %>`
`4`	`4`	`<% menu.with_item(label: "Item 1", item_id: :item1) %>`