primer_view_components 0.0.83 → 0.0.86

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

@@ -0,0 +1,24 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <label for="<%= @input_id %>" class="<%= @label_classes %>">
+    <% if @is_label_visible %>
+      <%= @label_text %>
+    <% else %>
+      <span class="sr-only"><%= @label_text %></span>
+    <% 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>
+    <% end %>
+    <%= results %>
+  </span>
+  <div id="<%= @list_id %>-feedback" class="sr-only"></div>
+<% end %>

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class AutoComplete
+      # Use `AutoCompleteItem` to list results of an auto-completed search.
+      class Item < Primer::Component
+        status :deprecated
+
+        # @example Default
+        #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
+        #     <% c.results(classes: "custom-class") do %>
+        #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
+        #         Apple
+        #       <% end %>
+        #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
+        #         Orange
+        #       <% end %>
+        #     <% end %>
+        #   <% end %>
+        #
+        # @param value [String] Value of the item.
+        # @param selected [Boolean] Whether the item is selected.
+        # @param disabled [Boolean] Whether the item is disabled.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(value:, selected: false, disabled: false, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :option
+          @system_arguments[:"data-autocomplete-value"] = value
+          @system_arguments[:"aria-selected"] = true if selected
+          @system_arguments[:"aria-disabled"] = true if disabled
+          @system_arguments[:classes] = class_names(
+            "autocomplete-item",
+            system_arguments[:classes],
+            "disabled" => disabled
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
+    # input field. This list is populated by server search results.
+    # @accessibility
+    #   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`.
+    #   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 :deprecated
+
+      # Customizable results list.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :results, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :ul
+        system_arguments[:id] = @list_id
+        system_arguments[:classes] = class_names(
+          "autocomplete-results",
+          system_arguments[:classes]
+        )
+        Primer::BaseComponent.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.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :input, lambda { |**system_arguments|
+        sanitized_args = deny_tag_argument(**system_arguments)
+        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.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :id,
+          "`id` will always be set to @input_id.",
+          **sanitized_args
+        )
+        deny_single_argument(
+          :name,
+          "Set @input_name on the component initializer instead with `input_name`.",
+          **sanitized_args
+        )
+        sanitized_args[:id] = @input_id
+        sanitized_args[:name] = @input_name
+        sanitized_args[:tag] = :input
+        sanitized_args[:autocomplete] = "off"
+        sanitized_args[:type] = :text
+        sanitized_args[:classes] = class_names(
+          "form-control",
+          sanitized_args[:classes]
+        )
+        Primer::BaseComponent.new(**sanitized_args)
+      }
+
+      # @example Default
+      #   @description
+      #     Labels are stacked by default.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--default", list_id: "fruits-popup--default")) %>
+      #
+      # @example With inline label
+      #   @description
+      #     Labels can be inline by setting `is_label_inline: true`. However, labels will always become stacked on smaller screen sizes.
+      #   @code
+      #     <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #
+      # @example With non-visible label
+      #   @description
+      #     A non-visible label may be rendered with `is_label_visible: false`, but it is highly discouraged. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::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)) %>
+      #
+      # @example With icon
+      #   @description
+      #     To display a search icon, set `with_icon` to `true`.
+      #   @code
+      #     <%= render(Primer::Alpha::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::Alpha::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::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
+      #
+      # @example With custom classes for the input
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
+      #     <% c.input(classes: "custom-class") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
+      #     <% c.results(classes: "custom-class") do %>
+      #       <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
+      #         Apple
+      #       <% end %>
+      #       <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
+      #         Orange
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label_text [String] The label of the input.
+      # @param src [String] The route to query.
+      # @param input_id [String] Id of the input element.
+      # @param 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 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)
+        @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 = label_classes(is_label_visible: is_label_visible, is_label_inline: is_label_inline)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = "auto-complete"
+        @system_arguments[:src] = src
+        @system_arguments[:for] = list_id
+      end
+
+      # add `input` and `results` without needing to explicitly call them in the view
+      def before_render
+        results(classes: "") unless results
+        input(classes: "") unless input
+      end
+
+      private
+
+      # Private: determines the label classes based on component configration.
+      #
+      # If the label is not visible, return an empty string.
+      #
+      # @param args [Hash] The component configuration.
+      # @return [String] The label classes.
+      def label_classes(**args)
+        return "" if args[:is_label_visible] == false
+
+        args[:is_label_inline] ? "autocomplete-label-inline" : "autocomplete-label-stacked"
+      end
+    end
+  end
+end

data/app/components/primer/alpha/button_marketing.rb

@@ -63,7 +63,7 @@ module Primer
       end
 
       def call
-        render(Primer::BaseButton.new(**@system_arguments)) { content }
+        render(Primer::Beta::BaseButton.new(**@system_arguments)) { content }
       end
     end
   end

