primer_view_components 0.0.48 → 0.0.52

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

@@ -2,7 +2,7 @@
   <% if content.present? %>
     <%= content %>
   <% else %>
-    <%= render Primer::OcticonComponent.new("clippy") %>
-    <%= render Primer::OcticonComponent.new("check", color: :icon_success, style: "display: none;") %>
+    <%= render Primer::OcticonComponent.new(:paste) %>
+    <%= render Primer::OcticonComponent.new(:check, color: :icon_success, style: "display: none;") %>
   <% end %>
 <% end %>

data/app/components/primer/clipboard_copy.rb

@@ -6,7 +6,7 @@ module Primer
   # @accessibility
   #   Always set an accessible label to help the user interact with the component.
   class ClipboardCopy < Primer::Component
-    status :alpha
+    status :beta
 
     # @example Default
     #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>

data/app/components/primer/dropdown.rb

@@ -28,7 +28,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -45,7 +45,7 @@ module Primer
     #         Dropdown
     #       <% end %>
     #
-    #       <%= c.menu(header: "Options") do |menu|
+    #       <% c.menu(header: "Options") do |menu|
     #         menu.item { "Item 1" }
     #         menu.item { "Item 2" }
     #         menu.item(divider: true)
@@ -63,7 +63,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options", direction: :s) do |menu|
+    #     <% c.menu(header: "Options", direction: :s) do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -77,7 +77,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -91,7 +91,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -105,7 +105,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(as: :list, header: "Options") do |menu|
+    #     <% c.menu(as: :list, header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item(divider: true)
@@ -120,7 +120,7 @@ module Primer
     #       Dropdown
     #     <% end %>
     #
-    #     <%= c.menu(header: "Options") do |menu|
+    #     <% c.menu(header: "Options") do |menu|
     #       menu.item(tag: :button) { "Item 1" }
     #       menu.item(classes: "custom-class") { "Item 2" }
     #       menu.item { "Item 3" }

data/app/components/primer/icon_button.rb

@@ -42,7 +42,7 @@ module Primer
     # @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 system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(scheme: DEFAULT_SCHEME, icon:, box: false, **system_arguments)
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
       @icon = icon
 
       @system_arguments = system_arguments

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

@@ -5,8 +5,8 @@
     <%= render(Primer::SpinnerComponent.new(size: :large, flex: 1, "data-loading-slot": true)) %>
   <% end %>
 
-  <input type="hidden" data-image-crop-input="x" name="cropped_x">
-  <input type="hidden" data-image-crop-input="y" name="cropped_y">
-  <input type="hidden" data-image-crop-input="width" name="cropped_width">
-  <input type="hidden" data-image-crop-input="height" name="cropped_height">
+  <input autocomplete="off" type="hidden" data-image-crop-input="x" name="cropped_x">
+  <input autocomplete="off" type="hidden" data-image-crop-input="y" name="cropped_y">
+  <input autocomplete="off" type="hidden" data-image-crop-input="width" name="cropped_width">
+  <input autocomplete="off" type="hidden" data-image-crop-input="height" name="cropped_height">
 <% end %>

data/app/components/primer/label_component.rb

@@ -2,6 +2,9 @@
 
 module Primer
   # Use `Label` to add contextual metadata to a design.
+  #
+  # @accessibility
+  #   Use `aria-label` if the `Label` or the context around it don't explain the label.
   class LabelComponent < Primer::Component
     status :beta
 
@@ -29,27 +32,25 @@ module Primer
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
 
     # @example Schemes
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :primary)) { "Primary" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :secondary)) { "Secondary" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :info)) { "Info" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :success)) { "Success" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :warning)) { "Warning" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::LabelComponent.new) { "Default" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :secondary)) { "Secondary" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :info)) { "Info" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :success)) { "Success" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :warning)) { "Warning" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :danger)) { "Danger" } %>
     #
     # @example Variants
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
+    #   <%= render(Primer::LabelComponent.new) { "Default" } %>
+    #   <%= render(Primer::LabelComponent.new( variant: :large)) { "Large" } %>
     #
     # @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
-    # @param title [String] `title` attribute for the component element.
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, title:, scheme: nil, variant: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, scheme: nil, variant: nil, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-      @system_arguments[:title] = title
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],

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

