primer_view_components 0.1.8 → 0.1.9

data/app/components/primer/focus_group.js

@@ -14,11 +14,11 @@ import '@oddbird/popover-polyfill';
 const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
 const popoverSelector = (() => {
     try {
-        document.querySelector(':open');
-        return ':open';
+        document.querySelector(':popover-open');
+        return ':popover-open';
     }
     catch (_a) {
-        return '.\\:open';
+        return '.\\:popover-open';
     }
 })();
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
@@ -80,28 +80,34 @@ export default class FocusGroupElement extends HTMLElement {
             if (key === 'Up' || key === 'ArrowUp') {
                 if (direction === 'vertical' || direction === 'both') {
                     index -= index < 0 ? 0 : 1;
+                    event.preventDefault();
                 }
             }
             else if (key === 'Down' || key === 'ArrowDown') {
                 if (direction === 'vertical' || direction === 'both') {
                     index += 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Left' || event.key === 'ArrowLeft') {
                 if (direction === 'horizontal' || direction === 'both') {
                     index -= 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Right' || event.key === 'ArrowRight') {
                 if (direction === 'horizontal' || direction === 'both') {
                     index += 1;
+                    event.preventDefault();
                 }
             }
             else if (event.key === 'Home' || event.key === 'PageUp') {
                 index = 0;
+                event.preventDefault();
             }
             else if (event.key === 'End' || event.key === 'PageDown') {
                 index = items.length - 1;
+                event.preventDefault();
             }
             else if (this.mnemonics && printable.test(key)) {
                 const mnemonic = key.toLowerCase();
@@ -126,9 +132,7 @@ export default class FocusGroupElement extends HTMLElement {
                     if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
                         el.showPopover();
                     }
-                    else {
-                        el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
-                    }
+                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
                 } while (el);
             }
             focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();

data/app/components/primer/focus_group.ts

@@ -4,10 +4,10 @@ const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="men
 
 const popoverSelector = (() => {
   try {
-    document.querySelector(':open')
-    return ':open'
+    document.querySelector(':popover-open')
+    return ':popover-open'
   } catch {
-    return '.\\:open'
+    return '.\\:popover-open'
   }
 })()
 
@@ -79,23 +79,29 @@ export default class FocusGroupElement extends HTMLElement {
       if (key === 'Up' || key === 'ArrowUp') {
         if (direction === 'vertical' || direction === 'both') {
           index -= index < 0 ? 0 : 1
+          event.preventDefault()
         }
       } else if (key === 'Down' || key === 'ArrowDown') {
         if (direction === 'vertical' || direction === 'both') {
           index += 1
+          event.preventDefault()
         }
       } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
         if (direction === 'horizontal' || direction === 'both') {
           index -= 1
+          event.preventDefault()
         }
       } else if (event.key === 'Right' || event.key === 'ArrowRight') {
         if (direction === 'horizontal' || direction === 'both') {
           index += 1
+          event.preventDefault()
         }
       } else if (event.key === 'Home' || event.key === 'PageUp') {
         index = 0
+        event.preventDefault()
       } else if (event.key === 'End' || event.key === 'PageDown') {
         index = items.length - 1
+        event.preventDefault()
       } else if (this.mnemonics && printable.test(key)) {
         const mnemonic = key.toLowerCase()
         const offset = index > 0 && getMnemonicFor(event.target as Element) === mnemonic ? index : 0
@@ -115,9 +121,8 @@ export default class FocusGroupElement extends HTMLElement {
           el = el.closest(`[popover]:not(${popoverSelector})`)
           if (el?.popover === 'auto') {
             el.showPopover()
-          } else {
-            el = el?.parentElement || null
           }
+          el = el?.parentElement || null
         } while (el)
       }
       focusEl?.focus()

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

@@ -47,7 +47,7 @@ module Primer
 
         include Primer::ClassNameHelper
 
-        attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control
+        attr_reader :builder, :form, :input_arguments, :label_arguments, :caption, :validation_message, :ids, :form_control, :base_id
 
         alias form_control? form_control
 
@@ -107,11 +107,11 @@ module Primer
 
           @input_arguments[:invalid] = "true" if invalid?
 
-          base_id = SecureRandom.uuid
+          @base_id = SecureRandom.uuid
 
           @ids = {}.tap do |id_map|
-            id_map[:validation] = "validation-#{base_id}" if invalid?
-            id_map[:caption] = "caption-#{base_id}" if caption? || caption_template?
+            id_map[:validation] = "validation-#{@base_id}"
+            id_map[:caption] = "caption-#{@base_id}" if caption? || caption_template?
           end
 
           add_input_aria(:required, true) if required?
@@ -264,10 +264,6 @@ module Primer
           true
         end
 
-        def need_validation_element?
-          invalid?
-        end
-
         def validation_arguments
           {
             class: "FormControl-inlineValidation",

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

@@ -57,10 +57,6 @@ module Primer
           !!@leading_visual
         end
 
-        def need_validation_element?
-          super || auto_check_src.present?
-        end
-
         def validation_arguments
           if auto_check_src.present?
             super.merge(

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

@@ -29,6 +29,10 @@ module Primer
         def type
           :toggle_switch
         end
+
+        def validation_arguments
+          super.merge(role: "alert")
+        end
       end
     end
   end

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

@@ -9,11 +9,9 @@
       <% 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 %>
+    <%= content_tag(:div, **@input.validation_arguments) do %>
+      <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
     <% end %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>

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

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(classes: @classes, **@system_arguments)) do %>
+  <%= content %>
+<% end %>

data/lib/primer/forms/primer_base_component_wrapper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "primer/class_name_helper"
+
+module Primer
+  module Forms
+    # Wraps Primer::BaseComponent.
+    class PrimerBaseComponentWrapper < BaseComponent
+      include Primer::ClassNameHelper
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+
+        # Extract class and classes so they can be passed to Primer::BaseComponent
+        # as classes:. The class: argument is expected by Rails, but Primer expects
+        # classes:, reminiscent of HashWithIndifferentAccess shenanigans.
+        @classes = class_names(
+          system_arguments.delete(:classes),
+          system_arguments.delete(:class)
+        )
+      end
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
-<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
+<%= content_tag("toggle-switch-input", class: "FormControl-toggleSwitchInput", hidden: @input.hidden?) do %>
   <span style="flex-grow: 1">
-    <%= builder.label(@input.name, **@input.label_arguments) do %>
+    <%= render(Primer::Forms::PrimerBaseComponentWrapper.new(tag: :span, **@input.label_arguments)) do %>
       <%= @input.label %>
     <% end %>
 
@@ -18,5 +18,5 @@
       }
     )
   %>
-  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf)) %>
+  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
 <% end %>

