From 15178a45801365cb6a6b220a68b3d941878bf4cc Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 29 Sep 2022 12:03:17 -0700 Subject: [PATCH 1/3] Add SVG and custom content options to NavList's leading visual slot --- app/components/primer/alpha/action_list/item.rb | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app/components/primer/alpha/action_list/item.rb b/app/components/primer/alpha/action_list/item.rb index 0c48196eb6..9948dd244b 100644 --- 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, **system_arguments) + }, + content: lambda { |**system_arguments| + Primer::BaseComponent.new(tag: :span, **system_arguments) + } } # Used internally. From 41387e67bf4f214ff588d716aa5f8a1b5088769e Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 29 Sep 2022 13:17:29 -0700 Subject: [PATCH 2/3] Add changeset --- .changeset/tough-pumas-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-pumas-flash.md diff --git a/.changeset/tough-pumas-flash.md b/.changeset/tough-pumas-flash.md new file mode 100644 index 0000000000..5d90046a8d --- /dev/null +++ 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 From cf2eaab1fe32d8c2327a9585bf5592e6d0c36175 Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 29 Sep 2022 14:17:43 -0700 Subject: [PATCH 3/3] Add a preview showcasing the new types of leading visual --- .../primer/alpha/action_list/item.rb | 2 +- previews/primer/alpha/action_list_preview.rb | 30 +++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/app/components/primer/alpha/action_list/item.rb b/app/components/primer/alpha/action_list/item.rb index 9948dd244b..eab3f1430d 100644 --- a/app/components/primer/alpha/action_list/item.rb +++ b/app/components/primer/alpha/action_list/item.rb @@ -45,7 +45,7 @@ class Item < Primer::Component icon: Primer::OcticonComponent, avatar: ->(**kwargs) { Primer::Beta::Avatar.new(**{ **kwargs, size: 16 }) }, svg: lambda { |**system_arguments| - Primer::BaseComponent.new(tag: :svg, **system_arguments) + Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments) }, content: lambda { |**system_arguments| Primer::BaseComponent.new(tag: :span, **system_arguments) diff --git a/previews/primer/alpha/action_list_preview.rb b/previews/primer/alpha/action_list_preview.rb index 118d9f07ac..fb3abedbfc 100644 --- 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 + ''.html_safe + end + end + c.with_item(label: "Custom content", href: "/") do |item| + item.with_leading_visual_content do + 'A'.html_safe + end + end + end + end + # @label Divider # # @param scheme [Symbol] select [subtle, filled]