data/app/components/primer/alpha/text_field.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    TextField = Primer::FormComponents.from_input(Primer::Forms::Dsl::TextFieldInput)
+
+    # A text field suitable for use outside a form. For a text field input suitable for use
+    # within an HTML form, see the `Primer::Forms` namespace.
+    class TextField
+      status :alpha
+
+      # @!method initialize
+      #
+      # @example Default
+      #   <%= render(Primer::Alpha::TextField.new(name: :first_name, label: "First name")) %>
+      #
+      # @example With a clear button
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       show_clear_button: true
+      #     )
+      #   ) %>
+      #
+      # @example Full width
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       full_width: true
+      #     )
+      #   ) %>
+      #
+      # @example Disabled
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       disabled: true
+      #     )
+      #   ) %>
+      #
+      # @example Invalid
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       invalid: true
+      #     )
+      #   ) %>
+      #
+      # @example With a leading visual
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       leading_visual: {
+      #         icon: :person
+      #       }
+      #     )
+      #   ) %>
+      #
+      # @example With a caption
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       caption: "What your friends call you"
+      #     )
+      #   ) %>
+      #
+      # @example With a validation message
+      #   <%= render(
+      #     Primer::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       validation_message: "Hmm, that doesn't look right"
+      #     )
+      #   ) %>
+      #
+      # @param name [String] Value for the HTML name attribute.
+      # @param id [String] Value for the HTML id attribute.
+      # @param class [String] A list of CSS classes to add to the input. Exists for compatibility with Rails form builders.
+      # @param classes [String] A list of CSS classes to add to the input. Combined with the `:class` argument.
+      # @param caption [String] Caption text to render below the input.
+      # @param label [String] Label text displayed above the input.
+      # @param visually_hide_label [Boolean] Whether or not to visually hide the label. If `true` the label will be hidden visually but still available to screen readers.
+      # @param size [Symbol] The size of the field. <%= one_of(Primer::Forms::Dsl::Input::SIZE_OPTIONS) %>
+      # @param show_clear_button [Boolean] Whether or not to include a clear button inside the input that clears the input's contents when clicked.
+      # @param clear_button_id [String] The HTML id attribute of the clear button.
+      # @param full_width [Boolean] Controls whether or not the input takes the full width of its container.
+      # @param disabled [Boolean] Whether or not the input should accept keyboard and mouse input.
+      # @param invalid [Boolean] If `true`, renders the input in a visually invalid state.
+      # @param placeholder [String] Placeholder text.
+      # @param inset [Boolean] If `true`, renders the input in a visually inset state.
+      # @param monospace [Boolean] If `true`, uses a monospace font for the input field.
+      # @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon component](https://primer.style/view-components/components/octicon).
+      # @param validation_message [String] A validation message to display beneath the input. Implicitly sets `invalid` to `true`.
+      # @param label_arguments [Hash] System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param block [Proc] Unused.
+    end
+  end
+end

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

@@ -9,11 +9,13 @@ declare class ToolTipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
+    set visibilityHidden(value: true | false);
+    get visibilityHidden(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;
     static observedAttributes: string[];
-    attributeChangedCallback(name: string): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }
 declare global {
     interface Window {

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

@@ -176,6 +176,12 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
+    set visibilityHidden(value) {
+        this.style.visibility = value ? 'hidden' : '';
+    }
+    get visibilityHidden() {
+        return this.style.visibility === 'hidden';
+    }
     connectedCallback() {
         var _a;
         if (!this.shadowRoot) {
@@ -188,7 +194,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `;
         }
-        this.hidden = true;
+        this.visibilityHidden = true;
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
@@ -216,27 +222,28 @@ class ToolTipElement extends HTMLElement {
             return;
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
-            this.hidden = false;
+        if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
+            this.visibilityHidden = false;
         }
         else if (event.type === 'blur') {
-            this.hidden = true;
+            this.visibilityHidden = true;
         }
         else if (event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this) {
-            this.hidden = true;
+            this.visibilityHidden = true;
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hidden) {
-            this.hidden = true;
+        else if (event.type === 'keydown' && event.key === 'Escape' && !this.visibilityHidden) {
+            this.visibilityHidden = true;
         }
     }
-    attributeChangedCallback(name) {
+    attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'id' || name === 'data-type') {
             if (!this.id || !this.control)
                 return;
             if (this.type === 'label') {
                 this.control.setAttribute('aria-labelledby', this.id);
+                this.setAttribute('aria-hidden', 'true');
             }
             else {
                 let describedBy = this.control.getAttribute('aria-describedby');
@@ -244,7 +251,7 @@ class ToolTipElement extends HTMLElement {
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }
-        else if (this.isConnected && name === 'hidden') {
+        else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
             __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
         }
         else if (name === 'data-direction') {
@@ -286,21 +293,21 @@ class ToolTipElement extends HTMLElement {
     }
 }
 _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.hidden) {
+    if (this.visibilityHidden) {
         this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
     }
     else {
         this.classList.add(TOOLTIP_OPEN_CLASS);
         for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
             if (tooltip !== this)
-                tooltip.hidden = true;
+                tooltip.visibilityHidden = true;
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hidden)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.visibilityHidden)
         return;
     const TOOLTIP_OFFSET = 10;
     this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
@@ -344,7 +351,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'style'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

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

@@ -176,6 +176,14 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
+  set visibilityHidden(value: true | false) {
+    this.style.visibility = value ? 'hidden' : ''
+  }
+
+  get visibilityHidden() {
+    return this.style.visibility === 'hidden'
+  }
+
   connectedCallback() {
     if (!this.shadowRoot) {
       const shadow = this.attachShadow({mode: 'open'})
@@ -187,7 +195,7 @@ class ToolTipElement extends HTMLElement {
         <slot></slot>
       `
     }
-    this.hidden = true
+    this.visibilityHidden = true
     this.#allowUpdatePosition = true
 
     if (!this.id) {
@@ -220,46 +228,47 @@ class ToolTipElement extends HTMLElement {
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hidden) {
-      this.hidden = false
+    if ((event.type === 'mouseenter' || event.type === 'focus') && this.visibilityHidden) {
+      this.visibilityHidden = false
     } else if (event.type === 'blur') {
-      this.hidden = true
+      this.visibilityHidden = true
     } else if (
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
     ) {
-      this.hidden = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hidden) {
-      this.hidden = true
+      this.visibilityHidden = true
+    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.visibilityHidden) {
+      this.visibilityHidden = true
     }
   }
 
-  static observedAttributes = ['data-type', 'data-direction', 'id', 'hidden']
+  static observedAttributes = ['data-type', 'data-direction', 'id', 'style']
 
   #update() {
-    if (this.hidden) {
+    if (this.visibilityHidden) {
       this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
     } else {
       this.classList.add(TOOLTIP_OPEN_CLASS)
-      for (const tooltip of this.ownerDocument.querySelectorAll<HTMLElement>(this.tagName)) {
-        if (tooltip !== this) tooltip.hidden = true
+      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
+        if (tooltip !== this) tooltip.visibilityHidden = true
       }
       this.#updatePosition()
     }
   }
 
-  attributeChangedCallback(name: string) {
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     if (name === 'id' || name === 'data-type') {
       if (!this.id || !this.control) return
       if (this.type === 'label') {
         this.control.setAttribute('aria-labelledby', this.id)
+        this.setAttribute('aria-hidden', 'true')
       } else {
         let describedBy = this.control.getAttribute('aria-describedby')
         describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
         this.control.setAttribute('aria-describedby', describedBy)
       }
-    } else if (this.isConnected && name === 'hidden') {
+    } else if (this.isConnected && name === 'style' && (oldValue && oldValue.includes('visibility')) || (newValue && newValue.includes('visibility'))) {
       this.#update()
     } else if (name === 'data-direction') {
       this.classList.remove(...DIRECTION_CLASSES)
@@ -294,7 +303,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.hidden) return
+    if (!this.#allowUpdatePosition || this.visibilityHidden) return
 
     const TOOLTIP_OFFSET = 10
 

data/app/components/primer/alpha/tooltip.rb

@@ -88,8 +88,8 @@ module Primer
 
         @text = text
         @system_arguments = system_arguments
-        @system_arguments[:hidden] = true
         @system_arguments[:tag] = :"tool-tip"
+        @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "visibility: hidden")
         @system_arguments[:for] = for_id
         @system_arguments[:"data-direction"] = fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT).to_s
         @system_arguments[:"data-type"] = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_FALLBACK).to_s

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

@@ -1,24 +1,28 @@
 <%= 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-input-wrap--leadingVisual<% end %>">
+            <span class="FormControl-input-leadingVisualWrap">
+                <%= leading_visual %>
+            </span>
+            <%= 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.html.erb

@@ -0,0 +1,21 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <span class="ActionList-content">
+    <% if leading_visual %>
+        <span class="ActionList-item-visual ActionList-item-visual--leading">
+            <%= leading_visual %>
+        </span>
+    <% end %>
+    <% if description %>
+        <span class="ActionList-item-descriptionWrap <%= description_variant_class %>">
+            <span class="ActionList-item-label"><%= content %></span>
+            <span class="ActionList-item-description"><%= description %></span>
+        </span>
+    <% else %>
+        <span class="ActionList-item-label"><%= content %></span>
+    <% end %>
+   <% if trailing_visual %>
+        <span class="ActionList-item-visual ActionList-item-visual--trailing">
+            <%= trailing_visual %>
+        </span>
+    <% end %>
+<% end %>