primer_view_components 0.19.0 → 0.20.1

data/app/components/primer/beta/flash.css.map

@@ -1 +1 @@
-{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uEAA6C,CAC7C,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6EAAgD,CAChD,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,yEAA8C,CAC9C,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n\n  & .octicon {\n    color: var(--fgColor-accent);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  margin-top: calc(var(--base-size-4) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-attention-muted);\n  border-color: var(--borderColor-attention-muted);\n\n  & .octicon {\n    color: var(--fgColor-attention);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-danger-muted);\n  border-color: var(--borderColor-danger-muted);\n\n  & .octicon {\n    color: var(--fgColor-danger);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--fgColor-default);\n  background-color: var(--bgColor-success-muted);\n  border-color: var(--borderColor-success-muted);\n\n  & .octicon {\n    color: var(--fgColor-success);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--bgColor-attention-muted);\n}\n"]}

data/app/components/primer/beta/flash.pcss

@@ -10,7 +10,7 @@
 
   /* Default color */
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  background-color: var(--bgColor-accent-muted);
   border-color: var(--borderColor-accent-muted);
 
   & .octicon {
@@ -78,7 +78,7 @@
 
 .flash-warn:not(.Banner) {
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+  background-color: var(--bgColor-attention-muted);
   border-color: var(--borderColor-attention-muted);
 
   & .octicon {
@@ -88,7 +88,7 @@
 
 .flash-error:not(.Banner) {
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+  background-color: var(--bgColor-danger-muted);
   border-color: var(--borderColor-danger-muted);
 
   & .octicon {
@@ -98,7 +98,7 @@
 
 .flash-success:not(.Banner) {
   color: var(--fgColor-default);
-  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+  background-color: var(--bgColor-success-muted);
   border-color: var(--borderColor-success-muted);
 
   & .octicon {

data/app/components/primer/beta/nav_list.d.ts

@@ -1,6 +1,9 @@
 export declare class NavListElement extends HTMLElement {
     #private;
     items: HTMLElement[];
+    topLevelList: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     selectItemById(itemId: string | null): boolean;
     selectItemByHref(href: string | null): boolean;
     selectItemByCurrentLocation(): boolean;

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

@@ -1,7 +1,7 @@
 <%= render(Primer::BaseComponent.new(tag: :nav, **@system_arguments)) do %>
   <%= heading %>
   <nav-list>
-    <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap")) do %>
+    <%= render(Primer::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul, classes: "ActionListWrap", data: { target: "nav-list.topLevelList" })) do %>
       <% items.each_with_index do |item, index| %>
         <% if index > 0 && render_divider_between?(item, items[index - 1]) %>
           <%= render(Primer::Alpha::ActionList::Divider.new) %>

data/app/components/primer/beta/nav_list.js

@@ -4,18 +4,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 __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 __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 _NavListElement_instances, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
+var _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
 /* eslint-disable custom-elements/expose-class-on-global */
-import { controller, targets } from '@github/catalyst';
+import { controller, target, targets } from '@github/catalyst';
+import { ActionListTruncationObserver } from '../alpha/action_list';
 let NavListElement = class NavListElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _NavListElement_instances.add(this);
+        _NavListElement_truncationObserver.set(this, void 0);
+    }
+    connectedCallback() {
+        // groups are wrapped in <action-list>, which handles resizing on its own
+        if (this.topLevelList) {
+            __classPrivateFieldSet(this, _NavListElement_truncationObserver, new ActionListTruncationObserver(this.topLevelList), "f");
+        }
+    }
+    disconnectedCallback() {
+        if (this.topLevelList) {
+            __classPrivateFieldGet(this, _NavListElement_truncationObserver, "f").unobserve(this.topLevelList);
+        }
     }
     selectItemById(itemId) {
         if (!itemId)
@@ -100,6 +119,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         e.stopPropagation();
     }
 };
+_NavListElement_truncationObserver = new WeakMap();
 _NavListElement_instances = new WeakSet();
 _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     // First we compare the selected link to data-item-id for each nav item
@@ -164,6 +184,9 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
 __decorate([
     targets
 ], NavListElement.prototype, "items", void 0);
+__decorate([
+    target
+], NavListElement.prototype, "topLevelList", void 0);
 NavListElement = __decorate([
     controller
 ], NavListElement);

data/app/components/primer/beta/nav_list.ts

@@ -1,9 +1,26 @@
 /* eslint-disable custom-elements/expose-class-on-global */
-import {controller, targets} from '@github/catalyst'
+import {controller, target, targets} from '@github/catalyst'
+import {ActionListTruncationObserver} from '../alpha/action_list'
 
 @controller
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
+  @target topLevelList: HTMLElement
+
+  #truncationObserver: ActionListTruncationObserver
+
+  connectedCallback() {
+    // groups are wrapped in <action-list>, which handles resizing on its own
+    if (this.topLevelList) {
+      this.#truncationObserver = new ActionListTruncationObserver(this.topLevelList)
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.topLevelList) {
+      this.#truncationObserver.unobserve(this.topLevelList)
+    }
+  }
 
   selectItemById(itemId: string | null): boolean {
     if (!itemId) return false

data/app/components/primer/beta/nav_list_group_element.js

@@ -9,12 +9,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
+var _NavListGroupElement_instances, _NavListGroupElement_parseHTML, _NavListGroupElement_truncateObserver;
 import { controller, target, targets } from '@github/catalyst';
+import { ActionListTruncationObserver } from '../alpha/action_list';
 let NavListGroupElement = class NavListGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _NavListGroupElement_instances.add(this);
+        _NavListGroupElement_truncateObserver.set(this, new ActionListTruncationObserver(this));
     }
     connectedCallback() {
         this.setShowMoreItemState();
@@ -87,6 +89,7 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
         }
     }
 };
+_NavListGroupElement_truncateObserver = new WeakMap();
 _NavListGroupElement_instances = new WeakSet();
 _NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
     const template = document.createElement('template');

data/app/components/primer/beta/nav_list_group_element.ts

@@ -1,4 +1,5 @@
 import {controller, target, targets} from '@github/catalyst'
+import {ActionListTruncationObserver} from '../alpha/action_list'
 
 @controller
 export class NavListGroupElement extends HTMLElement {
@@ -86,6 +87,8 @@ export class NavListGroupElement extends HTMLElement {
     template.innerHTML = html
     return document.importNode(template.content, true)
   }
+
+  #truncateObserver = new ActionListTruncationObserver(this)
 }
 
 declare global {

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

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.js

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.ts

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element'
+import './alpha/action_list'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'

data/app/forms/auto_complete_form.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "../../previews/primer/url_helpers"
+
+# :nodoc:
+class AutoCompleteForm < ApplicationForm
+  form do |auto_complete_form|
+    auto_complete_form.auto_complete(
+      name: :fruit,
+      label: "Fruit",
+      caption: "Please enter your favorite fruit",
+      src: Primer::UrlHelpers.autocomplete_index_path,
+      validation_message: "Something went wrong"
+    )
+
+    auto_complete_form.submit(label: "Submit", name: :submit)
+  end
+end

data/app/forms/select_form.rb

@@ -8,5 +8,15 @@ class SelectForm < ApplicationForm
       city_list.option(label: "Bellevue", value: "bellevue")
       city_list.option(label: "Seattle", value: "seattle")
     end
+
+    select_form.select_list(name: "been", label: "Places you've been", caption: "Select all that apply", multiple: true, include_hidden: false) do |been_list|
+      been_list.option(label: "Lima, Peru", value: "lima")
+      been_list.option(label: "Tokyo, Japan", value: "tokyo")
+      been_list.option(label: "Reykjavík, Iceland", value: "reykjavik")
+      been_list.option(label: "Chiang Mai, Thailand", value: "chiang_mai")
+      been_list.option(label: "Queenstown, New Zealand", value: "queenstown")
+    end
+
+    select_form.submit(name: :submit, label: "Submit")
   end
 end

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

@@ -0,0 +1,6 @@
+<%= render(Primer::Beta::AutoComplete.new(**auto_complete_arguments)) do |autocomplete| %>
+  <% @input.block.call(autocomplete) if @input.block %>
+  <% autocomplete.with_input(**input_arguments) %>
+<% end %>
+<%= render(ValidationMessage.new(input: @input)) %>
+<%= render(Caption.new(input: @input)) %>

data/lib/primer/forms/auto_complete.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class AutoComplete < BaseComponent
+      ARGUMENT_TYPES = %i(keyreq key).freeze
+
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.merge_input_arguments!(text_field_attributes.deep_symbolize_keys)
+      end
+
+      def self.auto_complete_argument_names
+        @auto_complete_argument_names ||=
+          Primer::Beta::AutoComplete.instance_method(:initialize)
+            .parameters
+            .filter_map { |(type, param_name)| next param_name if ARGUMENT_TYPES.include?(type) }
+      end
+
+      private
+
+      def all_input_arguments
+        @all_input_arguments ||= @input.input_arguments.deep_dup.tap do |args|
+          # rails uses :class but PVC wants :classes
+          args[:classes] = class_names(
+            args[:classes],
+            args.delete(:class)
+          )
+        end
+      end
+
+      def auto_complete_arguments
+        all_args = all_input_arguments
+        all_args
+          .slice(*self.class.auto_complete_argument_names)
+          .merge(
+            input_name: all_args[:name],
+            input_id: all_args[:id],
+            label_text: @input.label,
+            list_id: "#{all_args[:id]}-list"
+          )
+      end
+
+      def input_arguments
+        all_input_arguments.except(*self.class.auto_complete_argument_names, :id, :name)
+      end
+
+      def text_field_attributes
+        builder.text_field_attributes(@input.name).except("size", "value")
+      end
+    end
+  end
+end

data/lib/primer/forms/builder.rb

@@ -27,6 +27,21 @@ ActionView::Helpers::Tags::Base.prepend(
 
 module Primer
   module Forms
+    module Tags
+      # :nodoc:
+      class TextField < ::ActionView::Helpers::Tags::TextField
+        def attributes
+          render
+        end
+
+        private
+
+        def tag(_name, options)
+          options
+        end
+      end
+    end
+
     # :nodoc:
     class Builder < ActionView::Helpers::FormBuilder
       alias primer_fields_for fields_for
@@ -57,6 +72,10 @@ module Primer
         super(*args, classify(options).merge(generate_error_markup: false), &block)
       end
 
+      def text_field_attributes(method, options = {})
+        Tags::TextField.new(@object_name, method, @template, options).attributes
+      end
+
       def text_area(*args, **options, &block)
         super(*args, classify(options).merge(generate_error_markup: false), &block)
       end

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

@@ -1,5 +1,5 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <fieldset>
+<div class="FormControl-check-group-wrap">
+  <%= content_tag(:fieldset, **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>
@@ -10,11 +10,11 @@
         <%= render(check_box.to_component) %>
       <% end %>
     <% end %>
-  </fieldset>
+  <% end %>
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>
-<% end %>
+</div>

data/lib/primer/forms/check_box_group.rb

@@ -8,10 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-
         @input.add_label_classes("FormControl-label", "mb-2")
-        @input.add_input_classes("FormControl-check-group-wrap")
-
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class AutoCompleteInput < Input
+        attr_reader :name, :label, :block
+
+        def initialize(name:, label:, **system_arguments, &block)
+          @name = name
+          @label = label
+          @block = block
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          AutoComplete.new(input: self)
+        end
+
+        def type
+          :autocomplete
+        end
+
+        # The AutoComplete Primer component does not allow auto-focusing
+        def focusable?
+          false
+        end
+      end
+    end
+  end
+end

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

@@ -25,6 +25,14 @@ module Primer
           :check_box_group
         end
 
+        def focusable?
+          true
+        end
+
+        def autofocus!
+          @check_boxes.first&.autofocus!
+        end
+
         def check_box(**system_arguments, &block)
           args = {
             name: @name,

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

@@ -31,7 +31,7 @@ module Primer
         #   @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
 
         # @!macro [new] form_full_width_arguments
-        #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container.
+        #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
         # @!macro [new] form_system_arguments
         #   @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
@@ -56,7 +56,9 @@ module Primer
           @form = form
 
           @input_arguments = system_arguments
+          @input_arguments.delete(:id) unless @input_arguments[:id].present?
           @label_arguments = @input_arguments.delete(:label_arguments) || {}
+          @label_arguments[:for] = id if id.present?
 
           @label_arguments[:class] = class_names(
             @label_arguments[:class],
@@ -71,7 +73,7 @@ module Primer
           @caption = @input_arguments.delete(:caption)
           @validation_message = @input_arguments.delete(:validation_message)
           @invalid = @input_arguments.delete(:invalid)
-          @full_width = @input_arguments.delete(:full_width)
+          @full_width = @input_arguments.delete(:full_width) { true }
           @size = @input_arguments.delete(:size)
 
           # If scope_name_to_model is false, the name of the input for eg. `my_field`
@@ -240,6 +242,10 @@ module Primer
           input_arguments[:autofocus] = true
         end
 
+        def id
+          @input_arguments[:id]
+        end
+
         # :nocov:
         def name
           raise_for_abstract_method!(__method__)

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

@@ -68,6 +68,15 @@ module Primer
           add_input TextFieldInput.new(builder: builder, form: form, **options, &block)
         end
 
+        # Adds an autocomplete text field to this form.
+        #
+        # @param options [Hash] The options accepted by the autocomplete input (see forms docs).
+        # @param block [Proc] A block that will be yielded a reference to the input object so it can be customized.
+        def auto_complete(**options, &block)
+          options = decorate_options(**options)
+          add_input AutoCompleteInput.new(builder: builder, form: form, **options, &block)
+        end
+
         # Adds a text area to this form.
         #
         # @param options [Hash] The options accepted by the text area input (see forms docs).

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

@@ -25,6 +25,14 @@ module Primer
           :radio_button_group
         end
 
+        def autofocus!
+          @radio_buttons.first&.autofocus!
+        end
+
+        def focusable?
+          true
+        end
+
         def radio_button(**system_arguments, &block)
           @radio_buttons << RadioButtonInput.new(
             builder: @builder, form: @form, name: @name, disabled: disabled?,

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

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class SelectInput < Input
-        SELECT_ARGUMENTS = %i[multiple include_blank prompt].freeze
+        SELECT_ARGUMENTS = %i[multiple include_blank include_hidden prompt].freeze
 
         # :nodoc:
         class Option
@@ -38,6 +38,10 @@ module Primer
           yield(self) if block_given?
         end
 
+        def multiple?
+          @select_arguments.fetch(:multiple, false)
+        end
+
         def option(**system_arguments)
           @options << Option.new(**system_arguments)
         end

data/lib/primer/forms/form_control.rb

@@ -16,8 +16,7 @@ module Primer
             system_arguments[:class],
             system_arguments[:classes],
             "FormControl",
-            "width-full",
-            "FormControl--fullWidth" => @input.full_width?
+            "width-full FormControl--fullWidth" => @input.full_width?
           )
         }
 

data/lib/primer/forms/primer_text_field.js

@@ -29,7 +29,7 @@ class PrimerTextFieldElement extends HTMLElement {
     connectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', async (event) => {
+        this.addEventListener('auto-check-success', async (event) => {
             const message = await event.detail.response.text();
             if (message && message.length > 0) {
                 this.setSuccess(message);
@@ -38,7 +38,7 @@ class PrimerTextFieldElement extends HTMLElement {
                 this.clearError();
             }
         }, { signal });
-        this.inputElement.addEventListener('auto-check-error', async (event) => {
+        this.addEventListener('auto-check-error', async (event) => {
             const errorMessage = await event.detail.response.text();
             this.setError(errorMessage);
         }, { signal });

data/lib/primer/forms/primer_text_field.ts

@@ -17,7 +17,7 @@ class PrimerTextFieldElement extends HTMLElement {
     this.#abortController?.abort()
     const {signal} = (this.#abortController = new AbortController())
 
-    this.inputElement.addEventListener(
+    this.addEventListener(
       'auto-check-success',
       async (event: any) => {
         const message = await event.detail.response.text()
@@ -30,7 +30,7 @@ class PrimerTextFieldElement extends HTMLElement {
       {signal},
     )
 
-    this.inputElement.addEventListener(
+    this.addEventListener(
       'auto-check-error',
       async (event: any) => {
         const errorMessage = await event.detail.response.text()

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

@@ -1,5 +1,5 @@
-<%= content_tag(:div, **@input.input_arguments) do %>
-  <fieldset>
+<div class="FormControl-radio-group-wrap">
+  <%= content_tag(:fieldset, **@input.input_arguments) do %>
     <% if @input.label %>
       <%= content_tag(:legend, **@input.label_arguments) do %>
         <%= @input.label %>
@@ -10,11 +10,11 @@
         <%= render(radio_button.to_component) %>
       <% end %>
     <% end %>
-  </fieldset>
+  <% end %>
   <div class="mt-2">
     <%= render(ValidationMessage.new(input: @input)) %>
   </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>
-<% end %>
+</div>

data/lib/primer/forms/radio_button_group.rb

@@ -8,10 +8,7 @@ module Primer
 
       def initialize(input:)
         @input = input
-
         @input.add_label_classes("FormControl-label", "mb-2")
-        @input.add_input_classes("FormControl-radio-group-wrap")
-
         Primer::Forms::Utils.classify(@input.input_arguments)
       end
     end

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

@@ -3,3 +3,4 @@
     <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %>
   <% end %>
 <% end %>
+

data/lib/primer/forms/select.rb

@@ -8,14 +8,18 @@ module Primer
 
       def initialize(input:)
         @input = input
-        @input.add_input_classes(
-          "FormControl-select",
-          Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
-        )
+        @input.add_input_classes("FormControl-select")
+
+        if !input.multiple?
+          @input.add_input_classes(
+            Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
+          )
+        end
 
         @field_wrap_arguments = {
           class: "FormControl-select-wrap",
-          hidden: @input.hidden?
+          hidden: @input.hidden?,
+          data: { multiple: input.multiple? }
         }
       end