data/lib/primer/forms/toggle_switch.rb

@@ -9,8 +9,12 @@ module Primer
       def initialize(input:)
         @input = input
         @input.add_label_classes("FormControl-label")
-        @input.add_input_classes("FormControl-toggleSwitchInput")
-        @input.input_arguments[:hidden] = "hidden" if @input.hidden?
+        @input.label_arguments[:id] = label_id
+        @input.add_input_aria(:labelledby, label_id)
+      end
+
+      def label_id
+        @label_id ||= "label-#{@input.base_id}"
       end
     end
   end

data/lib/primer/forms/toggle_switch_input.js

@@ -1,3 +1,4 @@
+/* eslint-disable custom-elements/expose-class-on-global */
 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);
@@ -8,11 +9,15 @@ import { controller, target } from '@github/catalyst';
 let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
     connectedCallback() {
         this.addEventListener('toggleSwitchError', (event) => {
-            this.validationMessageElement.innerText = event.detail;
+            this.validationMessageElement.textContent = event.detail;
             this.validationElement.removeAttribute('hidden');
         });
         this.addEventListener('toggleSwitchSuccess', () => {
-            this.validationMessageElement.innerText = '';
+            this.validationMessageElement.textContent = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+        this.addEventListener('toggleSwitchLoading', () => {
+            this.validationMessageElement.textContent = '';
             this.validationElement.setAttribute('hidden', 'hidden');
         });
     }

data/lib/primer/forms/toggle_switch_input.ts

@@ -1,3 +1,5 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+
 import {controller, target} from '@github/catalyst'
 
 @controller
@@ -7,12 +9,17 @@ export class ToggleSwitchInputElement extends HTMLElement {
 
   connectedCallback() {
     this.addEventListener('toggleSwitchError', (event: Event) => {
-      this.validationMessageElement.innerText = (event as CustomEvent).detail
+      this.validationMessageElement.textContent = (event as CustomEvent).detail
       this.validationElement.removeAttribute('hidden')
     })
 
     this.addEventListener('toggleSwitchSuccess', () => {
-      this.validationMessageElement.innerText = ''
+      this.validationMessageElement.textContent = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+
+    this.addEventListener('toggleSwitchLoading', () => {
+      this.validationMessageElement.textContent = ''
       this.validationElement.setAttribute('hidden', 'hidden')
     })
   }

data/lib/primer/static/generate_info_arch.rb

@@ -72,6 +72,9 @@ module Primer
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
+              "is_form_component" => docs.manifest_entry.form_component?,
+              "is_published" => docs.manifest_entry.published?,
+              "requires_js" => docs.manifest_entry.requires_js?,
               **arg_data,
               "slots" => slot_docs,
               "methods" => method_docs,

data/lib/primer/view_components/version.rb

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

data/lib/primer/yard/component_manifest.rb

@@ -129,7 +129,7 @@ module Primer
         end
 
         def ref_for(klass)
-          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS[klass])
+          ref_cache[klass] ||= ComponentRef.new(klass, COMPONENTS.fetch(klass, {}))
         end
 
         private

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -10,7 +10,7 @@ module Primer
       PREVIEW_MAP = {
         Primer::Alpha::TextField => [:single_text_field_form, :multi_text_field_form],
         Primer::Alpha::TextArea => [],
-        Primer::Alpha::Select => [:select_list_form],
+        Primer::Alpha::Select => [:select_form],
         Primer::Alpha::MultiInput => [:multi_input_form],
         Primer::Alpha::RadioButton => [:radio_button_with_nested_form],
         Primer::Alpha::RadioButtonGroup => [:radio_button_group_form],
@@ -49,6 +49,12 @@ module Primer
 
         preview_methods = PREVIEW_MAP[component]
         preview_erbs = preview_methods.map do |preview_method|
+          # rubocop:disable Style/IfUnlessModifier
+          if Primer::Forms::FormsPreview.instance_methods.exclude?(preview_method)
+            raise "Preview '#{preview_method}' does not exist in Primer::Forms::FormsPreview"
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
           "<%= embed Primer::Forms::FormsPreview, #{preview_method.inspect} %>"
         end
         # rubocop:enable Lint/UselessAssignment

data/lib/primer/yard/registry.rb

@@ -89,6 +89,10 @@ module Primer
       def a11y_reviewed?
         metadata[:a11y_reviewed]
       end
+
+      def manifest_entry
+        @manifest_entry ||= ComponentManifest.ref_for(component)
+      end
     end
 
     # Wrapper around an instance of YARD::Registry that provides easy access to component

data/previews/primer/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb

@@ -0,0 +1,19 @@
+<div style="width:100%; height: 400px; display: flex; justify-content: center; align-items: center;">
+  <div style="position:relative;">
+    <%= render(Primer::Alpha::Overlay.new(
+      title: title,
+      subtitle: subtitle,
+      role: role,
+      size: size,
+      placement: placement,
+      anchor_align: anchor_align,
+      anchor_side: anchor_side,
+      allow_out_of_bounds: allow_out_of_bounds,
+      visually_hide_title: visually_hide_title,
+    )) do |d| %>
+      <% d.with_header(title: title, size: header_size) %>
+      <% d.with_show_button { button_text } %>
+      <% d.with_body { body_text } %>
+    <% end %>
+  </div>
+</div>

data/previews/primer/alpha/overlay_preview.rb

@@ -132,6 +132,37 @@ module Primer
                                body_text: body_text
                              })
       end
+
+      # @label Middle Of Page with relative container
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def middle_of_page_with_relative_container(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, placement: :anchored, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               role: role,
+                               size: size,
+                               placement: placement,
+                               anchor_align: anchor_align,
+                               anchor_side: anchor_side,
+                               allow_out_of_bounds: allow_out_of_bounds,
+                               visually_hide_title: visually_hide_title,
+                               header_size: header_size,
+                               button_text: button_text,
+                               body_text: body_text
+                             })
+      end
     end
   end
 end

data/static/arguments.json

@@ -1692,7 +1692,13 @@
         "name": "subtitle",
         "type": "String",
         "default": "`nil`",
-        "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
+        "description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
+      },
+      {
+        "name": "overlay_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Provides the id of the overlay element so the close button can close it"
       },
       {
         "name": "size",