Support with_leading_visual_svg in Primer::Beta::Button (#2215)

Co-authored-by: mjimenez98 <[email protected]>

.changeset/plenty-experts-sort.md

@@ -0,0 +1,7 @@
+---
+'@primer/view-components': minor
+---
+
+Support SVGs as leading visuals in `Button` component
+
+<!-- Changed components: Primer::Beta::Button -->

app/components/primer/alpha/action_list.pcss

@@ -549,6 +549,12 @@
   grid-area: trailingAction;
 }
 
+/* have leading visual svg filled with chosen color */
+
+.ActionListItem-visual--leading svg {
+  fill: currentcolor;
+}
+
 /* wrapper span
  default block */
 .ActionListItem-descriptionWrap {

app/components/primer/beta/button.pcss

@@ -110,6 +110,10 @@ summary.Button {
   grid-area: leadingVisual;
 }
 
+.Button-leadingVisual svg {
+  fill: currentcolor;
+}
+
 .Button-trailingVisual {
   grid-area: trailingVisual;
 }

app/components/primer/beta/button.rb

@@ -41,10 +41,15 @@ class Button < Primer::Component
       #
       # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
       #
+      # - `leading_visual_svg` to render a SVG.
+      #
       # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
       renders_one :leading_visual, types: {
         icon: lambda { |**system_arguments|
           Primer::Beta::Octicon.new(**system_arguments)
+        },
+        svg: lambda { |**system_arguments|
+          Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
         }
       }
 

previews/primer/beta/button_preview.rb

@@ -264,6 +264,28 @@ def leading_visual(
                              })
       end
 
+      # @label Leading visual SVG
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      def leading_visual_svg(
+        scheme: :invisible,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
       # @label Trailing action
       # @param block toggle
       # @param align_content select [center, start]

previews/primer/beta/button_preview/leading_visual.html.erb

@@ -2,7 +2,7 @@
     scheme: scheme,
     size: size,
     block: block,
-    id: id,
+    id: "button-preview",
     align_content: align_content
 )) do |component| %>
   <% component.with_leading_visual_icon(icon: :search) %>

previews/primer/beta/button_preview/leading_visual_svg.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: "button-preview",
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_svg do %>
+    <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
+  <% end %>
+  Button
+<% end %>

static/info_arch.json

@@ -10708,6 +10708,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button/leading_visual_svg",
+        "name": "leading_visual_svg",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button/trailing_action",
         "name": "trailing_action",

static/previews.json

@@ -2046,6 +2046,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/button/leading_visual_svg",
+        "name": "leading_visual_svg",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/button/trailing_action",
         "name": "trailing_action",

test/components/primer/beta/button_test.rb

@@ -17,7 +17,7 @@ def test_renders_button_invisible_no_visuals
     assert_selector(".Button.Button--invisible-noVisuals")
   end
 
-  def test_renders_with_leading_visual
+  def test_renders_with_leading_visual_icon
     render_inline(Primer::Beta::Button.new) do |component|
       component.with_leading_visual_icon(icon: :alert)
       "Button"
@@ -27,6 +27,18 @@ def test_renders_with_leading_visual
     assert_selector(".Button .Button-leadingVisual .octicon-alert")
   end
 
+  def test_renders_with_leading_visual_svg
+    render_inline(Primer::Beta::Button.new) do |component|
+      component.with_leading_visual_svg do
+        '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe
+      end
+      "Button"
+    end
+
+    assert_selector(".Button", text: "Button")
+    assert_selector(".Button .Button-leadingVisual")
+  end
+
   def test_renders_button_with_tooltip
     render_inline(Primer::Beta::Button.new(id: "button-id")) do |component|
       component.with_tooltip(text: "Tooltip", type: :description)