primer_view_components 0.0.49 → 0.0.50

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43c27ddfb1f920ba9dfd9989d859cc61b3fd26bc3788a44873412c971ad58cc1
-  data.tar.gz: 640aed54b2b1e68bb24c06989320f445da9e2e3c2981e959e693345f61fc92cf
+  metadata.gz: 81f226f5fd176e5a1565b2064ba3a85a8af1c11bfd7c3c9503714f3f5cd41dac
+  data.tar.gz: d655dc0cfa7260a09de3f1f662a1317eb2540914407f33cfdbc07b369a6cd5b0
 SHA512:
-  metadata.gz: 7c6b6ce07b479c462a01cfe65ccda3da920689c5e6642231f897bf5f92f559836d30d6f01bfec2c7ae99545c391abe25b85e7cd45da18de8249f63176b00bedb
-  data.tar.gz: ef88c518675d73c7c418fee48a11f173200f3a98ab4f10115fcfad5ccf5fa4ef0b3452da7bb9577a55a3d3286a3536f616f56aac4a07108421e8466abc76250b
+  metadata.gz: 07bc38eedefeae46a76d6f7a4b28892a4f01ab0018564c610d8143919c3fed93da3ad91c7970225fdfaac1fd12a294b51e245633f690e87b7392a21d3d3d65f8
+  data.tar.gz: c162cf3fca8accf0a92b9045e9e77bce16d3e646793a3fd479b12efd7e545e0cb9c56cc60884b39965ed7f41baf502d990cee3279170a3b896c845558a3ba714

data/CHANGELOG.md

@@ -30,6 +30,44 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.50
+
+### New
+
+* Add linter suggestions for `CloseButton` component.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Update to `octicons` `v15`, removing open-ended dependency. See [https://github.com/primer/octicons/releases/tag/v15.0.0] for icon name changes in release.
+
+    *Joel Hawksley*
+
+### Updates
+
+* Don't require `title` for `Label`.
+
+    *Manuel Puyol*
+
+* Improve autocorrectable linters to convert known SystemArgument classes.
+
+    *Manuel Puyol*
+
+* Add support for `width: :full` and `height: :full` to System Arguments.
+
+    *Joel Hawksley*
+
+### Bug fixes
+
+* Update linters to not autocorrect attributes with ERB blocks.
+
+    *Manuel Puyol*
+
+* Fix `:height` and `:width` docs to pull from Utilities
+
+    *Jon Rohan*
+
 ## 0.0.49
 
 ### New

data/app/components/primer/base_component.rb

@@ -79,7 +79,6 @@ module Primer
     # | `flex_shrink` | Integer | To enable, set to `0`. |
     # | `flex_wrap` | Symbol | <%= one_of(Primer::Classify::Flex::WRAP_MAPPINGS.keys) %> |
     # | `justify_content` | Symbol | <%= one_of(Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES) %> |
-    # | `width` | Symbol | <%= one_of([:fit]) %> |
     #
     # ## Grid
     #
@@ -94,7 +93,8 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
-    # | `height` | Symbol | <%= one_of([:fit]) %> |
+    # | `width` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:width)) %>. Also supports integer values. |
+    # | `height` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:height)) %>. Also supports integer values. |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
     # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
     # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |

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/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/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/lib/primer/classify.rb

@@ -170,7 +170,9 @@ module Primer
       def extract_value(memo, key, val, breakpoint)
         return if val.nil? || val == ""
 
-        if Primer::Classify::Utilities.supported_key?(key)
+        if (key == WIDTH_KEY || key == HEIGHT_KEY) && !val.is_a?(Symbol)
+          memo[key] = val
+        elsif 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|
@@ -202,12 +204,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/utilities.yml

@@ -85,6 +85,22 @@
   - float-md-none
   - float-lg-none
   - float-xl-none
+:width:
+  :fit:
+  - width-fit
+  :full:
+  - width-full
+  :auto:
+  - width-auto
+  - width-sm-auto
+  - width-md-auto
+  - width-lg-auto
+  - width-xl-auto
+:height:
+  :fit:
+  - height-fit
+  :full:
+  - height-full
 :m:
   0:
   - m-0

data/lib/primer/view_components/linters/argument_mappers/base.rb

@@ -1,8 +1,10 @@
 # frozen_string_literal: true
 
+require "primer/view_components/constants"
+require "primer/classify/utilities"
 require_relative "conversion_error"
 require_relative "system_arguments"
-require "primer/view_components/constants"
+require_relative "helpers/erb_block"
 
 module ERBLint
   module Linters
@@ -11,6 +13,7 @@ module ERBLint
       # Override attribute_to_args in a child class to customize its mapping behavior.
       class Base
         DEFAULT_TAG = nil
+        ATTRIBUTES = [].freeze
 
         def initialize(tag)
           @tag = tag
@@ -26,13 +29,45 @@ module ERBLint
           args[:tag] = ":#{@tag.name}" unless self.class::DEFAULT_TAG.nil? || @tag.name == self.class::DEFAULT_TAG
 
           @tag.attributes.each do |attribute|
-            args.merge!(attribute_to_args(attribute))
+            attr_name = attribute.name
+
+            if self.class::ATTRIBUTES.include?(attr_name)
+              args.merge!(attribute_to_args(attribute))
+            elsif attr_name == "class"
+              args.merge!(map_classes(attribute))
+            else
+              # Assume the attribute is a system argument.
+              args.merge!(SystemArguments.new(attribute).to_args)
+            end
           end
 
           args
         end
 
         def attribute_to_args(attribute); end
+
+        def map_classes(classes)
+          system_arguments = system_arguments_to_args(classes.value)
+          args = classes_to_args(system_arguments[:classes])
+
+          args.merge(system_arguments.except(:classes))
+        end
+
+        # Override this with your component's mappings
+        def classes_to_args(classes)
+          raise ConversionError, "Cannot convert classes `#{classes}`" if classes.present?
+
+          {}
+        end
+
+        def system_arguments_to_args(classes)
+          system_arguments = Primer::Classify::Utilities.classes_to_hash(classes)
+
+          # need to transform symbols to strings with leading `:`
+          system_arguments.transform_values do |v|
+            v.is_a?(Symbol) ? ":#{v}" : v
+          end
+        end
       end
     end
   end

data/lib/primer/view_components/linters/argument_mappers/button.rb

@@ -30,12 +30,12 @@ module ERBLint
           constant: "DEFAULT_TAG"
         ).freeze
 
