primer_view_components 0.0.41 → 0.0.46

data/app/components/primer/navigation/tab_component.rb

@@ -18,7 +18,7 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :panel, lambda { |**system_arguments|
-        system_arguments[:tag] ||= :div
+        system_arguments[:tag] = :div
         system_arguments[:role] ||= :tabpanel
         system_arguments[:hidden] = true unless @selected
 
@@ -38,8 +38,8 @@ module Primer
 
       # The Tab's text.
       #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::TextComponent) %>.
-      renders_one :text, Primer::TextComponent
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
+      renders_one :text, Primer::Beta::Text
 
       # Counter to be rendered in the Tab right.
       #
@@ -96,12 +96,12 @@ module Primer
 
         @system_arguments = system_arguments
 
-        if with_panel
-          @system_arguments[:tag] ||= :button
+        if with_panel || @system_arguments[:tag] == :button
+          @system_arguments[:tag] = :button
           @system_arguments[:type] = :button
           @system_arguments[:role] = :tab
         else
-          @system_arguments[:tag] ||= :a
+          @system_arguments[:tag] = :a
         end
 
         @wrapper_arguments = wrapper_arguments

data/app/components/primer/octicon_component.rb

@@ -27,15 +27,16 @@ module Primer
     # @example Helper
     #   <%= primer_octicon(:check) %>
     #
-    # @param icon [Symbol] Name of <%= link_to_octicons %> to use.
-    # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
+    # @param icon_name [Symbol, String] Name of <%= link_to_octicons %> to use.
+    # @param icon [Symbol, String] Name of <%= link_to_octicons %> to use.
+    # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
     # @param use_symbol [Boolean] EXPERIMENTAL (May change or be removed) - Set to true when using with <%= link_to_component(Primer::OcticonSymbolsComponent) %>.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, use_symbol: false, **system_arguments)
       icon_key = icon_name || icon
 
       # Don't allow sizes under 16px
-      if system_arguments[:height].present? && system_arguments[:height] < 16 || system_arguments[:width].present? && system_arguments[:width] < 16
+      if system_arguments[:height].present? && system_arguments[:height].to_i < 16 || system_arguments[:width].present? && system_arguments[:width].to_i < 16
         system_arguments.delete(:height)
         system_arguments.delete(:width)
       end

data/app/components/primer/popover_component.rb

@@ -28,7 +28,7 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :heading, lambda { |**system_arguments|
       system_arguments[:mb] ||= 2
-      system_arguments[:tag] ||= :h4
+      system_arguments[:tag] ||= :h4 # rubocop:disable Primer/NoTagMemoize
 
       Primer::HeadingComponent.new(**system_arguments)
     }
@@ -106,7 +106,7 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] ||= :div # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],
         "Popover"

data/app/components/primer/primer.d.ts

@@ -4,3 +4,4 @@ import './tab_container_component';
 import './time_ago_component';
 import './local_time';
 import './image_crop';
+import './dropdown';

data/app/components/primer/primer.js

@@ -4,3 +4,4 @@ import './tab_container_component';
 import './time_ago_component';
 import './local_time';
 import './image_crop';
+import './dropdown';

data/app/components/primer/primer.ts

@@ -4,3 +4,4 @@ import './tab_container_component'
 import './time_ago_component'
 import './local_time'
 import './image_crop'
+import './dropdown'

data/app/components/primer/spinner_component.rb

@@ -27,6 +27,8 @@ module Primer
     #   <%= render(Primer::SpinnerComponent.new(size: :large)) %>
     #
     # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
+    # @param style [String] Custom element styles.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(size: DEFAULT_SIZE, style: DEFAULT_STYLE, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = :svg

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

@@ -1,12 +1,14 @@
-<%= wrapper do %>
+<%= wrapper(**@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <%= extra %>
+    <%= extra if @align == :left %>
 
     <%= render Primer::BaseComponent.new(**@body_arguments) do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
+
+    <%= extra if @align == :right %>
   <% end %>
 
   <% if @with_panel %>

data/app/components/primer/tab_nav_component.rb

@@ -5,7 +5,13 @@ module Primer
   class TabNavComponent < Primer::Component
     include Primer::TabbedComponentHelper
 
-    # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+    status :beta
+
+    DEFAULT_EXTRA_ALIGN = :left
+    EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
+
+    # Tabs to be rendered. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
+    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -23,7 +29,13 @@ module Primer
     }
 
     # Renders extra content to the `TabNav`. This will be rendered after the tabs.
