primer_view_components 0.0.83 → 0.0.86

data/app/components/primer/blankslate_component.rb

@@ -1,156 +1,8 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
-  # @accessibility
-  #   `Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
-  #   <%= link_to_heading_practices %>
-  class BlankslateComponent < Primer::Component
+  # BlankslateComponent is deprecated. Please use `Primer::Beta::Blankslate` instead.
+  class BlankslateComponent < Primer::Beta::Blankslate
     status :deprecated
-
-    # Optional Spinner.
-    #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.
-    renders_one :spinner, lambda { |**system_arguments|
-      system_arguments[:mb] ||= 3
-      Primer::SpinnerComponent.new(**system_arguments)
-    }
-
-    #
-    # @example Basic
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
-    #
-    # @example Icon
-    #   @description
-    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :globe,
-    #       title: "Title",
-    #       description: "Description",
-    #     ) %>
-    #
-    # @example Loading
-    #   @description
-    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       title: "Title",
-    #       description: "Description",
-    #     ) do |component| %>
-    #       <% component.spinner(size: :large) %>
-    #     <% end %>
-    #
-    # @example Custom content
-    #   @description
-    #     Pass custom content as a block in place of `description`.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       title: "Title",
-    #     ) do %>
-    #       <em>Your custom content here</em>
-    #     <% end %>
-    #
-    # @example Action button
-    #   @description
-    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #
-    #       button_text: "Create the first page",
-    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #     ) %>
-    #
-    # @example Link
-    #   @description
-    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #       link_text: "Learn more about wikis",
-    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #     ) %>
-    #
-    # @example Variations
-    #   @description
-    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #       narrow: true,
-    #       large: true,
-    #       spacious: true,
-    #     ) %>
-    #
-    # @param title [String] Text that appears in a larger bold font.
-    # @param title_tag [Symbol] HTML tag to use for title.
-    # @param icon [Symbol] Octicon icon to use at top of component.
-    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
-    # @param image_src [String] Image to display.
-    # @param image_alt [String] Alt text for image.
-    # @param description [String] Text that appears below the title. Typically a whole sentence.
-    # @param button_text [String] The text of the button.
-    # @param button_url [String] The URL where the user will be taken after clicking the button.
-    # @param button_classes [String] Classes to apply to action button
-    # @param link_text [String] The text of the link.
-    # @param link_url [String] The URL where the user will be taken after clicking the link.
-    # @param narrow [Boolean] Adds a maximum width.
-    # @param large [Boolean] Increases the font size.
-    # @param spacious [Boolean] Adds extra padding.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(
-      title: "",
-      title_tag: :h3,
-      icon: "",
-      icon_size: :medium,
-      image_src: "",
-      image_alt: " ",
-      description: "",
-      button_text: "",
-      button_url: "",
-      button_classes: "btn-primary my-3",
-      link_text: "",
-      link_url: "",
-
-      # variations
-      narrow: false,
-      large: false,
-      spacious: false,
-
-      **system_arguments
-    )
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "blankslate",
-        "blankslate-narrow": narrow,
-        "blankslate-large": large,
-        "blankslate-spacious": spacious
-      )
-
-      @title_tag = title_tag
-      @icon = icon
-      @icon_size = icon_size
-      @image_src = image_src
-      @image_alt = image_alt
-      @title = title
-      @description = description
-      @button_text = button_text
-      @button_url = button_url
-      @button_classes = button_classes
-      @link_text = link_text
-      @link_url = link_url
-    end
   end
 end

data/app/components/primer/border_box_component.rb

