Merge branch 'main' into deprecated_alpha_autocomplete

.changeset/eighty-hounds-cheer.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Set `aria-hidden="true"` when type is label

.changeset/good-coats-shout.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Stop requiring aria-label on ClipboardCopy with other content.

.changeset/orange-fishes-juggle.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add `Tooltip` support to `IconButton`

.changeset/stale-pumpkins-flash.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Replace YAML load with YAML safe load with allowed classes list

Gemfile.lock

@@ -104,21 +104,21 @@ GEM
     listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.12.0)
+    loofah (2.18.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.1)
-    mini_portile2 (2.6.1)
+    mini_portile2 (2.8.0)
     minitest (5.14.4)
     mocha (1.13.0)
     msgpack (1.4.2)
     nio4r (2.5.8)
-    nokogiri (1.12.5)
-      mini_portile2 (~> 2.6.1)
+    nokogiri (1.13.8)
+      mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.12.5-x86_64-darwin)
+    nokogiri (1.13.8-x86_64-darwin)
       racc (~> 1.4)
     octicons (17.4.0)
     parallel (1.21.0)
@@ -130,7 +130,7 @@ GEM
     public_suffix (4.0.6)
     puma (5.6.4)
       nio4r (~> 2.0)
-    racc (1.5.2)
+    racc (1.6.0)
     rack (2.2.3.1)
     rack-cors (1.1.1)
       rack (>= 2.0.0)
@@ -141,7 +141,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.4.2)
+    rails-html-sanitizer (1.4.3)
       loofah (~> 2.3)
     railties (6.1.1)
       actionpack (= 6.1.1)

app/components/primer/alpha/button_marketing.rb

@@ -63,7 +63,7 @@ def initialize(
       end
 
       def call
-        render(Primer::BaseButton.new(**@system_arguments)) { content }
+        render(Primer::Beta::BaseButton.new(**@system_arguments)) { content }
       end
     end
   end

app/components/primer/alpha/tool-tip-element.ts

@@ -254,6 +254,7 @@ class ToolTipElement extends HTMLElement {
       if (!this.id || !this.control) return
       if (this.type === 'label') {
         this.control.setAttribute('aria-labelledby', this.id)
+        this.setAttribute('aria-hidden', 'true')
       } else {
         let describedBy = this.control.getAttribute('aria-describedby')
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)

app/components/primer/beta/base_button.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+    class BaseButton < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :button
+      TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+      # @example Block
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true)) { "Block" } %>
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        type: DEFAULT_TYPE,
+        block: false,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) if @system_arguments[:tag] == :button
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "btn-block" => block
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end
+
+Primer::BaseButton = Primer::Beta::BaseButton

app/components/primer/button_component.html.erb

@@ -1,4 +1,4 @@
-<%= render Primer::BaseButton.new(**@system_arguments) do -%>
+<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
   <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
   <%= tooltip %>
 <% end -%>

app/components/primer/button_component.rb

@@ -123,8 +123,8 @@ class ButtonComponent < Primer::Component
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-    # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     # @param block [Boolean] Whether button is full-width with `display: block`.
     # @param dropdown [Boolean] Whether or not to render a dropdown caret.

app/components/primer/clipboard_copy.rb

@@ -12,7 +12,7 @@ class ClipboardCopy < Primer::Component
     #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
     #
     # @example With text instead of icons
-    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) do %>
+    #   <%= render(Primer::ClipboardCopy.new(value: "Text to copy")) do %>
     #     Click to copy!
     #   <% end %>
     #
@@ -34,10 +34,14 @@ def initialize(value: nil, **system_arguments)
       @system_arguments[:value] = value if value.present?
     end
 
+    # :nodoc:
+    def before_render
+      validate_aria_label if content.blank?
+    end
+
     private
 
     def validate!
-      validate_aria_label
       raise ArgumentError, "Must provide either `value` or `for`" if @value.nil? && @system_arguments[:for].nil?
     end
   end

app/components/primer/close_button.rb

@@ -31,7 +31,7 @@ def initialize(type: DEFAULT_TYPE, **system_arguments)
     end
 
     def call
-      render(Primer::BaseButton.new(**@system_arguments)) do
+      render(Primer::Beta::BaseButton.new(**@system_arguments)) do
         render(Primer::OcticonComponent.new("x"))
       end
     end

app/components/primer/hellip_button.rb

@@ -33,7 +33,7 @@ def initialize(inline: false, **system_arguments)
     end
 
     def call
-      render(Primer::BaseButton.new(**@system_arguments)) { "…".html_safe }
+      render(Primer::Beta::BaseButton.new(**@system_arguments)) { "…".html_safe }
     end
   end
 end

