primer_view_components 0.0.67 → 0.0.68

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a0eef46f7547daf7226fa12eb8e8a2eb8f8495ef12645137395d445d07be810
-  data.tar.gz: 56446b3333bc7cf9c57f79ca2de272b3b1b45f508aeac153e8b6fab259de88d5
+  metadata.gz: 537c5d2b6d37e3cfc2493426db201a7ea7268a00b3e5b06536d49956ad25658f
+  data.tar.gz: a8aa51d217947855498867c2e18e0ad8d34ee5c9dd565170544e3deeec63a25f
 SHA512:
-  metadata.gz: 551612b43dd1791b9859485d72ad846d9765dd11e8b1289de4bf0141b9247830318850b224d400dd5362e01013fa38caeab080be72db0b60ea3a5feafa0f176d
-  data.tar.gz: e7136d75e1cf6442d83a5085cf8d0b3b68b8ce0f8c88d1753b452ab5cb28bc3867c39a2a591a680a3446c825bf439c987b212856acdf65561b464a6c80d9b21a
+  metadata.gz: e5965f3012b7407029185f7698020c0207d9541dcc8fe78e93fabf207de062eba38358f00c3c270189ee2811ace542f97941e2b6e4f96d77f05c33da23af9098
+  data.tar.gz: 63b806a174ea5f35c89d2e5568781c010e307680b8bee36bb4de835b77cea5cc82c816bbfdd03d2b0ec283f47b23c8c351c9ef552a691dcd42097964bc88fa88

data/CHANGELOG.md

@@ -30,7 +30,51 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
-## 0.0.67
+## 0.0.68
+
+### Updates
+
+- Add accessible labels to Search AutoComplete when provided with an icon.
+
+    _Andri Alexandrou_
+
+- Restricts children for AutoComplete API to prevent accessibility violations and misuse
+
+    _Lindsey Wild_
+
+- Migrate from Heroku to Azure for the Rails storybook server.
+
+    _Cameron Dutro_
+
+- Remove CSS utilities from Blankslate
+
+    _Hector Garcia_
+
+- Improve last example on the PopoverComponent docs
+
+    _Hector Garcia_
+
+### Bug Fixes
+
+- Fix live reloading during local docs development.
+
+    _Cameron Dutro_
+
+### Deprecations
+
+- Deprecate `Tooltip` component.
+
+  _Kate Higa_
+
+### Misc
+
+- Updates README with missing `alt` attribute on image
+
+  _Kate Higa_
+
+- Updates contributing docs
+
+  _Lindsey Wild_
 
 ## 0.0.67
 

data/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="300px" src="/static/assets/view-components.svg">
+  <img width="300px" alt="" src="/static/assets/view-components.svg">
 </p>
 
 <h1 align="center">Primer ViewComponents</h1>

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

@@ -1,6 +1,14 @@
-<%= label %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= input %>
-  <%= icon %>
+  <label for="<%= @input_id %>">
+    <% if @is_label_visible %>
+      <%= @label_text %>
+    <% else %>
+      <span class="sr-only"><%= @label_text %></span>
+    <% end %>
+    <% if icon.present? %>
+      <%= icon %>
+    <% end %>
+  </label>
+  <input id="<%= @input_id %>" name="<%= @input_id %>" type="text" class="form-control" autocomplete="off">
   <%= results %>
 <% end %>

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

@@ -7,41 +7,14 @@ module Primer
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
     #
-    #   * Set the `label` slot to render a visible label. Alternatively, associate an existing visible text element
-    #   as a label by setting `aria-labelledby`.
-    #   * If you must use a non-visible label, set `:"aria-label"` on `AutoComplete` and Primer
-    #   will apply it to the correct elements. However, please note that a visible label should almost
-    #   always be used unless there is compelling reason not to. A placeholder is not a label.
+    #   * `label_text` is required and visible by default.
+    #   * If you must use a non-visible label, set `is_label_visible` to `false`.
+    #   However, please note that a visible label should almost always
+    #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
       status :beta
 
-      # Optionally render a visible label. See <%= link_to_accessibility %>
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :label, lambda { |**system_arguments|
-        deny_tag_argument(**system_arguments)
-        system_arguments[:for] = @input_id
-        system_arguments[:tag] = :label
-        Primer::BaseComponent.new(**system_arguments)
-      }
-
-      # Required input used to search for results
-      #
-      # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :input, lambda { |**system_arguments|
-        aria_label = aria("label", system_arguments) || @aria_label
-        if aria_label.present?
-          system_arguments[:"aria-label"] = aria_label
-          system_arguments[:aria]&.delete(:label)
-        end
-
-        name = system_arguments[:name] || @input_id
-        Input.new(id: @input_id, name: name, **system_arguments)
-      }
-
       # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
-      #
       renders_one :icon, Primer::OcticonComponent
 
       # Customizable results list.
