primer_view_components 0.0.113 → 0.0.115

data/lib/primer/forms/builder.rb

@@ -2,6 +2,29 @@
 
 require "primer/classify"
 
+# See: https://github.com/rails/rails/pull/46666
+ActionView::Helpers::Tags::Base.prepend(
+  Module.new do
+    def initialize(*args, **kwargs, &block)
+      super
+
+      return if defined?(@generate_error_markup)
+
+      @generate_error_markup = @options.delete(:generate_error_markup) { true }
+    end
+
+    private
+
+    def error_wrapping(html_tag)
+      return html_tag unless @generate_error_markup
+
+      # :nocov:
+      super
+      # :nocov:
+    end
+  end
+)
+
 module Primer
   module Forms
     # :nodoc:
@@ -10,32 +33,49 @@ module Primer
 
       UTILITY_KEYS = Primer::Classify::Utilities::UTILITIES.keys.freeze
 
-      def label(*args, **options, &block)
-        super(*args, classify(options), &block)
+      def label(method, text = nil, **options, &block)
+        super(method, text, classify(options).merge(generate_error_markup: false), &block)
       end
 
       def check_box(method, options = {}, checked_value = 1, unchecked_value = 0, &block)
-        super(method, classify(options), checked_value, unchecked_value, &block)
+        super(
+          method,
+          classify(options).merge(generate_error_markup: false),
+          checked_value,
+          unchecked_value,
+          &block
+        )
       end
 
       def radio_button(*args, **options, &block)
-        super(*args, classify(options), &block)
+        super(*args, classify(options).merge(generate_error_markup: false), &block)
       end
 
-      def select(*args, **options, &block)
-        super(*args, classify(options), &block)
+      def select(method, choices = nil, options = {}, html_options = {}, &block)
+        super(method, choices, options.merge(generate_error_markup: false), classify(html_options), &block)
       end
 
       def text_field(*args, **options, &block)
-        super(*args, classify(options), &block)
+        super(*args, classify(options).merge(generate_error_markup: false), &block)
       end
 
       def text_area(*args, **options, &block)
-        super(*args, classify(options), &block)
+        super(*args, classify(options).merge(generate_error_markup: false), &block)
       end
 
       private
 
+      # This method does the following:
+      #
+      # 1. Runs Primer's classify routine to convert entries like mb: 1 to mb-1.
+      # 2. Runs classify on both options[:class] and options[:classes]. The first
+      #    is expected by Rails/HTML while the second is specific to Primer.
+      # 3. Combines options[:class] and options[:classes] into options[:class]
+      #    so the options hash can be easily passed to Rails form builder methods.
+      # 4. Sets generate_error_markup: false, which, in combination with the
+      #    monkeypatch at the top of this file, skips rendering any markup around
+      #    invalid fields.
+      #
       def classify(options)
         options[:classes] = class_names(options.delete(:class), options[:classes])
         options.merge!(Primer::Classify.call(options))

data/lib/primer/forms/check_box.html.erb

@@ -4,7 +4,9 @@
     <%= builder.label(@input.name, **@input.label_arguments) do %>
       <%= @input.label %>
     <% end %>
-    <%= render(Caption.new(input: @input)) %>
+    <% if @input.form_control? %>
+      <%= render(Caption.new(input: @input)) %>
+    <% end %>
   </span>
 <% end %>
 <% if @input.nested_form_block %>

data/lib/primer/forms/dsl/input.rb

@@ -16,7 +16,9 @@ module Primer
 
         include Primer::ClassNameHelper
 
-        attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids
+        attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control
+
+        alias form_control? form_control
 
         def initialize(builder:, form:, **system_arguments)
           @builder = builder
@@ -41,6 +43,10 @@ module Primer
           @full_width = @input_arguments.delete(:full_width)
           @size = @input_arguments.delete(:size)
 