@@ -20,6 +20,7 @@ module Primer
       renders_one :panel, lambda { |**system_arguments|
         return unless @with_panel
 
+        system_arguments[:id] = @panel_id
         system_arguments[:tag] = :div
         system_arguments[:role] ||= :tabpanel
         system_arguments[:tabindex] = 0
@@ -98,10 +99,11 @@ module Primer
       # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
       # @param selected [Boolean] Whether the Tab is selected or not.
       # @param with_panel [Boolean] Whether the Tab has an associated panel.
+      # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
       # @param icon_classes [Boolean] Classes that must always be applied to icons.
       # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(list: false, selected: false, with_panel: false, icon_classes: "", wrapper_arguments: {}, **system_arguments)
+      def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
         @selected = selected
         @icon_classes = icon_classes
         @list = list
@@ -114,6 +116,7 @@ module Primer
           @system_arguments[:tag] = :button
           @system_arguments[:type] = :button
           @system_arguments[:role] = :tab
+          panel_id(panel_id)
         else
           @system_arguments[:tag] = :a
         end
@@ -139,7 +142,18 @@ module Primer
         end
 
         render(Primer::BaseComponent.new(**@wrapper_arguments)) do
-          yield
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def panel_id(panel_id)
+        if panel_id.blank?
+          raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
+        else
+          @panel_id = panel_id
+          @system_arguments[:"aria-controls"] = @panel_id
         end
       end
     end

data/app/components/primer/progress_bar_component.rb

@@ -11,9 +11,6 @@ module Primer
     # @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|
-      percentage = percentage
-      system_arguments = system_arguments
-
       system_arguments[:tag] = :span
       system_arguments[:bg] = bg
       system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")

data/app/components/primer/tab_nav_component.rb

@@ -13,6 +13,7 @@ module Primer
     # 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 panel_id [String] Only applies if `with_panel` is `true`. Unique ID of panel.
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_many :tabs, lambda { |selected: false, **system_arguments|
@@ -63,19 +64,19 @@ module Primer
     #
     # @example With panels
     #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true, id: "tab-1") do |t| %>
+    #     <% c.tab(selected: true, panel_id: "panel-1", id: "tab-1") do |t| %>
     #       <% t.text { "Tab 1" } %>
     #       <% t.panel do %>
     #         Panel 1
     #       <% end %>
     #     <% end %>
-    #     <% c.tab(id: "tab-2") do |t| %>
+    #     <% c.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
     #       <% t.text { "Tab 2" } %>
     #       <% t.panel do %>
     #         Panel 2
     #       <% end %>
     #     <% end %>
-    #     <% c.tab(id: "tab-3") do |t| %>
+    #     <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
     #       <% t.text { "Tab 3" } %>
     #       <% t.panel do %>
     #         Panel 3

data/app/components/primer/truncate.rb

@@ -6,7 +6,7 @@ module Primer
     status :beta
 
     DEFAULT_TAG = :div
-    TAG_OPTIONS = [DEFAULT_TAG, :span, :p].freeze
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
 
     # @example Default
     #   <div class="col-2">

data/app/components/primer/underline_nav_component.rb

@@ -19,6 +19,7 @@ module Primer
     # 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 panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_many :tabs, lambda { |selected: false, **system_arguments|
@@ -104,13 +105,13 @@ module Primer
     #
     # @example With panels
     #   <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
-    #     <% component.tab(selected: true, id: "tab-1") do |t| %>
+    #     <% component.tab(selected: true, id: "tab-1", panel_id: "panel-1") do |t| %>
     #       <% t.text { "Item 1" } %>
     #       <% t.panel do %>
     #         Panel 1
     #       <% end %>
     #     <% end %>
-    #     <% component.tab(id: "tab-2") do |t| %>
+    #     <% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
     #       <% t.text { "Item 2" } %>
     #       <% t.panel do %>
     #         Panel 2

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -48,6 +48,7 @@ module Primer
       end
     end
 
+    # rubocop:disable Style/OptionalBooleanParameter
     def fetch_or_fallback_boolean(given_value, fallback = false)
       if [true, false].include?(given_value)
         given_value
@@ -55,6 +56,7 @@ module Primer
         fallback
       end
     end
+    # rubocop:enable Style/OptionalBooleanParameter
 
     def silence_deprecations?
       Rails.application.config.primer_view_components.silence_deprecations

data/app/lib/primer/octicon/cache.rb

@@ -6,7 +6,7 @@ module Primer
     class Cache
       LOOKUP = {} # rubocop:disable Style/MutableConstant
       # Preload the top 20 used icons.
-      PRELOADED_ICONS = [:alert, :check, :"chevron-down", :clippy, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
+      PRELOADED_ICONS = [:alert, :check, :"chevron-down", :paste, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
 
       class << self
         def get_key(symbol:, size:, width: nil, height: nil)

data/app/lib/primer/tabbed_component_helper.rb

@@ -24,7 +24,7 @@ module Primer
       return yield unless @with_panel
 
       render Primer::TabContainerComponent.new(**system_arguments) do
-        yield
+        yield if block_given?
       end
     end
 

data/app/lib/primer/view_helper.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# :nocov:
 module Primer
   # Module to allow shorthand calls for Primer components
   module ViewHelper

data/lib/primer/classify.rb

@@ -7,6 +7,7 @@ require_relative "classify/functional_border_colors"
 require_relative "classify/functional_text_colors"
 require_relative "classify/grid"
 require_relative "classify/utilities"
+require_relative "classify/validation"
 
 module Primer
   # :nodoc:
@@ -14,14 +15,9 @@ module Primer
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = %i[text box_shadow].freeze
 
-    INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
-
     COLOR_KEY = :color
     BG_KEY = :bg
     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
     CONTAINER_KEY = :container
 
@@ -94,8 +90,6 @@ module Primer
         BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
-        WIDTH_KEY,
-        HEIGHT_KEY,
         BOX_SHADOW_KEY,
         CONTAINER_KEY
       ]
@@ -113,7 +107,7 @@ module Primer
         extracted_results[:style] = [
           extracted_results.delete(:styles),
           style
-        ].compact.join("").presence
+        ].compact.join.presence
 
         extracted_results
       end
@@ -125,8 +119,8 @@ module Primer
 
         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) } || Primer::Classify::Utilities.supported_selector?(class_name)