@@ -56,34 +29,17 @@ module Primer
           system_arguments[:classes]
         )
 
-        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
-        system_arguments[:"aria-label"] = aria_label if aria_label.present?
-        system_arguments[:aria]&.delete(:label)
-
         Primer::BaseComponent.new(**system_arguments)
       }
 
       # @example Default
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) do |c| %>
-      #     <% c.label(classes:"").with_content("Fruits") %>
-      #     <% c.input(type: :text) %>
-      #   <% end %>
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) %>
       #
-      # @example With `aria-label`
-      #   <%= render(Primer::Beta::AutoComplete.new("aria-label": "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", position: :relative)) do |c| %>
-      #     <% c.input(type: :text) %>
-      #   <% end %>
-      #
-      # @example With `aria-labelledby`
-      #   <%= render(Primer::HeadingComponent.new(tag: :h2, id: "search-1")) { "Search" } %>
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-2", position: :relative)) do |c| %>
-      #     <% c.input("aria-labelledby": "search-1") %>
-      #   <% end %>
+      # @example With Non-Visible Label
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", is_label_visible: false, position: :relative)) %>
       #
-      # @example With custom classes for the results
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-4", list_id: "fruits-popup-3", position: :relative)) do |c| %>
-      #     <% c.label(classes:"").with_content("Fruits") %>
-      #     <% c.input(type: :text) %>
+      # @example With Custom Classes for the Results
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-3", position: :relative)) do |c| %>
       #     <% c.results(classes: "custom-class") do %>
       #       <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
       #         Apple
@@ -95,22 +51,25 @@ module Primer
       #   <% end %>
       #
       # @example With Icon
-      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
-      #     <% c.label(classes:"").with_content("Fruits") %>
-      #     <% c.input(type: :text) %>
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
       #     <% c.icon(icon: :search) %>
       #   <% end %>
       #
+      # @example With Icon and Non-Visible Label
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup-5", input_id: "fruits-input-5", is_label_visible: false, position: :relative)) do |c| %>
+      #     <% c.icon(icon: :search) %>
+      #   <% end %>
+      # @param label_text [String] The label of the input.
       # @param src [String] The route to query.
       # @param input_id [String] Id of the input element.
       # @param list_id [String] Id of the list element.
+      # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(src:, list_id:, input_id:, **system_arguments)
+      def initialize(label_text:, src:, list_id:, input_id:, is_label_visible: true, **system_arguments)
+        @label_text = label_text
         @list_id = list_id
         @input_id = input_id
-        @aria_label = aria("label", system_arguments)
-
-        system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
+        @is_label_visible = is_label_visible
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "auto-complete"
@@ -118,44 +77,10 @@ module Primer
         @system_arguments[:for] = list_id
       end
 
-      # add `results` without needing to explicitly call it in the view
+      # add `results` without needing to explicitly call them in the view
       def before_render
-        raise ArgumentError, "Missing `input` slot" if input.blank?
-        raise ArgumentError, "Accessible label is required." if label.blank? && input.missing_label?
-
         results(classes: "") unless results
       end
-
-      # This component is part of `Primer::Beta::AutoCompleteComponent` and should not be
-      # used as a standalone component.
-      class Input < Primer::Component
-        DEFAULT_TYPE = :text
-        TYPE_OPTIONS = [DEFAULT_TYPE, :search].freeze
-
-        # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
-        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(type: DEFAULT_TYPE, **system_arguments)
-          @system_arguments = deny_tag_argument(**system_arguments)
-          @system_arguments[:tag] = :input
-
-          @aria_label = system_arguments[:"aria-label"]
-          @aria_labelledby = system_arguments[:"aria-labelledby"] || system_arguments.dig(:aria, :labelledby)
-
-          @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-          @system_arguments[:classes] = class_names(
-            "form-control",
-            system_arguments[:classes]
-          )
-        end
-
-        def missing_label?
-          @aria_label.blank? && @aria_labelledby.blank?
-        end
-
-        def call
-          render(Primer::BaseComponent.new(**@system_arguments))
-        end
-      end
     end
   end
 end

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

@@ -5,9 +5,13 @@
     <%= heading %>
     <%= description %>
 
-    <%= primary_action %>
+    <% if primary_action.present? %>
+      <div class="blankslate-action">
+        <%= primary_action %>
+      </div>
+    <% end %>
     <% if secondary_action.present? %>
-      <div class="mt-3">
+      <div class="blankslate-action">
         <%= secondary_action %>
       </div>
     <% end %>

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