+          # Whether or not to wrap the component in a FormControl, which renders a
+          # label above and validation message beneath the input.
+          @form_control = @input_arguments.delete(:form_control) { true }
+
           @input_arguments[:invalid] = "true" if invalid?
 
           base_id = SecureRandom.hex[0..5]
@@ -200,6 +206,22 @@ module Primer
           true
         end
 
+        def need_validation_element?
+          invalid?
+        end
+
+        def validation_arguments
+          {
+            class: "FormControl-inlineValidation",
+            id: validation_id,
+            hidden: valid?
+          }
+        end
+
+        def validation_message_arguments
+          {}
+        end
+
         private
 
         def input_data

data/lib/primer/forms/dsl/multi_input.rb

@@ -34,19 +34,16 @@ module Primer
           check_one_input_visible!
         end
 
-        def decorate_options(name: nil, **options)
-          check_name!(name) if name
-          new_options = { name: name || @name, label: nil, **options }
+        def decorate_options(name:, **options)
+          new_options = { name: @name, label: nil, form_control: false, **options }
+          new_options[:data] ||= {}
+          new_options[:data][:name] = name
+          new_options[:data][:targets] = "primer-multi-input.fields"
           new_options[:id] = nil if options[:hidden]
+          new_options[:disabled] = true if options[:hidden] # disable to avoid submitting to server
           new_options
         end
 
-        def check_name!(name)
-          return if name == @name
-
-          raise ArgumentError, "Inputs inside a `multi' block must all have the same name. Expected '#{@name}', got '#{name}'."
-        end
-
         def check_one_input_visible!
           return if inputs.count { |input| !input.hidden? } <= 1
 

data/lib/primer/forms/dsl/select_list_input.rb

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class SelectListInput < Input
-        SELECT_ARGUMENTS = %i[multiple disabled include_blank prompt].freeze
+        SELECT_ARGUMENTS = %i[multiple include_blank prompt].freeze
 
         # :nodoc:
         class Option

data/lib/primer/forms/dsl/text_field_input.rb

@@ -8,7 +8,7 @@ module Primer
         attr_reader(
           *%i[
             name label show_clear_button leading_visual clear_button_id
-            visually_hide_label inset monospace field_wrap_classes
+            visually_hide_label inset monospace field_wrap_classes auto_check_src
           ]
         )
 
@@ -21,6 +21,7 @@ module Primer
           @clear_button_id = system_arguments.delete(:clear_button_id)
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
+          @auto_check_src = system_arguments.delete(:auto_check_src)
 
           super(**system_arguments)
 
@@ -29,6 +30,7 @@ module Primer
             Primer::Forms::Dsl::Input::SIZE_MAPPINGS[size]
           )
 
+          add_input_data(:target, "primer-text-field.inputElement") if auto_check_src.present?
           add_input_classes("FormControl-inset") if inset?
           add_input_classes("FormControl-monospace") if monospace?
         end
@@ -52,6 +54,34 @@ module Primer
         def leading_visual?
           !!@leading_visual
         end
+
+        def need_validation_element?
+          super || auto_check_src.present?
+        end
+
+        def validation_arguments
+          if auto_check_src.present?
+            super.merge(
+              data: {
+                target: "primer-text-field.validationElement"
+              }
+            )
+          else
+            super
+          end
+        end
+
+        def validation_message_arguments
+          if auto_check_src.present?
+            super.merge(
+              data: {
+                target: "primer-text-field.validationMessageElement"
+              }
+            )
+          else
+            super
+          end
+        end
       end
     end
   end

data/lib/primer/forms/form_control.html.erb

@@ -1,18 +1,22 @@
-<%= content_tag(:div, style: "flex-grow: 1", **@form_group_arguments) do %>
-  <% if @input.label %>
-    <%= builder.label(@input.name, **@input.label_arguments) do %>
-      <%= @input.label %>
-      <% if @input.required? %>
-        <span aria-hidden="true">*</span>
+<% if @input.form_control? %>
+  <%= content_tag(:div, **@form_group_arguments) do %>
+    <% if @input.label %>
+      <%= builder.label(@input.name, **@input.label_arguments) do %>
+        <%= @input.label %>
+        <% if @input.required? %>
+          <span aria-hidden="true">*</span>
+        <% end %>
       <% end %>
     <% end %>