-    renders_one :extra
+    #
+    # @param align [Symbol] <%= one_of(Primer::TabNavComponent::EXTRA_ALIGN_OPTIONS) %>
+    renders_one :extra, lambda { |align: DEFAULT_EXTRA_ALIGN, &block|
+      @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, DEFAULT_EXTRA_ALIGN)
+
+      view_context.capture { block&.call }
+    }
 
     # @example Default
     #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
@@ -72,7 +84,7 @@ module Primer
     #   <% end %>
     #
     # @example With extra content
-    #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
+    #   <%= render(Primer::TabNavComponent.new(label: "With extra content")) do |c| %>
     #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
     #     <% c.tab(href: "#") { "Tab 2" } %>
     #     <% c.tab(href: "#") { "Tab 3" } %>
@@ -81,16 +93,46 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Adding extra content after the tabs
+    #   <%= render(Primer::TabNavComponent.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #     <% c.extra(align: :right) do %>
+    #       <div>
+    #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
+    #       </div>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Customizing the body
+    #   <%= render(Primer::TabNavComponent.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
+    # @example Customizing the wrapper
+    #   <%= render(Primer::TabNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
     # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
+    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %>
+    #   is rendered along with JavaScript behavior. Additionally, the `tab` slot will render as a button as opposed to an anchor.
     # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+    # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, body_arguments: {}, **system_arguments)
+    def initialize(label:, with_panel: false, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+      @align = DEFAULT_EXTRA_ALIGN
       @with_panel = with_panel
       @system_arguments = system_arguments
       @body_arguments = body_arguments
+      @wrapper_arguments = wrapper_arguments
 
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         "tabnav",
         system_arguments[:classes]

data/app/components/primer/tooltip.rb

@@ -70,7 +70,7 @@ module Primer
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :span
+      @system_arguments[:tag] ||= :span # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:aria] = { label: label }
 
       @system_arguments[:classes] = class_names(

data/app/components/primer/truncate.rb

@@ -5,6 +5,9 @@ module Primer
   class Truncate < Primer::Component
     status :beta
 
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p].freeze
+
     # @example Default
     #   <div class="col-2">
     #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
@@ -19,13 +22,14 @@ module Primer
     # @example Custom size
     #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
     #
+    # @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
     # @param inline [Boolean] Whether the element is inline (or inline-block).
     # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
     # @param max_width [Integer] Sets the max-width of the text.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(inline: false, expandable: false, max_width: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, inline: false, expandable: false, max_width: nil, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "css-truncate",

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

@@ -1,4 +1,4 @@
-<%= wrapper do %>
+<%= wrapper(**@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>

data/app/components/primer/underline_nav_component.rb

@@ -13,7 +13,11 @@ module Primer
     BODY_TAG_DEFAULT = :div
     BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
 
-    # Use the tabs to list navigation items. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+    ACTIONS_TAG_DEFAULT = :div
+    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+    # Use the tabs to list navigation items. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
+    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -34,9 +38,10 @@ module Primer
 
     # Use actions for a call to action.
     #
+    # @param tag [String] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :actions, lambda { |**system_arguments|
-      system_arguments[:tag] ||= :div
+    renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+      system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
       system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
 
       Primer::BaseComponent.new(**system_arguments)
@@ -116,14 +121,31 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Customizing the body
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", body_arguments: { tag: :ul, classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
+    # @example Customizing the wrapper
+    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
     # @param label [String] The `aria-label` on top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
+    # @param with_panel [Boolean] Whether the `UnderlineNav` should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %> is
+    #   rendered along with JavaScript behavior.
     # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
     # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+    # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, **system_arguments)
+    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, wrapper_arguments: {}, **system_arguments)
       @with_panel = with_panel
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+      @wrapper_arguments = wrapper_arguments
 
       @system_arguments = system_arguments
       @system_arguments[:tag] = navigation_tag(with_panel)

data/app/lib/primer/tabbed_component_helper.rb

@@ -20,10 +20,10 @@ module Primer
       with_panel ? :div : :nav
     end
 
-    def wrapper
+    def wrapper(**system_arguments)
       return yield unless @with_panel
 
-      render Primer::TabContainerComponent.new do
+      render Primer::TabContainerComponent.new(**system_arguments) do
         yield
       end
     end

data/{app/lib → lib}/primer/classify.rb

@@ -1,30 +1,42 @@
 # frozen_string_literal: true
 
+require_relative "classify/cache"
+require_relative "classify/flex"
+require_relative "classify/functional_background_colors"
+require_relative "classify/functional_border_colors"
+require_relative "classify/functional_text_colors"
+require_relative "classify/grid"
+require_relative "classify/utilities"
+
 module Primer
   # :nodoc:
   class Classify
-    DISPLAY_KEY = :display
-    SPACING_KEYS = Primer::Classify::Spacing::KEYS
+    # 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(
+      File.read(
+        File.join(File.dirname(__FILE__), "./classify/utilities.yml")
+      )
+    ).freeze
+    # rubocop:enable Security/YAMLLoad
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
+    CONCAT_KEYS = %i[text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+      (["bg-", "color-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
 
     COLOR_KEY = :color
     BG_KEY = :bg
-    VERTICAL_ALIGN_KEY = :vertical_align
-    WORD_BREAK_KEY = :word_break
-    TEXT_KEYS = %i[text_align font_weight].freeze
+    TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
-    VISIBILITY_KEY = :visibility
-    ANIMATION_KEY = :animation
+    CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -78,26 +90,24 @@ module Primer
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
+      UTILITIES.keys +
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       Primer::Classify::Flex::KEYS +
+      Primer::Classify::Grid::KEYS +
       [
         BORDER_KEY,
         BORDER_COLOR_KEY,
         BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
-        DISPLAY_KEY,
-        VERTICAL_ALIGN_KEY,
-        WORD_BREAK_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
-        VISIBILITY_KEY,
-        ANIMATION_KEY
+        CONTAINER_KEY
       ]
     ).freeze
 
@@ -123,10 +133,10 @@ module Primer
       def validated_class_names(classes)
         return if classes.blank?
 
-        if ENV["RAILS_ENV"] == "development" && !ENV["PRIMER_WARNINGS_DISABLED"]
+        if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
           invalid_class_names =
             classes.split(" ").each_with_object([]) do |class_name, memo|
-              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
+              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) } || Primer::Classify::Utilities.supported_selector?(class_name)
             end
 
           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." if invalid_class_names.any?