+            classes.split.each_with_object([]) do |class_name, memo|
+              memo << class_name if Primer::Classify::Validation.invalid?(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?
@@ -202,12 +196,6 @@ module Primer
           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}"
-          else
-            memo[key] = val
-          end
         elsif TEXT_KEYS.include?(key)
           memo[:classes] << "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)

data/lib/primer/classify/cache.rb

@@ -95,11 +95,6 @@ module Primer
             values: Primer::Classify::Flex::ALIGN_SELF_VALUES
           )
 
-          preload(
-            keys: [Primer::Classify::WIDTH_KEY, Primer::Classify::HEIGHT_KEY],
-            values: [:fit]
-          )
-
           preload(
             keys: Primer::Classify::BOX_SHADOW_KEY,
             values: [true, :small, :medium, :large, :extra_large, :none]

data/lib/primer/classify/flex.rb

@@ -89,7 +89,7 @@ module Primer
         def justify_content(value, breakpoint)
           val = fetch_or_fallback(JUSTIFY_CONTENT_VALUES, value)
 
-          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          formatted_value = val.to_s.gsub(/(flex_|space_)/, "")
           "flex#{breakpoint}-justify-#{formatted_value}"
         end
 

data/lib/primer/classify/functional_colors.rb

@@ -24,9 +24,9 @@ module Primer
           value:,
           mappings:,
           non_functional_prefix:,
+          functional_options:,
           functional_prefix: "",
           number_prefix: "",
-          functional_options:,
           options_without_mappigs: []
         )
           sym_value = value.to_sym

data/lib/primer/classify/utilities.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "yaml"
+
 # :nodoc:
 module Primer
   class Classify
@@ -16,6 +18,17 @@ module Primer
       # rubocop:enable Security/YAMLLoad
       BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
+      # Replacements for some classnames that end up being a different argument key
+      REPLACEMENT_KEYS = {
+        "^anim" => "animation",
+        "^v-align" => "vertical_align",
+        "^d" => "display",
+        "^wb" => "word_break",
+        "^v" => "visibility",
+        "^width" => "w",
+        "^height" => "h"
+      }.freeze
+
       class << self
         def classname(key, val, breakpoint = "")
           if (valid = validate(key, val, breakpoint))
@@ -72,7 +85,7 @@ module Primer
           return { classes: classes } if ENV["RAILS_ENV"] == "production"
 
           obj = {}
-          classes = classes.split(" ")
+          classes = classes.split
           # Loop through all classes supplied and reject ones we find a match for
           # So when we're at the end of the loop we have classes left with any non-system classes.
           classes.reject! do |classname|
@@ -101,26 +114,51 @@ module Primer
           obj
         end
 
+        def classes_to_args(classes)
+          classes_to_hash(classes).map do |key, value|
+            val = case value
+                  when Symbol
+                    ":#{value}"
+                  when String
+                    value.to_json
+                  else
+                    value
+                  end
+
+            "#{key}: #{val}"
+          end.join(", ")
+        end
+
         private
 
         def find_selector(selector)
-          # Search each key/value_hash pair, eg. key `:mr` and value_hash `{ 0 => [ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ] }`
-          UTILITIES.each do |key, value_hash|
-            # Each value hash will also contain an array of classnames for breakpoints
-            # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
-            value_hash.each do |key_argument, classnames|
-              # Skip each value hash until we get one with the selector
-              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]`
-              return [key, key_argument, classnames.index(selector)]
-            end
+          key = infer_selector_key(selector)
+          value_hash = UTILITIES[key]
+
+          return nil if value_hash.blank?
+
+          # Each value hash will also contain an array of classnames for breakpoints
+          # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
+          value_hash.each do |key_argument, classnames|
+            # Skip each value hash until we get one with the selector
+            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]`
+            return [key, key_argument, classnames.index(selector)]
           end
 
           nil
         end
 
+        def infer_selector_key(selector)
+          REPLACEMENT_KEYS.each do |k, v|
+            return v.to_sym if selector.match?(Regexp.new(k))
+          end
+
+          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" unless ENV["RAILS_ENV"] == "production"