+    <%= content %>
+    <% if @input.need_validation_element? %>
+      <%= content_tag(:div, **@input.validation_arguments) do %>
+        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+        <%= content_tag(:span, @input.validation_messages.first, **@input.validation_message_arguments) %>
+      <% end %>
+    <% end %>
+    <%= render(Caption.new(input: @input)) %>
   <% end %>
+<% else %>
   <%= content %>
-  <% if @input.invalid? && @input.validation_messages.present? %>
-    <div class="FormControl-inlineValidation" id="<%= @input.validation_id %>">
-      <%= render(Primer::OcticonComponent.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
-      <span><%= @input.validation_messages.first %></span>
-    </div>
-  <% end %>
-  <%= render(Caption.new(input: @input)) %>
 <% end %>

data/lib/primer/forms/form_control.rb

@@ -12,6 +12,8 @@ module Primer
         @form_group_arguments = {
           class: class_names(
             "FormControl",
+            "flex-1",
+            "width-full",
             "FormControl--fullWidth" => @input.full_width?
           )
         }

data/lib/primer/forms/multi.html.erb

@@ -1,3 +1,7 @@
-<% @input.inputs.each do |child_input| %>
-  <%= render(child_input.to_component) %>
+<%= render(FormControl.new(input: @input)) do %>
+  <primer-multi-input data-name="<%= @input.name %>">
+    <% @input.inputs.each do |child_input| %>
+      <%= render(child_input.to_component) %>
+    <% end %>
+  </primer-multi-input>
 <% end %>

data/lib/primer/forms/primer_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class PrimerMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        PrimerMultiInputElement: typeof PrimerMultiInputElement;
+    }
+}

data/lib/primer/forms/primer_multi_input.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable custom-elements/expose-class-on-global */
+import { controller, targets } from '@github/catalyst';
+let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
+    activateField(name) {
+        var _a, _b;
+        const fieldWithName = this.findField(name);
+        if (!fieldWithName)
+            return;
+        for (const field of this.fields) {
+            if (field === fieldWithName)
+                continue;
+            field.setAttribute('disabled', 'disabled');
+            field.setAttribute('hidden', 'hidden');
+            (_a = field.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'hidden');
+        }
+        fieldWithName.removeAttribute('disabled');
+        fieldWithName.removeAttribute('hidden');
+        (_b = fieldWithName.parentElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+    }
+    findField(name) {
+        for (const field of this.fields) {
+            if (field.getAttribute('data-name') === name) {
+                return field;
+            }
+        }
+        return null;
+    }
+};
+__decorate([
+    targets
+], PrimerMultiInputElement.prototype, "fields", void 0);
+PrimerMultiInputElement = __decorate([
+    controller
+], PrimerMultiInputElement);
+export { PrimerMultiInputElement };
+if (!window.customElements.get('primer-multi-input')) {
+    Object.assign(window, { PrimerMultiInputElement });
+    window.customElements.define('primer-multi-input', PrimerMultiInputElement);
+}

data/lib/primer/forms/primer_multi_input.ts