@@ -1,145 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `BorderBox` is a Box component with a border.
-  class BorderBoxComponent < Primer::Component
-    status :beta
-
-    DEFAULT_PADDING = :default
-    PADDING_MAPPINGS = {
-      DEFAULT_PADDING => "",
-      :condensed => "Box--condensed",
-      :spacious => "Box--spacious"
-    }.freeze
-    PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
-
-    DEFAULT_ROW_SCHEME = :default
-    ROW_SCHEME_MAPPINGS = {
-      DEFAULT_ROW_SCHEME => "",
-      :neutral => "Box-row--gray",
-      :info => "Box-row--blue",
-      :warning => "Box-row--yellow"
-    }.freeze
-
-    # Optional Header.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    # @accessibility
-    # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
-    renders_one :header, "Primer::Alpha::BorderBox::Header"
-
-    # Optional Body.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-body",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Optional Footer.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :footer, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-footer",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Use Rows to add rows with borders and maintain the same padding.
-    #
-    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::BorderBoxComponent::ROW_SCHEME_MAPPINGS.keys) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
-      system_arguments[:tag] = :li
-      system_arguments[:classes] = class_names(
-        "Box-row",
-        ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Header with title, body, rows, and footer
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.header do |h| %>
-    #       <% h.title(tag: :h2) do %>
-    #         Header
-    #       <% end %>
-    #     <% end %>
-    #     <% component.body do %>
-    #       Body
-    #     <% end %>
-    #     <% component.row do %>
-    #       <% if true %>
-    #         Row one
-    #       <% end %>
-    #     <% end %>
-    #     <% component.row do %>
-    #       Row two
-    #     <% end %>
-    #     <% component.footer do %>
-    #       Footer
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Padding density
-    #   <%= render(Primer::BorderBoxComponent.new(padding: :condensed)) do |component| %>
-    #     <% component.header do %>
-    #       Header
-    #     <% end %>
-    #     <% component.body do %>
-    #       Body
-    #     <% end %>
-    #     <% component.row do %>
-    #       Row two
-    #     <% end %>
-    #     <% component.footer do %>
-    #       Footer
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Row colors
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.row do %>
-    #       Default
-    #     <% end %>
-    #     <% component.row(scheme: :neutral) do %>
-    #       Neutral
-    #     <% end %>
-    #     <% component.row(scheme: :info) do %>
-    #       Info
-    #     <% end %>
-    #     <% component.row(scheme: :warning) do %>
-    #       Warning
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param padding [Symbol] <%= one_of(Primer::BorderBoxComponent::PADDING_MAPPINGS.keys) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(padding: DEFAULT_PADDING, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        "Box",
-        PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
-        system_arguments[:classes]
-      )
-
-      @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
-    end
-
-    def render?
-      rows.any? || header.present? || body.present? || footer.present?
-    end
+  class BorderBoxComponent < Primer::Beta::BorderBox
+    status :deprecated
   end
 end

data/app/components/primer/button_component.html.erb

@@ -1,4 +1,12 @@
-<%= render Primer::BaseButton.new(**@system_arguments) do -%>
-  <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
-  <%= tooltip %>
-<% end -%>
+<% if tooltip.present? %>
+  <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+    <% end -%>
+    <%= tooltip %>
+  <% end -%>
+<% else %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+  <% end -%>
+<% end %>

data/app/components/primer/button_component.rb

@@ -123,8 +123,8 @@ module Primer
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-    # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     # @param block [Boolean] Whether button is full-width with `display: block`.
     # @param dropdown [Boolean] Whether or not to render a dropdown caret.

data/app/components/primer/clipboard_copy.rb

@@ -12,7 +12,7 @@ module Primer
     #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
     #
     # @example With text instead of icons
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy")) do %>
     #     Click to copy!
     #   <% end %>
     #
@@ -34,10 +34,14 @@ module Primer
       @system_arguments[:value] = value if value.present?
     end
 
+    # :nodoc:
+    def before_render
+      validate_aria_label if content.blank?
+    end
+
     private
 
     def validate!
-      validate_aria_label
       raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
     end
   end

data/app/components/primer/close_button.rb

@@ -31,7 +31,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseButton.new(**@system_arguments)) do
+      render(Primer::Beta::BaseButton.new(**@system_arguments)) do
         render(Primer::OcticonComponent.new("x"))
       end
     end

data/app/components/primer/conditional_wrapper.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
+  # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
+  # the content is rendered.
+  #
+  # @example True conditional
+  #   <%# condition is true, so content will be wrapped in a <span> tag
+  #   <%= render Primer::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
+  #     <%# also rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @example False conditional
+  #   <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
+  #   <%= render(Primer::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
+  #     <%# this content will be rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
+  # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
+  class ConditionalWrapper < Primer::Component
+    def initialize(condition:, **base_component_arguments)
+      @condition = condition
+      @base_component_arguments = base_component_arguments
+    end
+
+    def call
+      return content unless @condition
+
+      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+    end
+  end
+end

data/app/components/primer/hellip_button.rb

@@ -33,7 +33,7 @@ module Primer
     end
 
     def call
-      render(Primer::BaseButton.new(**@system_arguments)) { "…".html_safe }
+      render(Primer::Beta::BaseButton.new(**@system_arguments)) { "…".html_safe }
     end
   end
 end

data/app/components/primer/icon_button.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= render Primer::OcticonComponent.new(icon: @icon) %>
+  <% end -%>
+  <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+<% end %>

data/app/components/primer/icon_button.rb

@@ -8,6 +8,7 @@ module Primer
   #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
   #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
   #   `"Search"` instead of `"Magnifying glass"`.
+  #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
   #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
   class IconButton < Primer::Component
     status :beta
@@ -18,9 +19,10 @@ module Primer
       :danger => "btn-octicon-danger"
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
     # @example Default
     #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
     #
     # @example Schemes
     #
@@ -29,23 +31,41 @@ module Primer
     #
     # @example In a BorderBox
     #
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
+    #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
     #     <% component.body do %>
     #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
     #       <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
     #     <% end %>
     #   <% end %>
     #