+        ATTRIBUTES = %w[disabled type].freeze
+
         def attribute_to_args(attribute)
           attr_name = attribute.name
 
-          if attr_name == "class"
-            classes_to_args(attribute)
-          elsif attr_name == "disabled"
+          if attr_name == "disabled"
             { disabled: true }
           elsif attr_name == "type"
             # button is the default type, so we don't need to do anything.
@@ -44,14 +44,11 @@ module ERBLint
             raise ConversionError, "Button component does not support type \"#{attribute.value}\"" unless TYPE_OPTIONS.include?(attribute.value)
 
             { type: ":#{attribute.value}" }
-          else
-            # Assume the attribute is a system argument.
-            SystemArguments.new(attribute).to_args
           end
         end
 
         def classes_to_args(classes)
-          classes.value.split(" ").each_with_object({}) do |class_name, acc|
+          classes.split(" ").each_with_object({}) do |class_name, acc|
             next if class_name == "btn"
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?

data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb

@@ -8,16 +8,11 @@ module ERBLint
       # Maps attributes in the clipboard-copy element to arguments for the ClipboardCopy component.
       class ClipboardCopy < Base
         DEFAULT_TAG = "clipboard-copy"
+        ATTRIBUTES = %w[value].freeze
 
         def attribute_to_args(attribute)
-          attr_name = attribute.name
-
-          if attr_name == "value"
-            { value: attribute.value.to_json }
-          else
-            # Assume the attribute is a system argument.
-            SystemArguments.new(attribute).to_args
-          end
+          Helpers::ErbBlock.raise_if_erb_block(attribute)
+          { value: attribute.value.to_json }
         end
       end
     end

