primer_view_components 0.0.49 → 0.0.53

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43c27ddfb1f920ba9dfd9989d859cc61b3fd26bc3788a44873412c971ad58cc1
-  data.tar.gz: 640aed54b2b1e68bb24c06989320f445da9e2e3c2981e959e693345f61fc92cf
+  metadata.gz: 4df5bb105c8b48aed71b4652afbf6814257fcb2c344085b328c27f8f109a80c1
+  data.tar.gz: 72ff93288cac5eb1cabdc7cb8031c488452499203d768fcf3795bbe18cb31a43
 SHA512:
-  metadata.gz: 7c6b6ce07b479c462a01cfe65ccda3da920689c5e6642231f897bf5f92f559836d30d6f01bfec2c7ae99545c391abe25b85e7cd45da18de8249f63176b00bedb
-  data.tar.gz: ef88c518675d73c7c418fee48a11f173200f3a98ab4f10115fcfad5ccf5fa4ef0b3452da7bb9577a55a3d3286a3536f616f56aac4a07108421e8466abc76250b
+  metadata.gz: 3af26e886cc8998ef3d449471400319615c0e820ce7265316e6de6fda2b55340f7f7a82d3c7c78f5c4e393f60d7638126bd8e8a88675735bfe570d2958ee2484
+  data.tar.gz: aff9d0ca813126c33daab60f57bb01915ea8b779f17df99e648ec236f0da12bb9b16f54af24dfa871a50253663d71813533386457424f09f46a5458d5556a5b2

data/CHANGELOG.md

@@ -30,6 +30,164 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.53
+
+### New
+
+* Add autocorrection to `FlashComponent` linter when the context is basic text.
+
+    *Manuel Puyol*
+
+### Updates
+
+* Linters won't mark offenses when the ignore count is correct unless explicitly configured to do so.
+
+    *Manuel Puyol*
+
+* Map the `for` argument when autofixing `ClipboardCopy` migrations.
+
+    *Kristján Oddsson*
+
+* Add autocorrection for `CloseButton` linter.
+
+    *Manuel Puyol*
+
+### Bug fixes
+
+* Linters won't convert HTML special elements.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Only run CHANGELOG CI on pull requests.
+
+    *Manuel Puyol*
+
+* Run CI actions on pushes to main.
+
+    *Cameron Dutro*
+
+* Get to 100% code coverage.
+
+    *Cameron Dutro*
+
+## 0.0.52
+
+### New
+
+* Adding `Primer::Beta::Truncate` component to reflect changes in primer/css component [Truncate](https://primer.style/css/components/truncate).
+
+    *Jon Rohan*
+
+* Add cop to look for deprecated system arguments and suggest replacements.
+
+    *Jon Rohan*
+
+* Add cop to use `primer_octicon` in favor of `octicon`.
+
+    *Manuel Puyol*
+
+* Fix release script so it doesn't loop continuously.
+
+    *Cameron Dutro*
+
+### Updates
+
+* Promote `ClipboardCopy` to beta.
+
+    *Manuel Puyol*
+
+* PrimerOcticon linter supports `aria-` and `data-` attributes.
+
+    *Manuel Puyol*
+
+* Linters can:
+  * convert values with ERB interpolations.
+  * autocorrect cases with custom classes.
+
+    *Manuel Puyol*
+
+* Add a `scheme` option to `BorderBoxComponent` rows.
+
+    *Cameron Dutro*
+
+* Upgrade rubocop and support Ruby 3.0.
+
+    *Cameron Dutro*
+
+* Linters will not autocorrect cases where a required argument is missing.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Update benchmarks to run in every supported Ruby version.
+
+    *Manuel Puyol*
+
+* Add a linter generator.
+
+    *Manuel Puyol*
+
+## 0.0.51
+
+### Breaking changes
+
+* Rename `width` and `height` System Arguments to `w` and `h`, resolving conflict with HTML attribute names.
+
+    *Manuel Puyol*
+
+### Updates
+
+* `SystemArgumentInsteadOfClass` linter will check for arguments in ViewHelpers.
+
+    *Manuel Puyol*
+
+## 0.0.50
+
+### Updates
+
+* Fix incorrect slots syntax in docs.
+
+    *Joel Hawksley*, *Blake Williams*
+
+### 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]) %> |
+    # | `w` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:w)) %> Also supports integer values. |
+    # | `h` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:h)) %> 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/beta/avatar_stack.rb

@@ -21,23 +21,23 @@ module Primer
 
       # @example Default
       #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example Align right
       #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example With tooltip
       #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>

data/app/components/primer/beta/truncate.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/truncate.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Truncate` to shorten overflowing text with an ellipsis.
+    class Truncate < Primer::Component
+      status :beta
+
+      # Text slot used for the truncated text.
+      #
+      # @param priority [Boolean] if true, the text will be given priority
+      # @param expandable [Boolean] if true, the text will expand on hover or focus
+      # @param max_width [Integer] if provided, the text will be truncated at a maximum width
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "TruncateText"
+
+      # @example Default
+      #   <%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(font_weight: :bold) do %>
+      #       <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Advanced multiple items
+      #   <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
+      #     <% component.item(tag: :li) do %>primer<% end %>
+      #     <% component.item(tag: :li, priority: true) do %>/ css<% end %>
+      #     <% component.item(tag: :li) do %>/ Issues<% end %>
+      #     <% component.item(tag: :li) do %>/ #123 —<% end %>
+      #     <% component.item(tag: :li, priority: true) do %>
+      #       Visual bug on primer.style found in lists
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Expand on hover or focus
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #   <% end %>
+      #
+      # @example Max widths
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @example Max widths on new lines
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = system_arguments[:tag] || :span
+        @system_arguments[:classes] = class_names(
+          "Truncate",
+          system_arguments[:classes]
+        )
+      end
+
+      def before_render
+        return unless content.present? && items.empty?
+
+        item { content }
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Primer::Beta::Truncate` and should not be
+      # used as a standalone component.
+      class TruncateText < Primer::Component
+        def initialize(priority: false, expandable: false, max_width: nil, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = system_arguments[:tag] || :span
+          @system_arguments[:classes] = class_names(
+            "Truncate-text",
+            "Truncate-text--primary": priority,
+            "Truncate-text--expandable": expandable
+          )
+
+          @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/border_box_component.rb

@@ -13,6 +13,14 @@ module Primer
     }.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 %>
@@ -54,11 +62,13 @@ module Primer
 
     # 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 { |**system_arguments|
+    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]
       )
 
@@ -102,6 +112,22 @@ module Primer
     #     <% 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)

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" }