@@ -0,0 +1,46 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+import {controller, targets} from '@github/catalyst'
+
+@controller
+export class PrimerMultiInputElement extends HTMLElement {
+  @targets fields: HTMLInputElement[]
+
+  activateField(name: string) {
+    const fieldWithName = this.findField(name)
+    if (!fieldWithName) return
+
+    for (const field of this.fields) {
+      if (field === fieldWithName) continue
+
+      field.setAttribute('disabled', 'disabled')
+      field.setAttribute('hidden', 'hidden')
+
+      field.parentElement?.setAttribute('hidden', 'hidden')
+    }
+
+    fieldWithName.removeAttribute('disabled')
+    fieldWithName.removeAttribute('hidden')
+    fieldWithName.parentElement?.removeAttribute('hidden')
+  }
+
+  private findField(name: string): HTMLElement | null {
+    for (const field of this.fields) {
+      if (field.getAttribute('data-name') === name) {
+        return field
+      }
+    }
+
+    return null
+  }
+}
+
+declare global {
+  interface Window {
+    PrimerMultiInputElement: typeof PrimerMultiInputElement
+  }
+}
+
+if (!window.customElements.get('primer-multi-input')) {
+  Object.assign(window, {PrimerMultiInputElement})
+  window.customElements.define('primer-multi-input', PrimerMultiInputElement)
+}

data/lib/primer/forms/primer_text_field.d.ts

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

data/lib/primer/forms/primer_text_field.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _PrimerTextFieldElement_abortController;
+import '@github/auto-check-element';
+import { controller, target } from '@github/catalyst';
+let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextFieldElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
+        this.inputElement.addEventListener('auto-check-success', () => { this.clearError(); }, { signal });
+        this.inputElement.addEventListener('auto-check-error', (event) => {
+            event.detail.response.text().then((error_message) => { this.setError(error_message); });
+        }, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.innerText = '';
+    }
+    setError(message) {
+        this.validationMessageElement.innerText = message;
+        this.validationElement.hidden = false;
+        this.inputElement.setAttribute('invalid', 'true');
+    }
+};
+_PrimerTextFieldElement_abortController = new WeakMap();
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+PrimerTextFieldElement = __decorate([
+    controller
+], PrimerTextFieldElement);

data/lib/primer/forms/primer_text_field.ts

@@ -0,0 +1,48 @@
+import '@github/auto-check-element'
+import {controller, target} from '@github/catalyst'
+
+@controller
+class PrimerTextFieldElement extends HTMLElement {
+  @target inputElement: HTMLInputElement
+  @target validationElement: HTMLElement
+  @target validationMessageElement: HTMLElement
+
+  #abortController: AbortController | null
+
+  connectedCallback(): void {
+    this.#abortController?.abort()
+    const {signal} = (this.#abortController = new AbortController())
+
+    this.inputElement.addEventListener(
+      'auto-check-success',
+      () => { this.clearError() },
+      {signal}
+    )
+
+    this.inputElement.addEventListener(
+      'auto-check-error',
+      (event: any) => {
+        event.detail.response.text().then(
+          (error_message: string) => { this.setError(error_message) }
+        )
+      },
+      {signal}
+    )
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  clearError(): void {
+    this.inputElement.removeAttribute('invalid')
+    this.validationElement.hidden = true
+    this.validationMessageElement.innerText = ''
+  }
+
+  setError(message: string): void {
+    this.validationMessageElement.innerText = message
+    this.validationElement.hidden = false
+    this.inputElement.setAttribute('invalid', 'true')
+  }
+}

data/lib/primer/forms/radio_button.html.erb

@@ -4,7 +4,9 @@
     <%= builder.label(@input.name, value: @input.value, **@input.label_arguments) do %>
       <%= @input.label %>
     <% end %>
-    <%= render(Caption.new(input: @input)) %>
+    <% if @input.form_control? %>
+      <%= render(Caption.new(input: @input)) %>
+    <% end %>
   </span>
 <% end %>
 <% if @input.nested_form_block %>

data/lib/primer/forms/text_field.html.erb

@@ -1,19 +1,19 @@
-<%= render(FormControl.new(input: @input)) do %>
-  <% if @input.leading_visual || @input.show_clear_button? %>
+<%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "primer-text-field") do %>
+  <%= render(FormControl.new(input: @input)) do %>
     <%= content_tag(:div, **@field_wrap_arguments) do %>
       <% if @input.leading_visual %>
         <span class="FormControl-input-leadingVisualWrap">
-          <%= render(Primer::OcticonComponent.new(**@input.leading_visual)) %>
+          <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
         </span>
       <% end %>
-      <%= builder.text_field(@input.name, **@input.input_arguments) %>
+      <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>
+        <%= builder.text_field(@input.name, **@input.input_arguments) %>
+      <% end %>
       <% if @input.show_clear_button? %>
-        <button id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear">
-          <%= render(Primer::OcticonComponent.new(icon: :"x-circle-fill")) %>
+        <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear">
+          <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
         </button>
       <% end %>
     <% end %>
-  <% else %>
-    <%= builder.text_field(@input.name, **@input.input_arguments) %>
   <% end %>
 <% end %>

data/lib/primer/forms/text_field.rb

@@ -20,6 +20,17 @@ module Primer
           hidden: @input.hidden?
         }
       end