data/lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require_relative "../conversion_error"
+
+module ERBLint
+  module Linters
+    module ArgumentMappers
+      module Helpers
+        # provides helpers to identify and deal with ERB blocks.
+        class ErbBlock
+          class << self
+            def raise_if_erb_block(attribute)
+              raise ERBLint::Linters::ArgumentMappers::ConversionError, "Cannot convert attribute \"#{attribute.name}\" because its value contains an erb block" if any?(attribute)
+            end
+
+            def any?(attribute)
+              attribute.value_node&.children&.any? { |n| n.try(:type) == :erb }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/linters/argument_mappers/label.rb

@@ -24,21 +24,15 @@ module ERBLint
           constant: "DEFAULT_TAG"
         ).freeze
 
+        ATTRIBUTES = %w[title].freeze
+
         def attribute_to_args(attribute)
-          attr_name = attribute.name
-
-          if attr_name == "class"
-            classes_to_args(attribute)
-          elsif attr_name == "title"
-            { title: attribute.value.to_json }
-          else
-            # Assume the attribute is a system argument.
-            SystemArguments.new(attribute).to_args
-          end
+          Helpers::ErbBlock.raise_if_erb_block(attribute)
+          { title: attribute.value.to_json }
         end
 
         def classes_to_args(classes)
-          classes.value.split(" ").each_with_object({}) do |class_name, acc|
+          classes.split(" ").each_with_object({}) do |class_name, acc|
             next if class_name == "Label"
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?

data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require_relative "conversion_error"
+require_relative "helpers/erb_block"
 
 module ERBLint
   module Linters
@@ -28,9 +29,11 @@ module ERBLint
 
             { test_selector: m[:selector].tr("'", '"') }
           elsif attr_name == "data-test-selector"
+            Helpers::ErbBlock.raise_if_erb_block(attribute)
+
             { test_selector: attribute.value.to_json }
           elsif attr_name.start_with?(*STRING_PARAMETERS)
-            raise ConversionError, "Cannot convert attribute \"#{attr_name}\" because its value contains an erb block" if attribute.value_node&.children&.any? { |n| n.try(:type) == :erb }
+            Helpers::ErbBlock.raise_if_erb_block(attribute)
 
             { "\"#{attr_name}\"" => attribute.value.to_json }
           else

data/lib/primer/view_components/linters/close_button_component_migration_counter.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require_relative "helpers"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML clipboard-copy is used instead of the component.
+    class CloseButtonComponentMigrationCounter < Linter
+      include Helpers
+
+      TAGS = %w[button].freeze
+      CLASSES = %w[close-button].freeze
+      MESSAGE = "We are migrating close-button to use [Primer::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML."
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 49
+      PATCH = 50
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/utilities.rake

@@ -12,11 +12,13 @@ namespace :utilities do
       anim
       d
       float
+      height
       hide
       m mt mr mb ml mx my
       p pt pr pb pl px py
       position
       wb
+      width
       v
     ].freeze
 

data/static/arguments.yml

@@ -562,10 +562,6 @@
     type: Symbol
     default: "`:span`"
     description: One of `:a`, `:div`, `:span`, or `:summary`.
-  - name: title
-    type: String
-    default: N/A
-    description: "`title` attribute for the component element."
   - name: scheme
     type: Symbol
     default: "`nil`"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.49
+  version: 0.0.50
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-27 00:00:00.000000000 Z
+date: 2021-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -42,16 +42,16 @@ dependencies:
   name: octicons
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 13.0.0
+        version: '15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 13.0.0
+        version: '15'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -484,11 +484,13 @@ files:
 - lib/primer/view_components/linters/argument_mappers/button.rb
 - lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb
 - lib/primer/view_components/linters/argument_mappers/conversion_error.rb
+- lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb
 - lib/primer/view_components/linters/argument_mappers/label.rb
 - lib/primer/view_components/linters/argument_mappers/system_arguments.rb
 - lib/primer/view_components/linters/autocorrectable.rb
 - lib/primer/view_components/linters/button_component_migration_counter.rb
 - lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
+- lib/primer/view_components/linters/close_button_component_migration_counter.rb
 - lib/primer/view_components/linters/flash_component_migration_counter.rb
 - lib/primer/view_components/linters/helpers.rb
 - lib/primer/view_components/linters/label_component_migration_counter.rb