primer_view_components 0.0.61 → 0.0.62

data/app/components/primer/flex_component.rb

@@ -61,31 +61,31 @@ module Primer
     ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
 
     # @example Default
-    #   <%= render(Primer::FlexComponent.new(bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Justify center
-    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(justify_content: :center, bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Align end
-    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(align_items: :end, bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @example Direction column
-    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :tertiary)) do %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 1" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 2" } %>
-    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :secondary, classes: "border")) { "Item 3" } %>
+    #   <%= render(Primer::FlexComponent.new(direction: :column, bg: :subtle)) do %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 1" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 2" } %>
+    #     <%= render(Primer::BoxComponent.new(p: 5, bg: :subtle, classes: "border")) { "Item 3" } %>
     #   <% end %>
     #
     # @param justify_content [Symbol] Use this param to distribute space between and around flex items along the main axis of the container. <%= one_of(Primer::FlexComponent::JUSTIFY_CONTENT_OPTIONS) %>

data/app/components/primer/flex_item_component.rb

@@ -2,7 +2,7 @@
 
 module Primer
   # Use `FlexItem` to specify the ability of a flex item to alter its
-  # dimensions to fill available space
+  # dimensions to fill available space.
   #
   # @deprecated
   #   Use <%= link_to_component(Primer::BoxComponent) %> instead.

data/app/components/primer/hellip_button.rb

@@ -20,7 +20,7 @@ module Primer
     # @param inline [Boolean] Whether or not the button is inline.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(inline: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       validate_aria_label
 

data/app/components/primer/hidden_text_expander.rb

@@ -22,7 +22,7 @@ module Primer
     # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(inline: false, button_arguments: {}, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @button_arguments = button_arguments
 
       @system_arguments[:tag] = :span

data/app/components/primer/image.rb

@@ -27,7 +27,7 @@ module Primer
     # @param lazy [Boolean] Whether or not to lazily load the image.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(src:, alt:, lazy: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @system_arguments[:tag] = :img
       @system_arguments[:src] = src

data/app/components/primer/image_crop.rb

@@ -6,6 +6,7 @@ module Primer
     # A loading indicator that is shown while the image is loading.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :loading, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:"data-loading-slot"] = true
 
@@ -27,7 +28,7 @@ module Primer
     # @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(src:, rounded: true, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = "image-crop"
       @system_arguments[:src] = src
       @system_arguments[:rounded] = true if rounded

data/app/components/primer/layout_component.rb

@@ -7,6 +7,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :main, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
       system_arguments[:col] = (@responsive ? [12, nil, @main_col] : @main_col)
       system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)

data/app/components/primer/local_time.rb

@@ -33,7 +33,7 @@ module Primer
     # @param time_zone_name [Symbol] <%= one_of(Primer::LocalTime::TEXT_TYPE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(datetime:, initial_text: nil, weekday: DEFAULT_TEXT_TYPE, year: DEFAULT_DIGIT_TYPE, month: DEFAULT_TEXT_TYPE, day: DEFAULT_DIGIT_TYPE, hour: DEFAULT_DIGIT_TYPE, minute: DEFAULT_DIGIT_TYPE, second: DEFAULT_DIGIT_TYPE, time_zone_name: DEFAULT_TEXT_TYPE, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @datetime = datetime
 