+
+      def auto_check_authenticity_token
+        return @auto_check_authenticity_token if defined?(@auto_check_authenticity_token)
+
+        @auto_check_authenticity_token =
+          if @input.auto_check_src
+            @view_context.form_authenticity_token(
+              form_options: { method: :post, action: @input.auto_check_src }
+            )
+          end
+      end
     end
   end
 end

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

@@ -40,7 +40,7 @@ module ERBLint
         if ast.method_name == :primer_octicon || ast.method_name == :octicon
           octicon_kwargs = ast.arguments[1]
           icon = icon(ast.arguments)
-        elsif ast.method_name == :render && code.include?("Primer::OcticonComponent")
+        elsif ast.method_name == :render && code.include?("Primer::Beta::Octicon")
           octicon_kwargs = ast.arguments.first.arguments.last
           icon = icon(ast.arguments.first.arguments)
         else

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 113
+      PATCH = 115
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -37,7 +37,7 @@ namespace :docs do
       Primer::HellipButton,
       Primer::Alpha::Image,
       Primer::LocalTime,
-      Primer::OcticonSymbolsComponent,
+      Primer::Alpha::OcticonSymbols,
       Primer::Alpha::ImageCrop,
       Primer::IconButton,
       Primer::Beta::AutoComplete,
@@ -67,14 +67,14 @@ namespace :docs do
       Primer::Beta::Label,
       Primer::LayoutComponent,
       Primer::Beta::Link,
-      Primer::Markdown,
-      Primer::MenuComponent,
+      Primer::Beta::Markdown,
+      Primer::Alpha::Menu,
       Primer::Navigation::TabComponent,
-      Primer::OcticonComponent,
+      Primer::Beta::Octicon,
       Primer::Beta::Popover,
       Primer::Beta::ProgressBar,
       Primer::StateComponent,
-      Primer::SpinnerComponent,
+      Primer::Beta::Spinner,
       Primer::SubheadComponent,
       Primer::TabContainerComponent,
       Primer::Beta::Text,
@@ -515,7 +515,7 @@ namespace :docs do
   def lookbook_url(component)
     path = component.name.underscore.gsub("_component", "")
 
-    "https://primer.style/view-components/lookbook/inspect/#{path}/default/"
+    "https://primer.style/view-components/lookbook/inspect/#{path}_preview/default/"
   end
 
   def preview_exists?(component)

data/lib/tasks/helpers/ast_traverser.rb

@@ -54,7 +54,7 @@ class AstTraverser
     end
 
     # Octicon is the only component that accepts positional arguments.
-    res[:icon] = args.first.source if name == "Primer::OcticonComponent" && args.size > 1
+    res[:icon] = args.first.source if name == "Primer::Beta::Octicon" && args.size > 1
 
     res
   end

data/previews/primer/alpha/action_list_preview.rb

@@ -169,7 +169,7 @@ module Primer
         tooltip: false
       )
         list = Primer::Alpha::ActionList.new(aria: { label: "Action List" })
-        list.item(
+        list.with_item(
           label: label,
           truncate_label: truncate_label,
           href: href,