primer_view_components 0.0.72 → 0.0.75

data/app/components/primer/alpha/tool-tip-element.js

@@ -56,7 +56,7 @@ class ToolTipElement extends HTMLElement {
         white-space: normal;
         width: max-content;
       }
-      
+
       :host:before{
         position: absolute;
         z-index: 1000001;
@@ -65,7 +65,7 @@ class ToolTipElement extends HTMLElement {
         border: 6px solid transparent;
         opacity: 0
       }
-      
+
       @keyframes tooltip-appear {
         from {
           opacity: 0
@@ -74,7 +74,7 @@ class ToolTipElement extends HTMLElement {
           opacity: 1
         }
       }
-      
+
       :host:after{
         position: absolute;
         display: block;
@@ -83,7 +83,7 @@ class ToolTipElement extends HTMLElement {
         height: 12px;
         content: ""
       }
-      
+
       :host(.${TOOLTIP_OPEN_CLASS}),
       :host(.${TOOLTIP_OPEN_CLASS}):before {
         animation-name: tooltip-appear;
@@ -92,7 +92,7 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
         animation-delay: .4s
       }
-      
+
       :host(.tooltip-s):before,
       :host(.tooltip-n):before {
         right: 50%;
@@ -105,38 +105,38 @@ class ToolTipElement extends HTMLElement {
         bottom: 100%;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-s):after,
       :host(.tooltip-se):after,
       :host(.tooltip-sw):after {
         bottom: 100%
       }
-      
+
       :host(.tooltip-n):before,
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-n):after,
       :host(.tooltip-ne):after,
       :host(.tooltip-nw):after {
         top: 100%
       }
-      
+
       :host(.tooltip-se):before,
       :host(.tooltip-ne):before {
         left: 0;
         margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-      
+
       :host(.tooltip-sw):before,
       :host(.tooltip-nw):before {
         right: 0;
         margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-      
+
       :host(.tooltip-w):before {
         top: 50%;
         bottom: 50%;
@@ -144,7 +144,7 @@ class ToolTipElement extends HTMLElement {
         margin-top: -6px;
         border-left-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-e):before {
         top: 50%;
         right: 100%;
@@ -178,13 +178,15 @@ class ToolTipElement extends HTMLElement {
     }
     connectedCallback() {
         var _a;
-        const shadow = this.attachShadow({ mode: 'open' });
-        shadow.innerHTML = `
-      <style>
-        ${this.styles()}
-      </style>
-      <slot></slot>
-    `;
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: 'open' });
+            shadow.innerHTML = `
+        <style>
+          ${this.styles()}
+        </style>
+        <slot></slot>
+      `;
+        }
         this.hidden = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line prettier/prettier
 import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import {getAnchoredPosition} from '@primer/behaviors'
 
@@ -42,7 +43,7 @@ class ToolTipElement extends HTMLElement {
         white-space: normal;
         width: max-content;
       }
-      
+
       :host:before{
         position: absolute;
         z-index: 1000001;
@@ -51,7 +52,7 @@ class ToolTipElement extends HTMLElement {
         border: 6px solid transparent;
         opacity: 0
       }
-      
+
       @keyframes tooltip-appear {
         from {
           opacity: 0
@@ -60,7 +61,7 @@ class ToolTipElement extends HTMLElement {
           opacity: 1
         }
       }
-      
+
       :host:after{
         position: absolute;
         display: block;
@@ -69,7 +70,7 @@ class ToolTipElement extends HTMLElement {
         height: 12px;
         content: ""
       }
-      
+
       :host(.${TOOLTIP_OPEN_CLASS}),
       :host(.${TOOLTIP_OPEN_CLASS}):before {
         animation-name: tooltip-appear;
@@ -78,7 +79,7 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
         animation-delay: .4s
       }
-      
+
       :host(.tooltip-s):before,
       :host(.tooltip-n):before {
         right: 50%;
@@ -91,38 +92,38 @@ class ToolTipElement extends HTMLElement {
         bottom: 100%;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-s):after,
       :host(.tooltip-se):after,
       :host(.tooltip-sw):after {
         bottom: 100%
       }
-      
+
       :host(.tooltip-n):before,
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-n):after,
       :host(.tooltip-ne):after,
       :host(.tooltip-nw):after {
         top: 100%
       }
-      
+
       :host(.tooltip-se):before,
       :host(.tooltip-ne):before {
         left: 0;
         margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-      
+
       :host(.tooltip-sw):before,
       :host(.tooltip-nw):before {
         right: 0;
         margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-      
+
       :host(.tooltip-w):before {
         top: 50%;
         bottom: 50%;
@@ -130,7 +131,7 @@ class ToolTipElement extends HTMLElement {
         margin-top: -6px;
         border-left-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-e):before {
         top: 50%;
         right: 100%;
@@ -176,13 +177,15 @@ class ToolTipElement extends HTMLElement {
   }
 
   connectedCallback() {
-    const shadow = this.attachShadow({mode: 'open'})
-    shadow.innerHTML = `
-      <style>
-        ${this.styles()}
-      </style>
-      <slot></slot>
-    `
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({mode: 'open'})
+      shadow.innerHTML = `
+        <style>
+          ${this.styles()}
+        </style>
+        <slot></slot>
+      `
+    }
     this.hidden = true
     this.#allowUpdatePosition = true
 

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

@@ -1,24 +1,26 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <label for="<%= @input_id %>" class="<%= @label_classes %>">
-    <% if @is_label_visible %>
+  <div class="<%= @form_group_classes %>">
+    <label for="<%= @input_id %>" class="FormControl-label <% if @visually_hide_label %>sr-only<% end %>">
       <%= @label_text %>
+    </label>
+    <% if leading_visual || @show_clear_button %>
+        <div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-fieldWrap--input-leadingVisual<% end %>">
+            <%= leading_visual %>
+            <%= input %>
+            <% if @show_clear_button %>
+              <button id="<%= @input_id %>-clear" class="FormControl--input-trailingAction" aria-label="Clear"><%= primer_octicon "x-circle-fill" %></button>
+            <% end %>
+        </div>
     <% else %>
-      <span class="sr-only"><%= @label_text %></span>
+      <%= input %>
     <% end %>
-  </label>
-  <span class="autocomplete-body">
-    <% if @with_icon %>
-      <div class="form-control autocomplete-embedded-icon-wrap">
-        <%= render Primer::OcticonComponent.new(:search) %>
-    <% end %>
-    <%= input %>
-    <% if @is_clearable %>
-      <button id="<%= @input_id %>-clear" class="btn-octicon" aria-label="Clear"><%= primer_octicon "x" %></button>
-    <% end %>
-    <% if @with_icon %>
+  </div>
+  <div class="Overlay-backdrop--anchor">
+    <div class="Overlay Overlay--height-auto Overlay--width-auto">
+      <div class="Overlay-body Overlay-body--paddingNone">
+        <%= results %>
       </div>
-    <% end %>
-    <%= results %>
-  </span>
+    </div>
+  </div>
   <div id="<%= @list_id %>-feedback" class="sr-only"></div>
 <% end %>

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

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# TODO: use generic ActionList item for Autocomplete
 module Primer
   module Beta
     class AutoComplete
@@ -29,14 +30,17 @@ module Primer
           @system_arguments[:"aria-disabled"] = true if disabled
 
           @system_arguments[:classes] = class_names(
-            "autocomplete-item",
-            system_arguments[:classes],
-            "disabled" => disabled
+            "ActionList-item",
+            system_arguments[:classes]
           )
         end
 
         def call
-          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            render(Primer::BaseComponent.new(tag: :span, classes: "ActionList-content")) do
+              render(Primer::BaseComponent.new(tag: :span, classes: "ActionList-item-label")) { content }
+            end
+          end
         end
       end
     end

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

@@ -8,11 +8,20 @@ module Primer
     #   Always set an accessible label to help the user interact with the component.
     #
     #   * `label_text` is required and visible by default.
-    #   * If you must use a non-visible label, set `is_label_visible` to `false`.
+    #   * If you must hide the label, set `visually_hide_label` to `true`.
     #   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
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "FormControl--small",
+        DEFAULT_SIZE => "FormControl--medium",
+        :large => "FormControl--large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
       #
       # Customizable results list.
       #
@@ -22,13 +31,26 @@ module Primer
         system_arguments[:tag] = :ul
         system_arguments[:id] = @list_id
         system_arguments[:classes] = class_names(
-          "autocomplete-results",
+          "ActionList",
           system_arguments[:classes]
         )
 
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      #
+      # Leading visual.
+      #
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          system_arguments[:classes] = class_names("FormControl--input-leadingVisual")
+          Primer::OcticonComponent.new(**system_arguments)
+        }
+      }
+
       # Customizable input used to search for results.
       # It is preferred to use this slot sparingly - it will be created by default if not explicity added.
       #
@@ -38,7 +60,7 @@ module Primer
         sanitized_args = deny_single_argument(:autofocus, "autofocus is not allowed for accessibility reasons. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations for more information.", **sanitized_args)
         deny_aria_key(
           :label,
-          "instead of `aria-label`, include `label_text` and set `is_label_visible` to `false` on the component initializer.",
+          "instead of `aria-label`, include `label_text` and set `visually_hide_label` to `true` on the component initializer.",
           **sanitized_args
         )
         deny_single_argument(
@@ -55,45 +77,82 @@ module Primer
         sanitized_args[:name] = @input_name
         sanitized_args[:tag] = :input
         sanitized_args[:autocomplete] = "off"
-
+        sanitized_args[:disabled] = true if @disabled
+        sanitized_args[:invalid] = true if @invalid
         sanitized_args[:type] = :text
         sanitized_args[:classes] = class_names(
-          "form-control",
+          "FormControl",
+          "FormControl--input",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
           sanitized_args[:classes]
         )
+        sanitized_args[:placeholder] = @placeholder
 
         Primer::BaseComponent.new(**sanitized_args)
       }
 
-      # @example Default
+      # @example Leading visual
       #   @description
-      #     Labels are stacked by default.
+      #     Display any Octicon as a leading visual within the field
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", src: "/auto_complete", input_id:"input-id-1", list_id: "list-id-1")) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #       <% c.results do %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
+      #           Apple
+      #         <% end %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
+      #           Orange
+      #         <% end %>
+      #       <% end %>
+      #     <% end %>
       #
-      # @example With inline label
+      # @example Trailing action
       #   @description
-      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
+      #     Show a clear button
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "list-id-2", src: "/auto_complete", show_clear_button: true )) do |c| %>
+      #       <% c.results do %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
+      #           Apple
+      #         <% end %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
+      #           Orange
+      #         <% end %>
+      #       <% end %>
+      #     <% end %>
       #
-      # @example With non-visible label
+      # @example Visually hidden label
       #   @description
-      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #     A non-visible label may be rendered with `visually_hide_label: true`, but it is highly discouraged. See <%= link_to_accessibility %>.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-1", list_id: "fruits-popup--custom-result-1", src: "/auto_complete", visually_hide_label: true)) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #       <% c.results do %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
+      #           Apple
+      #         <% end %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
+      #           Orange
+      #         <% end %>
+      #       <% end %>
+      #     <% end %>
       #
-      # @example With icon
+      # @example Full width field
       #   @description
-      #     To display a search icon, set `with_icon` to `true`.
+      #     To allow field to span width of its container, set `full_width` to `true`.
       #   @code
-      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
-      #
-      # @example With icon and non-visible label
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
-      #
-      # @example With clear button
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "fruits-input--custom-results-2", list_id: "fruits-popup--custom-results-2", src: "/auto_complete", full_width: true)) do |c| %>
+      #       <% c.leading_visual_icon(icon: :search) %>
+      #       <% c.results do %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |_c| %>
+      #           Apple
+      #         <% end %>
+      #         <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |_c| %>
+      #           Orange
+      #         <% end %>
+      #       <% end %>
+      #     <% end %>
       #
       # @example With custom classes for the input
       #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
@@ -117,25 +176,42 @@ module Primer
       # @param input_id [String] Id of the input element.
       # @param input_name [String] Optional name of the input element, defaults to `input_id` when not set.
       # @param list_id [String] Id of the list element.
-      # @param with_icon [Boolean] Controls if a search icon is visible, defaults to `false`.
-      # @param is_label_visible [Boolean] Controls if the label is visible. If `false`, screen reader only text will be added.
-      # @param is_clearable [Boolean] Adds optional clear button.
-      # @param is_label_inline [Boolean] Controls if the label is inline. On smaller screens, label will always become stacked.
+      # @param visually_hide_label [Boolean] Controls if the label is visible. If `true`, screen reader only text will be added.
+      # @param show_clear_button [Boolean] Adds optional clear button.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false, **system_arguments)
+      # @param size [Hash] Input size can be small, medium (default), or large
+      # @param full_width [Boolean] Input can be full-width or fit to content
+      # @param disabled [Boolean] Disabled input
+      # @param invalid [Boolean] Invalid input
+      # @param placeholder [String] The placeholder text displayed within the input
+      def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, **system_arguments)
         @label_text = label_text
         @list_id = list_id
         @input_id = input_id
         @input_name = input_name || input_id
-        @is_label_visible = is_label_visible
-        @with_icon = with_icon
-        @is_clearable = is_clearable
-
-        @label_classes = is_label_inline ? "autocomplete-label-inline" : "autocomplete-label-stacked"
+        @placeholder = placeholder
+        @visually_hide_label = visually_hide_label
+        @show_clear_button = show_clear_button
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "auto-complete"
         @system_arguments[:src] = src
         @system_arguments[:for] = list_id
+        @disabled = disabled
+        @invalid = invalid
+        @size = size
+        @full_width = full_width
+        @field_wrap_classes = class_names(
+          "FormControl-fieldWrap",
+          "FormControl-fieldWrap--input",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
+          "FormControl-fieldWrap--disabled": disabled,
+          "FormControl-fieldWrap--invalid": invalid,
+          "FormControl-fieldWrap--input-trailingAction": show_clear_button
+        )
+        @form_group_classes = class_names(
+          "FormGroup",
+          "FormGroup--fullWidth": full_width
+        )
       end
 
       # add `input` and `results` without needing to explicitly call them in the view

data/app/components/primer/clipboard_copy_component.ts

@@ -32,7 +32,7 @@ function showCheck(button: HTMLElement) {
 
 const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
 
-document.addEventListener('clipboard-copy', function ({target}) {
+document.addEventListener('clipboard-copy', function({target}) {
   if (!(target instanceof HTMLElement)) return
   if (!target.hasAttribute('data-view-component')) return
 

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+require_relative "helpers/rubocop_helpers"
+
+module ERBLint
+  module Linters
+    # Replaces calls to `super` with calls to `render_parent`.
+    class SuperInComponentTemplates < Linter
+      include ERBLint::LinterRegistry
+      include Helpers::RubocopHelpers
+
+      def run(processed_source)
+        processed_source.ast.descendants(:erb).each do |erb_node|
+          indicator_node, _, code_node = *erb_node
+          code = code_node.children.first
+          ast = erb_ast(code)
+          next unless ast
+
+          super_call_nodes = find_super_call_nodes(ast)
+          next if super_call_nodes.empty?
+
+          indicator, = *indicator_node
+          indicator ||= ""
+
+          # +2 to account for the leading "<%" characters
+          code_start_pos = erb_node.location.begin_pos + indicator.size + 2
+
+          super_call_nodes.each do |super_call_node|
+            orig_loc = code_node.location
+            super_call_loc = super_call_node.location.expression
+
+            new_loc = orig_loc.with(
+              begin_pos: super_call_loc.begin_pos + code_start_pos,
+              end_pos: super_call_loc.end_pos + code_start_pos
+            )
+
+            add_offense(
+              new_loc,
+              "Avoid calling `super` in component templates. Call `render_parent` instead",
+              "render_parent"
+            )
+          end
+        end
+      end
+
+      def autocorrect(_, offense)
+        return unless offense.context
+
+        lambda do |corrector|
+          corrector.replace(offense.source_range, offense.context)
+        end
+      end
+
+      private
+
+      def find_super_call_nodes(ast)
+        return [ast] if ast.type == :zsuper
+
+        ast.each_child_node.flat_map do |child_ast|
+          find_super_call_nodes(child_ast)
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

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

@@ -33,6 +33,16 @@ module RuboCop
         # }
         #
         DEPRECATED = {
+          is_label_inline: nil,
+          with_icon: nil,
+          is_label_visible: {
+            false => "visually_hide_label: true",
+            true => "visually_hide_label: false"
+          },
+          is_clearable: {
+            false => "show_clear_button: false",
+            true => "show_clear_button: true"
+          },
           bg: {
             white: "bg: :primary",
             gray_light: "bg: :secondary",

data/lib/tasks/docs.rake

@@ -343,11 +343,10 @@ namespace :docs do
     nav_yaml = YAML.load_file(nav_yaml_file)
     adr_entry = {
       "title" => "Architecture decisions",
-      "url" => "/adr",
       "children" => nav_entries.compact
     }
 
-    existing_index = nav_yaml.index { |entry| entry["url"] == "/adr" }
+    existing_index = nav_yaml.index { |entry| entry["title"] == "Architecture decisions" }
     if existing_index
       nav_yaml[existing_index] = adr_entry
     else