data/app/components/primer/markdown.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Markdown` to wrap markdown content
+  # Use `Markdown` to wrap markdown content.
   class Markdown < Primer::Component
     status :beta
 

data/app/components/primer/menu_component.rb

@@ -26,6 +26,7 @@ module Primer
     # @param selected [Boolean] Whether the item is the current selection
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_many :items, lambda { |href:, selected: false, **system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :a
       system_arguments[:href] = href
       system_arguments[:"aria-current"] = :page if selected
@@ -58,7 +59,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :nav
       @system_arguments[:classes] = class_names(
         "menu",

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

@@ -20,6 +20,7 @@ module Primer
       renders_one :panel, lambda { |**system_arguments|
         return unless @with_panel
 
+        deny_tag_argument(**system_arguments)
         system_arguments[:id] = @panel_id
         system_arguments[:tag] = :div
         system_arguments[:role] ||= :tabpanel

data/app/components/primer/octicon_symbols_component.rb

@@ -6,8 +6,8 @@ module Primer
   # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
   class OcticonSymbolsComponent < Primer::Component
     # @example Symbol dictionary
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :icon_success)) %>
-    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :text_danger)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :success)) %>
+    #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, color: :danger)) %>
     #   <%= render(Primer::OcticonComponent.new(icon: :check, use_symbol: true, size: :medium)) %>
     #   <%= render(Primer::OcticonSymbolsComponent.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
     #

data/app/components/primer/popover_component.rb

@@ -108,7 +108,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],

data/app/components/primer/progress_bar_component.rb

@@ -10,7 +10,8 @@ module Primer
     # @param percentage [Integer] The percent complete
     # @param bg [Symbol] The background color
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_many :items, lambda { |percentage: 0, bg: :success_inverse, **system_arguments|
+    renders_many :items, lambda { |percentage: 0, bg: :success_emphasis, **system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :span
       system_arguments[:bg] = bg
       system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")
@@ -35,25 +36,25 @@ module Primer
     #
     # @example Small
     #   <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
-    #     <% component.item(bg: :info_inverse, percentage: 50) %>
+    #     <% component.item(bg: :accent_emphasis, percentage: 50) %>
     #   <% end %>
     #
     # @example Large
     #   <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
-    #     <% component.item(bg: :danger_inverse, percentage: 75) %>
+    #     <% component.item(bg: :danger_emphasis, percentage: 75) %>
     #   <% end %>
     #
     # @example Multiple items
     #   <%= render(Primer::ProgressBarComponent.new) do |component| %>
     #     <% component.item(percentage: 10) %>
-    #     <% component.item(bg: :info_inverse, percentage: 20) %>
-    #     <% component.item(bg: :danger_inverse, percentage: 30) %>
+    #     <% component.item(bg: :accent_emphasis, percentage: 20) %>
+    #     <% component.item(bg: :danger_emphasis, percentage: 30) %>
     #   <% end %>
     #
     # @param size [Symbol] <%= one_of(Primer::ProgressBarComponent::SIZE_OPTIONS) %> Increases height.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(size: SIZE_DEFAULT, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Progress",

data/app/components/primer/spinner_component.rb

@@ -30,7 +30,7 @@ module Primer
     # @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 = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :svg
       @system_arguments[:style] ||= style
       @system_arguments[:animation] = :rotate

data/app/components/primer/subhead_component.rb

@@ -36,6 +36,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :actions, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
 
@@ -46,6 +47,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :description, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
 
@@ -111,7 +113,7 @@ module Primer
     # @param hide_border [Boolean] Whether to hide the border under the heading.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(spacious: false, hide_border: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
 
       @system_arguments[:tag] = :div
       @system_arguments[:classes] =

data/app/components/primer/tab_container_component.rb

@@ -26,7 +26,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = "tab-container"
     end
 

data/app/components/primer/time_ago_component.rb

@@ -12,7 +12,7 @@ module Primer
     # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(time:, micro: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:datetime] = time.utc.iso8601
       @system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
       @system_arguments[:tag] = "time-ago"

data/app/components/primer/timeline_item_component.rb

@@ -27,6 +27,7 @@ module Primer
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :body, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
       system_arguments[:tag] = :div
       system_arguments[:classes] = class_names(
         "TimelineItem-body",
@@ -40,7 +41,7 @@ module Primer
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
     #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.badge(bg: :success_inverse, color: :text_white, icon: :check) %>
+    #       <% component.badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
     #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
@@ -48,7 +49,7 @@ module Primer
     # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(condensed: false, **system_arguments)
-      @system_arguments = system_arguments
+      @system_arguments = deny_tag_argument(**system_arguments)
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         "TimelineItem",
@@ -67,7 +68,7 @@ module Primer
       def initialize(icon: nil, **system_arguments)
         @icon = icon
 
-        @system_arguments = system_arguments
+        @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = class_names(
           "TimelineItem-badge",

data/app/components/primer/tooltip.rb

@@ -72,6 +72,7 @@ module Primer
       @system_arguments = system_arguments
       @system_arguments[:tag] ||= :span # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:aria] = { label: label }
+      @system_arguments[:skip_aria_label_check] = true
 
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],

data/lib/primer/classify/utilities.rb

@@ -16,6 +16,7 @@ module Primer
         )
       ).freeze
       # rubocop:enable Security/YAMLLoad
+
       BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
       # Replacements for some classnames that end up being a different argument key
@@ -145,6 +146,30 @@ module Primer
           end.join(", ")
         end
 
+        def validate(key, val, breakpoint)
+          unless supported_key?(key)
+            raise ArgumentError, "#{key} is not a valid Primer utility key" if validate_class_names?
+
+            return ""
+          end
+
+          unless breakpoint.empty? || responsive?(key, val)
+            raise ArgumentError, "#{key} does not support responsive values" if validate_class_names?
+
+            return ""
+          end
+
+          unless supported_value?(key, val)
+            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" if validate_class_names?
+
+            return nil if [true, false].include?(val)
+
+            return "#{key.to_s.dasherize}-#{val.to_s.dasherize}"
+          end
+
+          nil
+        end
+
         private
 
         def find_selector(selector)
@@ -160,7 +185,7 @@ module Primer
             next unless classnames.include?(selector)
 
             # Return [:mr, 0, 1]
-            # has index of classname, so we can match it up with responsvie array `mr: [nil, 0]`
+            # has index of classname, so we can match it up with responsive array `mr: [nil, 0]`
             return [key, key_argument, classnames.index(selector)]
           end
 
@@ -174,28 +199,6 @@ module Primer
 
           selector.split("-").first.to_sym
         end
-
-        def validate(key, val, breakpoint)
-          unless supported_key?(key)
-            raise ArgumentError, "#{key} is not a valid Primer utility key" if validate_class_names?
-
-            return ""
-          end
-
-          unless breakpoint.empty? || responsive?(key, val)
-            raise ArgumentError, "#{key} does not support responsive values" if validate_class_names?
-
-            return ""
-          end
-
-          unless supported_value?(key, val)
-            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" if validate_class_names?
-
-            return "#{key.to_s.dasherize}-#{val.to_s.dasherize}"
-          end
-
-          nil
-        end
       end
     end
   end