Remove touch target gaps between ActionBar items (#2365)

primer · Nov 9, 2023 · 314c0f1 · 314c0f1
1 parent 73d0561
commit 314c0f1
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 61 deletions.
diff --git a/.changeset/popular-timers-shop.md b/.changeset/popular-timers-shop.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Remove touch target gaps between ActionBar items
diff --git a/app/components/primer/alpha/action_bar.pcss b/app/components/primer/alpha/action_bar.pcss
@@ -2,7 +2,7 @@
 .ActionBar {
   position: relative;
   display: flex !important;
-  min-width: calc(var(--control-medium-size) * 3); 
+  min-width: calc(var(--control-medium-size) * 3);
   align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
@@ -51,19 +51,3 @@
 .ActionBar--large .ActionBar-divider {
   margin: 0 var(--controlStack-large-gap-condensed);
 }
-
-/* Increase spacing so touch targets don't overlap */
-
-@media (pointer: coarse) {
-  .ActionBar .ActionBar-item-container {
-    gap: calc(var(--control-minTarget-coarse) - var(--control-medium-size)); /* 12px */
-  }
-
-  .ActionBar--small .ActionBar-item-container {
-    gap: calc(var(--control-minTarget-coarse) - var(--control-small-size));  /* 16px */
-  }
-
-  .ActionBar--large .ActionBar-item-container {
-    gap: calc(var(--control-minTarget-coarse) - var(--control-large-size));  /* 4px */
-  }
-}
diff --git a/test/components/alpha/action_bar_test.rb b/test/components/alpha/action_bar_test.rb
@@ -7,6 +7,43 @@ module Alpha
     class ActionBarTest < Minitest::Test
       include Primer::ComponentTestHelpers
 
+      def test_renders
+        render_inline(Primer::Alpha::ActionBar.new) do |component|
+          component.with_item_icon_button(icon: :pencil, label: "Button 1")
+          component.with_item_icon_button(icon: :pencil, label: "Button 2")
+          component.with_item_icon_button(icon: :pencil, label: "Button 3")
+          component.with_item_icon_button(icon: :pencil, label: "Button 4")
+        end
+
+        assert_selector("action-bar") do
+          assert_selector("tool-tip", text: "Button 1")
+          assert_selector("tool-tip", text: "Button 2")
+          assert_selector("tool-tip", text: "Button 3")
+          assert_selector("tool-tip", text: "Button 4")
+          assert_selector("[data-target=\"action-bar.moreMenu\"]", visible: :hidden)
+        end
+      end
+
+      def test_size_small
+        render_inline(Primer::Alpha::ActionBar.new(size: :small)) do |component|
+          component.with_item_icon_button(icon: :pencil, label: "Button 1")
+          component.with_item_icon_button(icon: :pencil, label: "Button 2")
+          component.with_item_divider
+          component.with_item_icon_button(icon: :pencil, label: "Button 3")
+          component.with_item_icon_button(icon: :pencil, label: "Button 4")
+        end
+
+        assert_selector("[data-targets=\"action-bar.items\"] .Button--small", count: 4)
+      end
+
+      def test_item_merges_item_arguments
+        render_inline(Primer::Alpha::ActionBar.new(size: :small)) do |component|
+          component.with_item_icon_button(icon: :pencil, label: "Button 1", item_arguments: { classes: "foo", tag: :span })
+        end
+
+        assert_selector("span.foo.ActionBar-item")
+      end
+
       def test_renders_action_menu_items_with_type_button
         render_preview(:default)
 

diff --git a/test/components/primer/alpha/action_bar_test.rb b/test/components/primer/alpha/action_bar_test.rb