app/components/primer/icon_button.erb

@@ -0,0 +1,4 @@
+<%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+  <%= render Primer::OcticonComponent.new(icon: @icon) %>
+  <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+<% end -%>

app/components/primer/icon_button.rb

@@ -8,6 +8,7 @@ module Primer
   #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
   #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
   #   `"Search"` instead of `"Magnifying glass"`.
+  #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
   #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
   class IconButton < Primer::Component
     status :beta
@@ -18,9 +19,10 @@ class IconButton < Primer::Component
       :danger => "btn-octicon-danger"
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
     # @example Default
     #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
     #
     # @example Schemes
     #
@@ -36,16 +38,34 @@ class IconButton < Primer::Component
     #     <% end %>
     #   <% end %>
     #
+    # @example With an `aria-description`
+    #   @description
+    #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
+    #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
+    #     more context and information. See the accessibility section for more information.
+    #   @code
+    #     <%= render(Primer::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+    #
+    # @example Custom tooltip direction
+    #
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+    #
     # @param scheme [Symbol] <%= one_of(Primer::IconButton::SCHEME_OPTIONS) %>
     # @param icon [String] Name of <%= link_to_octicons %> to use.
-    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::Beta::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 aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
+    # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+    # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments)
       @icon = icon
 
       @system_arguments = system_arguments
+
+      @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+
       @system_arguments[:classes] = class_names(
         "btn-octicon",
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
@@ -54,11 +74,27 @@ def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
       )
 
       validate_aria_label
-    end
 
-    def call
-      render(Primer::BaseButton.new(**@system_arguments)) do
-        render(Primer::OcticonComponent.new(icon: @icon))
+      @aria_label = aria("label", @system_arguments)
+      @aria_description = aria("description", @system_arguments)
+
+      @tooltip_arguments = {
+        for_id: @system_arguments[:id],
+        direction: tooltip_direction
+      }
+
+      # If we have both an `aria-label` and a `aria-description`, we create a `Tooltip` with the description type and keep the `aria-label` in the button.
+      # Otherwise, the `aria-label` is used as the tooltip text, which is the `aria-labelled-by` of the button, so we don't set it in the button.
+      if @aria_label.present? && @aria_description.present?
+        @system_arguments.delete(:"aria-description")
+        @system_arguments[:aria].delete(:description) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_description
+        @tooltip_arguments[:type] = :description
+      else
+        @system_arguments.delete(:"aria-label")
+        @system_arguments[:aria].delete(:label) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_label
+        @tooltip_arguments[:type] = :label
       end
     end
   end

demo/Gemfile.lock

@@ -183,7 +183,7 @@ GEM
     listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.11.0)
+    loofah (2.18.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     memoist (0.16.2)
@@ -233,7 +233,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.3.0)
+    rails-html-sanitizer (1.4.3)
       loofah (~> 2.3)
     railties (6.1.1)
       actionpack (= 6.1.1)

demo/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "dependencies": {
-    "@primer/css": "^20.4.0",
+    "@primer/css": "^20.4.1",
     "@rails/actioncable": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "prettier": "^2.4.1",

demo/yarn.lock

@@ -1377,10 +1377,10 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
   integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
 
-"@primer/css@^20.4.0":
-  version "20.4.0"
-  resolved "https://registry.yarnpkg.com/@primer/css/-/css-20.4.0.tgz#8fc9f6216c19de92a0f887ad841f8557cbd6d563"
-  integrity sha512-0EgBXDtrPnIelKI/XojRA97I2utSjR363682b6mZT+5Oc/0nL5JK/cEoBafkuXxEBI7+r2U6Jodzifigzi6P0A==
+"@primer/css@^20.4.1":
+  version "20.4.1"
+  resolved "https://registry.yarnpkg.com/@primer/css/-/css-20.4.1.tgz#ffab915a91e2d1297b5ae01698a87c10c0dc4e43"
+  integrity sha512-jNO8JUmJea/ZMa8w7fWlYT4MWU15raVad04QW1ZZOcqyTyRWEB4Mh31PBj62XB6dfExbKnEC+XX0P4M9FjhwVQ==
   dependencies:
     "@primer/primitives" "^7.9.0"
 

docs/package.json

@@ -7,7 +7,7 @@
     "build": "gatsby build --prefix-paths"
   },
   "dependencies": {
-    "@primer/css": "^20.4.0",
+    "@primer/css": "^20.4.1",
     "@primer/gatsby-theme-doctocat": "^4.0.0",
     "@primer/primitives": "^6.0.0",
     "@primer/react": "^35.2.2",