@@ -26,20 +26,19 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :visual, types: {
         icon: lambda { |**system_arguments|
-          system_arguments[:mb] = 3
           system_arguments[:size] ||= :medium
           system_arguments[:classes] = class_names("blankslate-icon", system_arguments[:classes])
 
           Primer::OcticonComponent.new(**system_arguments)
         },
         spinner: lambda { |**system_arguments|
-          system_arguments[:mb] = 3
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
           Primer::SpinnerComponent.new(**system_arguments)
         },
         image: lambda { |**system_arguments|
-          system_arguments[:mb] = 3
           system_arguments[:size] = "56x56"
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
 
           Primer::Image.new(**system_arguments)
         }
@@ -52,8 +51,7 @@ module Primer
       renders_one :heading, lambda { |tag:, **system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = tag
-        system_arguments[:mb] = 1
-        system_arguments[:classes] = class_names("h2", system_arguments[:classes])
+        system_arguments[:classes] = class_names("blankslate-heading", system_arguments[:classes])
 
         Primer::HeadingComponent.new(**system_arguments)
       }
@@ -66,7 +64,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[:tag] = :p
 
         Primer::BaseComponent.new(**system_arguments)
       }
@@ -82,7 +80,6 @@ module Primer
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
         system_arguments[:href] = href
-        system_arguments[:mt] = 5
         system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
@@ -98,8 +95,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :secondary_action, lambda { |href:, **system_arguments|
         system_arguments[:href] = href
-        # Padding is needed to increase touch area.
-        system_arguments[:p] = 3
 
         Primer::LinkComponent.new(**system_arguments)
       }

data/app/components/primer/popover_component.rb

@@ -88,20 +88,16 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
-    # @example With HTML body
+    # @example With multiple elements in the body
     #   <%= render Primer::PopoverComponent.new do |component| %>
     #     <% component.heading do %>
     #       Activity feed
     #     <% end %>
     #     <% component.body(caret: :left) do %>
-    #       <p> This is the Popover body.</p>
-    #       <div>
-    #         This is using HTML.
-    #         <ul>
-    #           <li>Thing #1</li>
-    #           <li>Thing #2</li>
-    #         </ul>
-    #       </div>
+    #       <p>This is the Popover body.</p>
+    #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
+    #         Got it!
+    #       <% end %>
     #     <% end %>
     #   <% end %>
     #

data/app/components/primer/tooltip.rb

@@ -3,7 +3,7 @@
 module Primer
   # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class Tooltip < Primer::Component
-    status :beta
+    status :deprecated
 
     DIRECTION_DEFAULT = :n
     ALIGN_DEFAULT = :default

data/app/lib/primer/test_selector_helper.rb

@@ -4,7 +4,7 @@ module Primer
   # Module to allow components to deal with the `test_selector` argument.
   # It will only add the selector if env is not Production.
   #
-  # test_selecotr: "foo" => data-test-selector="foo"
+  # test_selector: "foo" => data-test-selector="foo"
   module TestSelectorHelper
     TEST_SELECTOR_TAG = :test_selector
 

data/lib/primer/view_components/version.rb

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

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require "rubocop"
+
+# :nocov:
+module RuboCop
+  module Cop
+    module Primer
+      # This cop ensures that components don't use deprecated component names
+      #
+      # bad
+      # Primer::ComponentNameComponent.new()
+      #
+      # good
+      # Primer::Beta::ComponentName.new()
+      class ComponentNameMigration < BaseCop
+        DEPRECATIONS = {
+          "Primer::TestComponent" => "Primer::Beta::Test"
+        }.freeze
+
+        def on_send(node)
+          return unless node.method_name == :new && !node.receiver.nil? && DEPRECATIONS.key?(node.receiver.const_name)
+
+          add_offense(node.receiver, message: "Don't use deprecated names")
+        end
+
+        def autocorrect(node)
+          lambda do |corrector|
+            corrector.replace(node, DEPRECATIONS[node.const_name])
+          end
+        end
+      end
+    end
+  end
+end

data/lib/tasks/docs.rake

@@ -106,7 +106,8 @@ namespace :docs do
     errors = []
 
     # Deletes docs before regenerating them, guaranteeing that we don't keep stale docs.
-    FileUtils.rm_rf(Dir.glob("docs/content/components/**/*.md"))
+    components_content_glob = File.join(*%w[docs content components ** *.md])
+    FileUtils.rm_rf(components_content_glob)
 
     components.sort_by(&:name).each do |component|
       documentation = registry.get(component.name)
@@ -114,7 +115,7 @@ namespace :docs do
       data = docs_metadata(component)
 
       path = Pathname.new(data[:path])
-      path.dirname.mkdir unless path.dirname.exist?
+      path.dirname.mkpath unless path.dirname.exist?
       File.open(path, "w") do |f|
         f.puts("---")
         f.puts("title: #{data[:title]}")

data/static/arguments.yml

@@ -165,6 +165,10 @@
 - component: AutoComplete
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb
   parameters:
+  - name: label_text
+    type: String
+    default: N/A
+    description: The label of the input.
   - name: src
     type: String
     default: N/A
