primer_view_components 0.35.2 → 0.36.0

data/app/components/primer/alpha/action_bar.rb

@@ -88,9 +88,9 @@ module Primer
       def before_render
         @system_arguments[:tag] = render_overflow_menu? ? :"action-bar" : :div
         @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "overflow-visible": !render_overflow_menu?
+          @system_arguments[:classes]
         )
+        @system_arguments[:overflow] = :visible if render_overflow_menu?
         content
       end
     end

data/app/components/primer/alpha/action_bar_element.js

@@ -47,13 +47,6 @@ let ActionBarElement = class ActionBarElement extends HTMLElement {
         _ActionBarElement_focusZoneAbortController.set(this, null);
     }
     connectedCallback() {
-        // Calculate the width of all the items before hiding anything
-        for (const item of this.items) {
-            const width = item.getBoundingClientRect().width;
-            const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10);
-            const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10);
-            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
-        }
         resizeObserver.observe(this);
         instersectionObserver.observe(this);
         requestAnimationFrame(() => {

data/app/components/primer/alpha/action_bar_element.ts

@@ -36,14 +36,6 @@ class ActionBarElement extends HTMLElement {
   #focusZoneAbortController: AbortController | null = null
 
   connectedCallback() {
-    // Calculate the width of all the items before hiding anything
-    for (const item of this.items) {
-      const width = item.getBoundingClientRect().width
-      const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10)
-      const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10)
-      item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`)
-    }
-
     resizeObserver.observe(this)
     instersectionObserver.observe(this)
 

data/app/components/primer/base_component.rb

@@ -151,6 +151,7 @@ module Primer
     # | :- | :- | :- |
     # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
+    # | trim | Boolean | Calls `strip` on the content to remove trailing and leading white spaces. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
 
@@ -158,6 +159,8 @@ module Primer
 
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
+      @trim = !!@system_arguments.delete(:trim)
+
       @system_arguments[:"data-view-component"] = true
       # Filter out Primer keys so they don't get assigned as HTML attributes
       @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::Utilities::UTILITIES.keys)
@@ -167,7 +170,7 @@ module Primer
       if SELF_CLOSING_TAGS.include?(@tag)
         tag(@tag, @content_tag_args.merge(@result))
       else
-        content_tag(@tag, content, @content_tag_args.merge(@result))
+        content_tag(@tag, @trim ? trimmed_content : content, @content_tag_args.merge(@result))
       end
     end
   end

data/app/components/primer/beta/auto_complete.rb

@@ -44,6 +44,7 @@ module Primer
         system_arguments[:"allow-out-of-bounds"] = ""
         system_arguments[:id] = @list_id
         system_arguments[:popover] = ""
+        system_arguments[:overflow_y] = :auto
         system_arguments[:classes] = class_names(
           "ActionListWrap ActionListWrap--inset",
           @overlay_classes,

data/app/components/primer/beta/button.rb

@@ -159,17 +159,6 @@ module Primer
           "Button--invisible-noVisuals"
         )
       end
-
-      def trimmed_content
-        return if content.blank?
-
-        trimmed_content = content.strip
-
-        return trimmed_content unless content.html_safe?
-
-        # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-        trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
-      end
     end
   end
 end

data/app/components/primer/beta/link.css

@@ -1 +1 @@
-.Link{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default)!important}.Link--primary:hover{color:var(--fgColor-accent)!important}.Link--secondary{color:var(--fgColor-muted)!important}.Link--secondary:hover{color:var(--fgColor-accent)!important}.Link--muted{color:var(--fgColor-muted)!important}.Link--muted:hover{color:var(--fgColor-accent)!important;-webkit-text-decoration:none;text-decoration:none}.Link--onHover:hover{color:var(--fgColor-accent)!important;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]{color:inherit!important}
+.Link{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{-webkit-text-decoration:underline;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--underline{-webkit-text-decoration:underline;text-decoration:underline}.Link--primary{color:var(--fgColor-default)!important}.Link--primary:hover{color:var(--fgColor-accent)!important}.Link--secondary{color:var(--fgColor-muted)!important}.Link--secondary:hover{color:var(--fgColor-accent)!important}.Link--muted{color:var(--fgColor-muted)!important}.Link--muted:hover{color:var(--fgColor-accent)!important;-webkit-text-decoration:none;text-decoration:none}.Link--onHover:hover{color:var(--fgColor-accent)!important;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline}:is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]{color:inherit!important}.Link-content{align-items:center;display:inline-flex;gap:var(--base-size-4);line-height:normal;text-decoration:inherit}

data/app/components/primer/beta/link.css.json

@@ -13,6 +13,7 @@
     ".Link--muted",
     ".Link--muted:hover",
     ".Link--onHover:hover",
-    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]"
+    ":is(.Link--secondary,.Link--primary,.Link--muted):hover [class*=color-fg]",
+    ".Link-content"
   ]
 }

data/app/components/primer/beta/link.css.map

@@ -1 +1 @@
-{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,sCAKF,CAHE,qBACE,qCACF,CAGF,iBACE,oCAKF,CAHE,uBACE,qCACF,CAGF,aACE,oCAMF,CAJE,mBACE,qCAAuC,CACvC,4BAAqB,CAArB,oBACF,CAMA,qBACE,qCAAuC,CAEvC,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,0EACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--underline {\n  text-decoration: underline;\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBAeF,CAbE,YAEE,cACF,CAEA,wBAJE,iCAA0B,CAA1B,yBAMF,CAEA,gCAEE,gBACF,CAGF,iBACE,iCAA0B,CAA1B,yBACF,CAEA,eACE,sCAKF,CAHE,qBACE,qCACF,CAGF,iBACE,oCAKF,CAHE,uBACE,qCACF,CAGF,aACE,oCAMF,CAJE,mBACE,qCAAuC,CACvC,4BAAqB,CAArB,oBACF,CAMA,qBACE,qCAAuC,CAEvC,cAAe,CADf,iCAA0B,CAA1B,yBAEF,CAQA,0EACE,uBACF,CAGF,cAEE,kBAAmB,CADnB,mBAAoB,CAIpB,sBAAuB,CADvB,kBAAmB,CAEnB,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--underline {\n  text-decoration: underline;\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n\n.Link-content {\n  display: inline-flex;\n  align-items: center;\n  /* stylelint-disable-next-line primer/typography */\n  line-height: normal;\n  gap: var(--base-size-4);\n  text-decoration: inherit;\n}\n"]}

data/app/components/primer/beta/link.html.erb

@@ -0,0 +1,18 @@
+<%= render Primer::ConditionalWrapper.new(condition: tooltip?, trim: true, tag: :span, position: :relative) do %>
+  <%= render(Primer::BaseComponent.new(trim: true, **@system_arguments)) do %>
+    <% if leading_visual || trailing_visual %>
+      <%= render(Primer::BaseComponent.new(tag: :span, classes: "Link-content", trim: true)) do %>
+        <% if leading_visual %>
+          <%= leading_visual %>
+        <% end %>
+        <%= content %>
+        <% if trailing_visual %>
+          <%= trailing_visual %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  <% end %>
+  <%= tooltip if tooltip? %>
+<% end %>

data/app/components/primer/beta/link.pcss

@@ -67,3 +67,12 @@
     color: inherit !important;
   }
 }
+
+.Link-content {
+  display: inline-flex;
+  align-items: center;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: normal;
+  gap: var(--base-size-4);
+  text-decoration: inherit;
+}

data/app/components/primer/beta/link.rb

@@ -30,6 +30,32 @@ module Primer
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
+      # Leading visuals appear to the left of the link text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @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)
+        }
+      }
+
+      # Trailing visuals appear to the right of the link text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :trailing_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
       # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
@@ -54,20 +80,6 @@ module Primer
       def before_render
         raise ArgumentError, "href is required" if @system_arguments[:href].nil? && !Rails.env.production?
       end
-
-      def call
-        if tooltip.present?
-          render Primer::BaseComponent.new(tag: :span, position: :relative) do
-            render(Primer::BaseComponent.new(**@system_arguments)) do
-              content
-            end.to_s + tooltip.to_s
-          end
-        else
-          render(Primer::BaseComponent.new(**@system_arguments)) do
-            content
-          end
-        end
-      end
     end
   end
 end

data/app/components/primer/button_component.rb

@@ -111,16 +111,5 @@ module Primer
     def link?
       @scheme == LINK_SCHEME
     end
-
-    def trimmed_content
-      return if content.blank?
-
-      trimmed_content = content.strip
-
-      return trimmed_content unless content.html_safe?
-
-      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-      trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
-    end
   end
 end

data/app/components/primer/component.rb

@@ -148,5 +148,12 @@ module Primer
     def should_raise_aria_error?
       !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
+
+    def trimmed_content
+      return content unless content.present?
+
+      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+      content.html_safe? ? content.strip.html_safe : content.strip # rubocop:disable Rails/OutputSafety
+    end
   end
 end

data/app/components/primer/conditional_wrapper.rb

@@ -10,12 +10,15 @@ module Primer
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments
+      @trim = !!@base_component_arguments.delete(:trim)
     end
 
     def call
-      return content unless @condition
+      unless @condition
+        return @trim ? trimmed_content : content
+      end
 
-      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+      BaseComponent.new(trim: @trim, **@base_component_arguments).render_in(self) { content }
     end
   end
 end

data/app/forms/horizontal_form.rb

@@ -3,6 +3,8 @@
 # :nodoc:
 class HorizontalForm < ApplicationForm
   form do |my_form|
+    my_form.hidden(name: :token, value: "abc123")
+
     my_form.group(layout: :horizontal) do |name_group|
       name_group.text_field(
         name: :first_name,

data/app/lib/primer/forms/auto_complete.rb

@@ -40,7 +40,8 @@ module Primer
             input_name: all_args[:name],
             input_id: all_args[:id],
             label_text: @input.label,
-            list_id: "#{all_args[:id]}-list"
+            list_id: "#{all_args[:id]}-list",
+            full_width: @input.full_width?
           )
       end
 

data/app/lib/primer/forms/dsl/hidden_input.rb

@@ -27,6 +27,10 @@ module Primer
         def supports_validation?
           false
         end
+
+        def hidden?
+          true
+        end
       end
     end
   end

data/app/lib/primer/forms/group.rb

@@ -18,9 +18,12 @@ module Primer
         @layout = layout
         @system_arguments = system_arguments
 
+        @system_arguments[:display] = :none if inputs.all?(&:hidden?)
+
         @system_arguments[:classes] = class_names(
           @system_arguments.delete(:classes),
-          "FormControl-horizontalGroup" => horizontal?
+          "FormControl-horizontalGroup" => horizontal?,
+          "FormControl-spacingWrapper" => !horizontal? && inputs.size > 1
         )
       end
 

data/lib/primer/classify/utilities.yml

@@ -1877,3 +1877,66 @@
   - flex-md-shrink-0
   - flex-lg-shrink-0
   - flex-xl-shrink-0
+:overflow:
+  :auto:
+  - overflow-auto
+  - overflow-sm-auto
+  - overflow-lg-auto
+  - overflow-xl-auto
+  :hidden:
+  - overflow-hidden
+  - overflow-sm-hidden
+  - overflow-lg-hidden
+  - overflow-xl-hidden
+  :scroll:
+  - overflow-scroll
+  - overflow-sm-scroll
+  - overflow-lg-scroll
+  - overflow-xl-scroll
+  :visible:
+  - overflow-visible
+  - overflow-sm-visible
+  - overflow-lg-visible
+  - overflow-xl-visible
+:overflow_x:
+  :auto:
+  - overflow-x-auto
+  - overflow-sm-x-auto
+  - overflow-lg-x-auto
+  - overflow-xl-x-auto
+  :hidden:
+  - overflow-x-hidden
+  - overflow-sm-x-hidden
+  - overflow-lg-x-hidden
+  - overflow-xl-x-hidden
+  :scroll:
+  - overflow-x-scroll
+  - overflow-sm-x-scroll
+  - overflow-lg-x-scroll
+  - overflow-xl-x-scroll
+  :visible:
+  - overflow-x-visible
+  - overflow-sm-x-visible
+  - overflow-lg-x-visible
+  - overflow-xl-x-visible
+:overflow_y:
+  :auto:
+  - overflow-y-auto
+  - overflow-sm-y-auto
+  - overflow-lg-y-auto
+  - overflow-xl-y-auto
+  :hidden:
+  - overflow-y-hidden
+  - overflow-sm-y-hidden
+  - overflow-lg-y-hidden
+  - overflow-xl-y-hidden
+  :scroll:
+  - overflow-y-scroll
+  - overflow-sm-y-scroll
+  - overflow-lg-y-scroll
+  - overflow-xl-y-scroll
+  :visible:
+  - overflow-y-visible
+  - overflow-sm-y-visible
+  - overflow-lg-y-visible
+  - overflow-xl-y-visible

data/lib/primer/classify.rb

@@ -49,9 +49,7 @@ module Primer
             case key
             when :classes
               # insert :classes first to avoid huge doc diffs
-              if (class_names = validated_class_names(val))
-                result.unshift(class_names)
-              end
+              result.unshift(val)
               next
             when :style
               style = val
@@ -105,29 +103,6 @@ module Primer
         brk_str = Primer::Classify::Utilities::BREAKPOINTS[brk]
         Primer::Classify::Utilities.validate(key, val, brk_str)
       end
-
-      def validated_class_names(classes)
-        return if classes.blank?
-
-        if raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
-          invalid_class_names =
-            classes.split.each_with_object([]) do |class_name, memo|
-              memo << class_name if Primer::Classify::Validation.invalid?(class_name)
-            end
-
-          if invalid_class_names.any?
-            raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) "\
-              "instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. "\
-              "This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning."
-          end
-        end
-
-        classes
-      end
-
-      def raise_on_invalid_options?
-        Rails.application.config.primer_view_components.raise_on_invalid_options
-      end
     end
   end
 end

data/lib/primer/static/generate_form_previews.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+require "json"
+
+module Primer
+  module Static
+    # :nodoc:
+    module GenerateFormPreviews
+      class << self
+        def call
+          Lookbook.previews.filter_map do |preview|
+            next unless preview.preview_class == Primer::FormsPreview
+
+            {
+              name: preview.name,
+              lookup_path: preview.lookup_path,
+              examples: preview.scenarios.flat_map do |parent_scenario|
+                scenarios = parent_scenario.type == :scenario_group ? parent_scenario.scenarios : [parent_scenario]
+
+                scenarios.map do |scenario|
+                  snapshot_tag = scenario.tags.find { |tag| tag.tag_name == "snapshot" }
+                  snapshot = if snapshot_tag.nil?
+                               "false"
+                             elsif snapshot_tag.text.blank?
+                               "true"
+                             else
+                               snapshot_tag.text
+                             end
+                  {
+                    preview_path: scenario.lookup_path,
+                    name: scenario.name,
+                    snapshot: snapshot
+                  }
+                end
+              end
+            }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/static.rb

@@ -15,6 +15,7 @@ module Primer
       audited_at: "audited_at.json",
       arguments: "arguments.json",
       previews: "previews.json",
+      form_previews: "form_previews.json",
       info_arch: "info_arch.json"
     }.freeze
 
@@ -50,6 +51,13 @@ module Primer
       Static::GeneratePreviews.call
     end
 
+    # Returns an array of hashes, one per example form, that contains some metadata and
+    # an array of all the form's previews. The preview data contains the Lookbook URL
+    # to each preview and its name.
+    def self.generate_form_previews
+      Static::GenerateFormPreviews.call
+    end
+
     # Returns an array of hashes, one per Primer component, that contains all the data needed
     # for the new primer.style docsite.
     def self.generate_info_arch

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 35
-      PATCH = 2
+      MINOR = 36
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/custom_utilities.yml

@@ -370,3 +370,66 @@
   - flex-md-shrink-0
   - flex-lg-shrink-0
   - flex-xl-shrink-0
+:overflow:
+  :auto:
+  - overflow-auto
+  - overflow-sm-auto
+  - overflow-lg-auto
+  - overflow-xl-auto
+  :hidden:
+  - overflow-hidden
+  - overflow-sm-hidden
+  - overflow-lg-hidden
+  - overflow-xl-hidden
+  :scroll:
+  - overflow-scroll
+  - overflow-sm-scroll
+  - overflow-lg-scroll
+  - overflow-xl-scroll
+  :visible:
+  - overflow-visible
+  - overflow-sm-visible
+  - overflow-lg-visible
+  - overflow-xl-visible
+:overflow_x:
+  :auto:
+  - overflow-x-auto
+  - overflow-sm-x-auto
+  - overflow-lg-x-auto
+  - overflow-xl-x-auto
+  :hidden:
+  - overflow-x-hidden
+  - overflow-sm-x-hidden
+  - overflow-lg-x-hidden
+  - overflow-xl-x-hidden
+  :scroll:
+  - overflow-x-scroll
+  - overflow-sm-x-scroll
+  - overflow-lg-x-scroll
+  - overflow-xl-x-scroll
+  :visible:
+  - overflow-x-visible
+  - overflow-sm-x-visible
+  - overflow-lg-x-visible
+  - overflow-xl-x-visible
+:overflow_y:
+  :auto:
+  - overflow-y-auto
+  - overflow-sm-y-auto
+  - overflow-lg-y-auto
+  - overflow-xl-y-auto
+  :hidden:
+  - overflow-y-hidden
+  - overflow-sm-y-hidden
+  - overflow-lg-y-hidden
+  - overflow-xl-y-hidden
+  :scroll:
+  - overflow-y-scroll
+  - overflow-sm-y-scroll
+  - overflow-lg-y-scroll
+  - overflow-xl-y-scroll
+  :visible:
+  - overflow-y-visible
+  - overflow-sm-y-visible
+  - overflow-lg-y-visible
+  - overflow-xl-y-visible

data/previews/primer/beta/link_preview.rb

@@ -9,8 +9,14 @@ module Primer
       # @param underline [Boolean]
       # @param muted [Boolean]
       # @param scheme [Symbol] select [default, primary, secondary]
-      def playground(scheme: :default, muted: false, underline: true)
-        render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      # @param leading_visual_icon [Symbol] octicon
+      # @param trailing_visual_icon [Symbol] octicon
+      def playground(scheme: :default, muted: false, underline: true, leading_visual_icon: nil, trailing_visual_icon: nil)
+        render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) do |link|
+          link.with_leading_visual_icon(icon: leading_visual_icon) if leading_visual_icon && leading_visual_icon != :none
+          link.with_trailing_visual_icon(icon: trailing_visual_icon) if trailing_visual_icon && trailing_visual_icon != :none
+          "This is a link!"
+        end
       end
 
       # @label Default Options
@@ -66,6 +72,22 @@ module Primer
         render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
       end
       # @!endgroup
+
+      # @label With leading icon
+      def with_leading_icon
+        render(Primer::Beta::Link.new(href: "#")) do |component|
+          component.with_leading_visual_icon(icon: :"mark-github")
+          "Link with leading icon"
+        end
+      end
+
+      # @label With trailing icon
+      def with_trailing_icon
+        render(Primer::Beta::Link.new(href: "#")) do |component|
+          component.with_trailing_visual_icon(icon: :"link-external")
+          "Link with trailing icon"
+        end
+      end
     end
   end
 end