@@ -152,7 +162,7 @@ module Primer
           next unless VALID_KEYS.include?(key)
 
           if value.is_a?(Array)
-            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
+            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
 
             value.each_with_index do |val, index|
               Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
@@ -170,8 +180,8 @@ module Primer
       def extract_value(memo, key, val, breakpoint)
         return if val.nil? || val == ""
 
-        if SPACING_KEYS.include?(key)
-          memo[:classes] << Primer::Classify::Spacing.spacing(key, val, breakpoint)
+        if Primer::Classify::Utilities.supported_key?(key)
+          memo[:classes] << Primer::Classify::Utilities.classname(key, val, breakpoint)
         elsif BOOLEAN_MAPPINGS.key?(key)
           BOOLEAN_MAPPINGS[key][:mappings].each do |m|
             memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
@@ -184,12 +194,6 @@ module Primer
           end
         elsif key == COLOR_KEY
           memo[:classes] << Primer::Classify::FunctionalTextColors.color(val)
-        elsif key == DISPLAY_KEY
-          memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
-        elsif key == VERTICAL_ALIGN_KEY
-          memo[:classes] << "v-align-#{val.to_s.dasherize}"
-        elsif key == WORD_BREAK_KEY
-          memo[:classes] << "wb-#{val.to_s.dasherize}"
         elsif key == BORDER_KEY
           border_value = if val == true
                            "border"
@@ -206,6 +210,8 @@ module Primer
           memo[:classes] << "rounded-#{val}"
         elsif Primer::Classify::Flex::KEYS.include?(key)
           memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
+        elsif Primer::Classify::Grid::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Grid.classes(key, val, breakpoint)
         elsif key == WIDTH_KEY || key == HEIGHT_KEY
           if val == :fit
             memo[:classes] << "#{key}-#{val}"
@@ -215,7 +221,11 @@ module Primer
         elsif TEXT_KEYS.include?(key)
           memo[:classes] << "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)
-          memo[:classes] << "f#{val.to_s.dasherize}"
+          memo[:classes] << if val == :small || val == :normal
+                              "text-#{val.to_s.dasherize}"
+                            else
+                              "f#{val.to_s.dasherize}"
+                            end
         elsif key == BOX_SHADOW_KEY
           memo[:classes] << if val == true
                               "color-shadow-small"
@@ -224,18 +234,14 @@ module Primer
                             else
                               "color-shadow-#{val.to_s.dasherize}"
                             end
-        elsif key == VISIBILITY_KEY
-          memo[:classes] << "v-#{val.to_s.dasherize}"
-        elsif key == ANIMATION_KEY
-          memo[:classes] << if val == :grow
-                              "hover-grow"
-                            else
-                              "anim-#{val.to_s.dasherize}"
-                            end
         else
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end
       end
+
+      def force_system_arguments?
+        Rails.application.config.primer_view_components.force_system_arguments
+      end
     end
 
     Cache.preload!