@@ -177,6 +181,11 @@
     type: String
     default: N/A
     description: Id of the list element.
+  - name: is_label_visible
+    type: Boolean
+    default: "`true`"
+    description: Controls if the label is visible. If `false`, screen reader only
+      text will be added.
   - name: system_arguments
     type: Hash
     default: N/A

data/static/audited_at.json

@@ -11,7 +11,6 @@
   "Primer::BaseButton": "",
   "Primer::BaseComponent": "",
   "Primer::Beta::AutoComplete": "",
-  "Primer::Beta::AutoComplete::Input": "",
   "Primer::Beta::AutoComplete::Item": "",
   "Primer::Beta::Avatar": "",
   "Primer::Beta::AvatarStack": "",

data/static/classes.yml

@@ -88,7 +88,10 @@
 - ".avatar-more"
 - ".avatar-small"
 - ".blankslate"
+- ".blankslate-action"
+- ".blankslate-heading"
 - ".blankslate-icon"
+- ".blankslate-image"
 - ".blankslate-narrow"
 - ".blankslate-spacious"
 - ".border"
@@ -163,7 +166,6 @@
 - ".form-control"
 - ".gutter-condensed"
 - ".gutter-lg"
-- ".h2"
 - ".hidden-text-expander"
 - ".inline"
 - ".left-0"
@@ -171,9 +173,7 @@
 - ".list-style-none"
 - ".markdown-body"
 - ".mb-0"
-- ".mb-1"
 - ".mb-2"
-- ".mb-3"
 - ".menu"
 - ".menu-heading"
 - ".menu-item"
@@ -181,7 +181,6 @@
 - ".mr-2"
 - ".mr-n1"
 - ".mt-2"
-- ".mt-3"
 - ".mt-5"
 - ".mx-auto"
 - ".no-underline"
@@ -194,6 +193,7 @@
 - ".pr-2"
 - ".pt-5"
 - ".right-0"
+- ".sr-only"
 - ".tabnav"
 - ".tabnav-tab"
 - ".tabnav-tabs"

data/static/constants.json

@@ -181,16 +181,8 @@
     ]
   },
   "Primer::Beta::AutoComplete": {
-    "Input": "Primer::Beta::AutoComplete::Input",
     "Item": "Primer::Beta::AutoComplete::Item"
   },
-  "Primer::Beta::AutoComplete::Input": {
-    "DEFAULT_TYPE": "text",
-    "TYPE_OPTIONS": [
-      "text",
-      "search"
-    ]
-  },
   "Primer::Beta::AutoComplete::Item": {
   },
   "Primer::Beta::Avatar": {

data/static/statuses.json

@@ -11,7 +11,6 @@
   "Primer::BaseButton": "beta",
   "Primer::BaseComponent": "beta",
   "Primer::Beta::AutoComplete": "beta",
-  "Primer::Beta::AutoComplete::Input": "alpha",
   "Primer::Beta::AutoComplete::Item": "beta",
   "Primer::Beta::Avatar": "beta",
   "Primer::Beta::AvatarStack": "beta",
@@ -62,6 +61,6 @@
   "Primer::TimeAgoComponent": "beta",
   "Primer::TimelineItemComponent": "beta",
   "Primer::TimelineItemComponent::BadgeComponent": "alpha",
-  "Primer::Tooltip": "beta",
+  "Primer::Tooltip": "deprecated",
   "Primer::Truncate": "beta"
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.67
+  version: 0.0.68
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-25 00:00:00.000000000 Z
+date: 2022-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -391,8 +391,6 @@ files:
 - app/components/primer/alpha/underline_nav.rb
 - app/components/primer/alpha/underline_panels.html.erb
 - app/components/primer/alpha/underline_panels.rb
-- app/components/primer/auto_complete/auto_complete.d.ts
-- app/components/primer/auto_complete/auto_complete.js
 - app/components/primer/base_button.rb
 - app/components/primer/base_component.rb
 - app/components/primer/beta/auto_complete.rb
@@ -545,6 +543,7 @@ files:
 - lib/rubocop/config/default.yml
 - lib/rubocop/cop/primer.rb
 - lib/rubocop/cop/primer/base_cop.rb
+- lib/rubocop/cop/primer/component_name_migration.rb
 - lib/rubocop/cop/primer/deprecated_arguments.rb
 - lib/rubocop/cop/primer/deprecated_button_arguments.rb
 - lib/rubocop/cop/primer/deprecated_label_schemes.rb
@@ -589,7 +588,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System

data/app/components/primer/auto_complete/auto_complete.d.ts

@@ -1 +0,0 @@
-import '@github/auto-complete-element';

data/app/components/primer/auto_complete/auto_complete.js

@@ -1 +0,0 @@
-import '@github/auto-complete-element';