+    # @example With an `aria-description`
+    #   @description
+    #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
+    #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
+    #     more context and information. See the accessibility section for more information.
+    #   @code
+    #     <%= render(Primer::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+    #
+    # @example Custom tooltip direction
+    #
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+    #
     # @param scheme [Symbol] <%= one_of(Primer::IconButton::SCHEME_OPTIONS) %>
     # @param icon [String] Name of <%= link_to_octicons %> to use.
-    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
-    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::BorderBoxComponent) %>. If `true`, the button will have the `Box-btn-octicon` class.
+    # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+    # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
+    # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+    # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::Beta::BorderBox) %>. If `true`, the button will have the `Box-btn-octicon` class.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments)
       @icon = icon
 
       @system_arguments = system_arguments
+
+      @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+
       @system_arguments[:classes] = class_names(
         "btn-octicon",
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
@@ -54,11 +74,27 @@ module Primer
       )
 
       validate_aria_label
-    end
 
-    def call
-      render(Primer::BaseButton.new(**@system_arguments)) do
-        render(Primer::OcticonComponent.new(icon: @icon))
+      @aria_label = aria("label", @system_arguments)
+      @aria_description = aria("description", @system_arguments)
+
+      @tooltip_arguments = {
+        for_id: @system_arguments[:id],
+        direction: tooltip_direction
+      }
+
+      # If we have both an `aria-label` and a `aria-description`, we create a `Tooltip` with the description type and keep the `aria-label` in the button.
+      # Otherwise, the `aria-label` is used as the tooltip text, which is the `aria-labelled-by` of the button, so we don't set it in the button.
+      if @aria_label.present? && @aria_description.present?
+        @system_arguments.delete(:"aria-description")
+        @system_arguments[:aria].delete(:description) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_description
+        @tooltip_arguments[:type] = :description
+      else
+        @system_arguments.delete(:"aria-label")
+        @system_arguments[:aria].delete(:label) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_label
+        @tooltip_arguments[:type] = :label
       end
     end
   end

data/app/components/primer/link_component.html.erb

@@ -0,0 +1,12 @@
+<% if tooltip.present? %>
+  <%= render Primer::BaseComponent.new(tag: :span, position: :relative) do %>
+    <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+      <% content %>
+    <% end %>
+    <%= tooltip %>
+  <% end %>
+<% else %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <% content %>
+  <% end %>
+<% end %>

data/app/components/primer/link_component.rb

@@ -17,6 +17,8 @@ module Primer
 
     # `Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.
     # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+    # The tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested
+    # under a positioning wrapper.
     # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
     #
     # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
@@ -43,9 +45,6 @@ module Primer
     # @example Without underline
     #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
     #
-    # @example Span as link
-    #   <%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>
-    #
     # @example With tooltip
     #   @description
     #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
@@ -80,11 +79,5 @@ module Primer
     def before_render
       raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
     end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) do
-        content.to_s + tooltip.to_s
-      end
-    end
   end
 end

data/app/lib/primer/join_style_arguments_helper.rb

@@ -8,7 +8,7 @@ module Primer
     # join_style_arguments("width: 100%", "height: 100%") =>
     #   "width: 100%;height: 100%"
     def join_style_arguments(*args)
-      args.compact.join(";")
+      args.compact.map { |a| a.strip.chomp(";") }.join(";")
     end
   end
 end

data/lib/primer/classify/utilities.rb

@@ -7,15 +7,12 @@ module Primer
   class Classify
     # Handler for PrimerCSS utility classes loaded from utilities.rake
     class Utilities
-      # Load the utilities.yml file.
-      # Disabling because we want to load symbols, strings, and integers from the .yml file
-      # rubocop:disable Security/YAMLLoad
-      UTILITIES = YAML.load(
+      UTILITIES = YAML.safe_load(
         File.read(
           File.join(File.dirname(__FILE__), "./utilities.yml")
-        )
+        ),
+        permitted_classes: [Symbol]
       ).freeze
-      # rubocop:enable Security/YAMLLoad
 
       BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 

data/lib/primer/form_components.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  class FormComponents
+    def self.from_input(input_klass)
+      Class.new(Primer::Component) do
+        @input_klass = input_klass
+
+        class << self
+          attr_reader :input_klass
+        end
+
+        def initialize(**system_arguments, &block)
+          @system_arguments = system_arguments
+          @block = block
+        end
+
+        def call
+          builder = ActionView::Helpers::FormBuilder.new(
+            nil, nil, __vc_original_view_context, {}
+          )
+
+          input = self.class.input_klass.new(
+            builder: builder,
+            form: nil,
+            **@system_arguments,
+            &@block
+          )
+
+          input.render_in(__vc_original_view_context) { content }
+        end
+      end
+    end
+  end
+end