Add SVG and custom content options to NavList's leading visual slot (#…

…1422)
primer · Sep 29, 2022 · a129a4d · a129a4d
1 parent da3fed6
commit a129a4d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/.changeset/tough-pumas-flash.md b/.changeset/tough-pumas-flash.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Add SVG and custom content options to NavList's leading visual slot
diff --git a/app/components/primer/alpha/action_list/item.rb b/app/components/primer/alpha/action_list/item.rb
@@ -32,14 +32,24 @@ class Item < Primer::Component
         # for layout options.
         renders_one :description
 
-        # An icon or avatar that will render to the left of the label.
+        # An icon, avatar, SVG, or custom content that will render to the left of the label.
         #
         # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Primer::OcticonComponent) %>.
         #
         # To render an avatar, call the `with_leading_visual_avatar` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
+        #
+        # To render an SVG, call the `with_leading_visual_svg` method.
+        #
+        # To render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.
         renders_one :leading_visual, types: {
           icon: Primer::OcticonComponent,
-          avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) }
+          avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) },
+          svg: lambda { |**system_arguments|
+            Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
+          },
+          content: lambda { |**system_arguments|
+            Primer::BaseComponent.new(tag: :span, **system_arguments)
+          }
         }
 
         # Used internally.

diff --git a/previews/primer/alpha/action_list_preview.rb b/previews/primer/alpha/action_list_preview.rb
@@ -33,6 +33,36 @@ def default(
         end
       end
 
+      # @label Leading visuals
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def leading_visuals(
+        role: Primer::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Primer::Alpha::ActionList.new(
+                 role: role,
+                 scheme: scheme,
+                 show_dividers: show_dividers,
+                 aria: { label: "Action List" }
+               )) do |c|
+          c.with_heading(title: "Action List")
+          c.with_item(label: "Leading SVG visual", href: "/") do |item|
+            item.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
+          end
+          c.with_item(label: "Custom content", href: "/") do |item|
+            item.with_leading_visual_content do
+              '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe
+            end
+          end
+        end
+      end
+
       # @label Divider
       #
       # @param scheme [Symbol] select [subtle, filled]