primer_view_components 0.0.69 → 0.0.70

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

@@ -1,19 +1,18 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+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, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+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 _abortController, _align, _side, _allowUpdatePosition;
+var _TooltipElement_instances, _TooltipElement_abortController, _TooltipElement_align, _TooltipElement_side, _TooltipElement_allowUpdatePosition, _TooltipElement_adjustedAnchorAlignment, _TooltipElement_updatePosition;
 import { getAnchoredPosition } from '@primer/behaviors';
 const TOOLTIP_OPEN_CLASS = 'tooltip-open';
+const TOOLTIP_ARROW_EDGE_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -27,10 +26,11 @@ const DIRECTION_CLASSES = [
 class TooltipElement extends HTMLElement {
     constructor() {
         super();
-        _abortController.set(this, void 0);
-        _align.set(this, 'center');
-        _side.set(this, 'outside-bottom');
-        _allowUpdatePosition.set(this, false);
+        _TooltipElement_instances.add(this);
+        _TooltipElement_abortController.set(this, void 0);
+        _TooltipElement_align.set(this, 'center');
+        _TooltipElement_side.set(this, 'outside-bottom');
+        _TooltipElement_allowUpdatePosition.set(this, false);
         const shadow = this.attachShadow({ mode: 'open' });
         shadow.innerHTML = `
       <style>
@@ -60,7 +60,8 @@ class TooltipElement extends HTMLElement {
         opacity: 0;
         max-width: 250px;
         word-wrap: break-word;
-        white-space: normal
+        white-space: normal;
+        width: max-content;
       }
       
       :host:before{
@@ -99,12 +100,16 @@ class TooltipElement extends HTMLElement {
         animation-delay: .4s
       }
       
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+      }
+
       :host(.tooltip-s):before,
       :host(.tooltip-se):before,
       :host(.tooltip-sw):before {
-        right: 50%;
         bottom: 100%;
-        margin-right: -6px;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -118,8 +123,7 @@ class TooltipElement extends HTMLElement {
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
-        right: 50%;
-        margin-right: -6px;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -131,13 +135,14 @@ class TooltipElement extends HTMLElement {
       
       :host(.tooltip-se):before,
       :host(.tooltip-ne):before {
-        right: auto
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
       
       :host(.tooltip-sw):before,
       :host(.tooltip-nw):before {
         right: 0;
-        margin-right: 6px
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
       
       :host(.tooltip-w):before {
@@ -182,16 +187,16 @@ class TooltipElement extends HTMLElement {
     connectedCallback() {
         var _a;
         this.hidden = true;
-        __classPrivateFieldSet(this, _allowUpdatePosition, true);
+        __classPrivateFieldSet(this, _TooltipElement_allowUpdatePosition, true, "f");
         if (!this.id) {
             this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
         }
         if (!this.control)
             return;
         this.setAttribute('role', 'tooltip');
-        (_a = __classPrivateFieldGet(this, _abortController)) === null || _a === void 0 ? void 0 : _a.abort();
-        __classPrivateFieldSet(this, _abortController, new AbortController());
-        const { signal } = __classPrivateFieldGet(this, _abortController);
+        (_a = __classPrivateFieldGet(this, _TooltipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _TooltipElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _TooltipElement_abortController, "f");
         this.addEventListener('mouseleave', this, { signal });
         this.control.addEventListener('mouseenter', this, { signal });
         this.control.addEventListener('mouseleave', this, { signal });
@@ -201,7 +206,7 @@ class TooltipElement extends HTMLElement {
     }
     disconnectedCallback() {
         var _a;
-        (_a = __classPrivateFieldGet(this, _abortController)) === null || _a === void 0 ? void 0 : _a.abort();
+        (_a = __classPrivateFieldGet(this, _TooltipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
     handleEvent(event) {
         if (!this.control)
@@ -246,134 +251,129 @@ class TooltipElement extends HTMLElement {
                     if (tooltip !== this)
                         tooltip.hidden = true;
                 }
-                this..call(this);
+                __classPrivateFieldGet(this, _TooltipElement_instances, "m", _TooltipElement_updatePosition).call(this);
             }
         }
         else if (name === 'data-direction') {
             this.classList.remove(...DIRECTION_CLASSES);
             const direction = this.direction;
             if (direction === 'n') {
-                __classPrivateFieldSet(this, _align, 'center');
-                __classPrivateFieldSet(this, _side, 'outside-top');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-top', "f");
             }
             else if (direction === 'ne') {
-                __classPrivateFieldSet(this, _align, 'start');
-                __classPrivateFieldSet(this, _side, 'outside-top');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'start', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-top', "f");
             }
             else if (direction === 'e') {
-                __classPrivateFieldSet(this, _align, 'center');
-                __classPrivateFieldSet(this, _side, 'outside-right');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-right', "f");
             }
             else if (direction === 'se') {
-                __classPrivateFieldSet(this, _align, 'start');
-                __classPrivateFieldSet(this, _side, 'outside-bottom');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'start', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-bottom', "f");
             }
             else if (direction === 's') {
-                __classPrivateFieldSet(this, _align, 'center');
-                __classPrivateFieldSet(this, _side, 'outside-bottom');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-bottom', "f");
             }
             else if (direction === 'sw') {
-                __classPrivateFieldSet(this, _align, 'end');
-                __classPrivateFieldSet(this, _side, 'outside-bottom');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'end', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-bottom', "f");
             }
             else if (direction === 'w') {
-                __classPrivateFieldSet(this, _align, 'center');
-                __classPrivateFieldSet(this, _side, 'outside-left');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'center', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-left', "f");
             }
             else if (direction === 'nw') {
-                __classPrivateFieldSet(this, _align, 'end');
-                __classPrivateFieldSet(this, _side, 'outside-top');
+                __classPrivateFieldSet(this, _TooltipElement_align, 'end', "f");
+                __classPrivateFieldSet(this, _TooltipElement_side, 'outside-top', "f");
             }
         }
     }
-    // `getAnchoredPosition` may calibrate `anchoredSide` but does not recalibrate `align`.
-    //  Therefore, we need to determine which `align` is best based on the initial `getAnchoredPosition` calcluation.
-    //  Related: https://github.com/primer/behaviors/issues/63
-    (anchorSide) {
-        if (!this.control)
-            return;
-        const tooltipPosition = this.getBoundingClientRect();
-        const targetPosition = this.control.getBoundingClientRect();
-        const tooltipWidth = tooltipPosition.width;
-        const tooltipCenter = tooltipPosition.left + tooltipWidth / 2;
-        const targetCenter = targetPosition.x + targetPosition.width / 2;
-        if (Math.abs(tooltipCenter - targetCenter) < 2 || anchorSide === 'outside-left' || anchorSide === 'outside-right') {
-            return 'center';
-        }
-        else if (tooltipPosition.left === targetPosition.left) {
+}
+_TooltipElement_abortController = new WeakMap(), _TooltipElement_align = new WeakMap(), _TooltipElement_side = new WeakMap(), _TooltipElement_allowUpdatePosition = new WeakMap(), _TooltipElement_instances = new WeakSet(), _TooltipElement_adjustedAnchorAlignment = function _TooltipElement_adjustedAnchorAlignment(anchorSide) {
+    if (!this.control)
+        return;
+    const tooltipPosition = this.getBoundingClientRect();
+    const targetPosition = this.control.getBoundingClientRect();
+    const tooltipWidth = tooltipPosition.width;
+    const tooltipCenter = tooltipPosition.left + tooltipWidth / 2;
+    const targetCenter = targetPosition.x + targetPosition.width / 2;
+    if (Math.abs(tooltipCenter - targetCenter) < 2 || anchorSide === 'outside-left' || anchorSide === 'outside-right') {
+        return 'center';
+    }
+    else if (tooltipPosition.left === targetPosition.left) {
+        return 'start';
+    }
+    else if (tooltipPosition.right === targetPosition.right) {
+        return 'end';
+    }
+    else if (tooltipCenter < targetCenter) {
+        if (tooltipPosition.left === 0)
             return 'start';
-        }
-        else if (tooltipPosition.right === targetPosition.right) {
+        return 'end';
+    }
+    else {
+        if (tooltipPosition.right === 0)
             return 'end';
+        return 'start';
+    }
+}, _TooltipElement_updatePosition = function _TooltipElement_updatePosition() {
+    if (!this.control)
+        return;
+    if (!__classPrivateFieldGet(this, _TooltipElement_allowUpdatePosition, "f") || this.hidden)
+        return;
+    const TOOLTIP_OFFSET = 10;
+    this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
+    let position = getAnchoredPosition(this, this.control, {
+        side: __classPrivateFieldGet(this, _TooltipElement_side, "f"),
+        align: __classPrivateFieldGet(this, _TooltipElement_align, "f"),
+        anchorOffset: TOOLTIP_OFFSET
+    });
+    let anchorSide = position.anchorSide;
+    // We need to set tooltip position in order to determine ideal align.
+    this.style.top = `${position.top}px`;
+    this.style.left = `${position.left}px`;
+    let direction = 's';
+    const align = __classPrivateFieldGet(this, _TooltipElement_instances, "m", _TooltipElement_adjustedAnchorAlignment).call(this, anchorSide);
+    if (!align)
+        return;
+    this.style.left = `0px`; // Reset tooltip position again to ensure accurate width in `getAnchoredPosition`
+    position = getAnchoredPosition(this, this.control, { side: anchorSide, align, anchorOffset: TOOLTIP_OFFSET });
+    anchorSide = position.anchorSide;
+    this.style.top = `${position.top}px`;
+    this.style.left = `${position.left}px`;
+    if (anchorSide === 'outside-left') {
+        direction = 'w';
+    }
+    else if (anchorSide === 'outside-right') {
+        direction = 'e';
+    }
+    else if (anchorSide === 'outside-top') {
+        if (align === 'center') {
+            direction = 'n';
         }
-        else if (tooltipCenter < targetCenter) {
-            if (tooltipPosition.left === 0)
-                return 'start';
-            return 'end';
+        else if (align === 'start') {
+            direction = 'ne';
         }
         else {
-            if (tooltipPosition.right === 0)
-                return 'end';
-            return 'start';
+            direction = 'nw';
         }
     }
-    () {
-        if (!this.control)
-            return;
-        if (!__classPrivateFieldGet(this, _allowUpdatePosition) || this.hidden)
-            return;
-        const TOOLTIP_OFFSET = 10;
-        this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
-        let position = getAnchoredPosition(this, this.control, {
-            side: __classPrivateFieldGet(this, _side),
-            align: __classPrivateFieldGet(this, _align),
-            anchorOffset: TOOLTIP_OFFSET
-        });
-        let anchorSide = position.anchorSide;
-        // We need to set tooltip position in order to determine ideal align.
-        this.style.top = `${position.top}px`;
-        this.style.left = `${position.left}px`;
-        let direction = 's';
-        const align = this..call(this, anchorSide);
-        if (!align)
-            return;
-        this.style.left = `0px`; // Reset tooltip position again to ensure accurate width in `getAnchoredPosition`
-        position = getAnchoredPosition(this, this.control, { side: anchorSide, align, anchorOffset: TOOLTIP_OFFSET });
-        anchorSide = position.anchorSide;
-        this.style.top = `${position.top}px`;
-        this.style.left = `${position.left}px`;
-        if (anchorSide === 'outside-left') {
-            direction = 'w';
+    else {
+        if (align === 'center') {
+            direction = 's';
         }
-        else if (anchorSide === 'outside-right') {
-            direction = 'e';
-        }
-        else if (anchorSide === 'outside-top') {
-            if (align === 'center') {
-                direction = 'n';
-            }
-            else if (align === 'start') {
-                direction = 'ne';
-            }
-            else {
-                direction = 'nw';
-            }
+        else if (align === 'start') {
+            direction = 'se';
         }
         else {
-            if (align === 'center') {
-                direction = 's';
-            }
-            else if (align === 'start') {
-                direction = 'se';
-            }
-            else {
-                direction = 'sw';
-            }
+            direction = 'sw';
         }
-        this.classList.add(`tooltip-${direction}`);
     }
-}
-_abortController = new WeakMap(), _align = new WeakMap(), _side = new WeakMap(), _allowUpdatePosition = new WeakMap();
+    this.classList.add(`tooltip-${direction}`);
+};
 TooltipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'hidden'];
 if (!window.customElements.get('tool-tip')) {
     window.TooltipElement = TooltipElement;

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

@@ -70,6 +70,14 @@ module Primer
       #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Northwest", type: :description, text: "This is a Northwest-facing tooltip and is responsive.", direction: :nw)) %>
       #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) { "Southwest" } %>
       #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Southwest", type: :description, text: "This is a Southwest-facing tooltip and is responsive.", direction: :sw)) %>
+      # @example With relative parent
+      #   @description
+      #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
+      #   @code
+      #     <span style="position: relative;">
+      #       <%= render(Primer::ButtonComponent.new(id: "test-button", scheme: :primary)) { "Test" } %>
+      #       <%= render(Primer::Alpha::Tooltip.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
+      #     </span>
       # @param for_id [String] The ID of the element that the tooltip should be attached to.
       # @param type [Symbol] <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
       # @param direction [Symbol] <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>

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

@@ -2,6 +2,7 @@ import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import {getAnchoredPosition} from '@primer/behaviors'
 
 const TOOLTIP_OPEN_CLASS = 'tooltip-open'
+const TOOLTIP_ARROW_EDGE_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -38,7 +39,8 @@ class TooltipElement extends HTMLElement {
         opacity: 0;
         max-width: 250px;
         word-wrap: break-word;
-        white-space: normal
+        white-space: normal;
+        width: max-content;
       }
       
       :host:before{
@@ -77,12 +79,16 @@ class TooltipElement extends HTMLElement {
         animation-delay: .4s
       }
       
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+      }
+
       :host(.tooltip-s):before,
       :host(.tooltip-se):before,
       :host(.tooltip-sw):before {
-        right: 50%;
         bottom: 100%;
-        margin-right: -6px;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -96,8 +102,7 @@ class TooltipElement extends HTMLElement {
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
-        right: 50%;
-        margin-right: -6px;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
       
@@ -109,13 +114,14 @@ class TooltipElement extends HTMLElement {
       
       :host(.tooltip-se):before,
       :host(.tooltip-ne):before {
-        right: auto
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
       
       :host(.tooltip-sw):before,
       :host(.tooltip-nw):before {
         right: 0;
-        margin-right: 6px
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
       
       :host(.tooltip-w):before {

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

@@ -1,14 +1,24 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <label for="<%= @input_id %>">
+  <label for="<%= @input_id %>" class="<%= @label_classes %>">
     <% if @is_label_visible %>
       <%= @label_text %>
     <% else %>
       <span class="sr-only"><%= @label_text %></span>
     <% end %>
-    <% if icon.present? %>
-      <%= icon %>
-    <% end %>
   </label>
-  <input id="<%= @input_id %>" name="<%= @input_id %>" type="text" class="form-control" autocomplete="off">
-  <%= results %>
+  <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/beta/auto_complete.rb

@@ -13,10 +13,7 @@ module Primer
     #   be used unless there is compelling reason not to. A placeholder is not a label.
     class AutoComplete < Primer::Component
       status :beta
-
-      # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
-      renders_one :icon, Primer::OcticonComponent
-
+      #
       # Customizable results list.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -32,14 +29,79 @@ module Primer
         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
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) %>
+      #   @description
+      #     Labels are stacked by default.
+      #   @code
+      #     <%= render(Primer::Beta::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::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", is_label_inline: true, input_id: "fruits-input--inline-label", list_id: "fruits-popup--inline-label")) %>
+      #
+      # @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::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--non-visible-label", list_id: "fruits-popup--non-visible-label", is_label_visible: false)) %>
+      #
+      # @example With icon
+      #   @description
+      #     To display a search icon, set `with_icon` to `true`.
+      #   @code
+      #     <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon", input_id: "fruits-input--icon", with_icon: true)) %>
+      #
+      # @example With icon and non-visible label
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup--icon-no-label", input_id: "fruits-input--icon-no-label", with_icon: true, is_label_visible: false)) %>
       #
-      # @example With Non-Visible Label
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", is_label_visible: false, position: :relative)) %>
+      # @example With clear button
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
       #
-      # @example With Custom Classes for the Results
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-3", position: :relative)) do |c| %>
+      # @example With custom classes for the input
+      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
+      #     <% c.input(classes: "custom-class") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Beta::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::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
       #         Apple
@@ -50,36 +112,36 @@ module Primer
       #     <% end %>
       #   <% end %>
       #
-      # @example With Icon
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
-      #     <% c.icon(icon: :search) %>
-      #   <% end %>
-      #
-      # @example With Icon and Non-Visible Label
-      #   <%= render(Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", list_id: "fruits-popup-5", input_id: "fruits-input-5", is_label_visible: false, position: :relative)) do |c| %>
-      #     <% c.icon(icon: :search) %>
-      #   <% 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:, is_label_visible: true, **system_arguments)
+      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 = is_label_inline ? "autocomplete-label-inline" : "autocomplete-label-stacked"
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "auto-complete"
         @system_arguments[:src] = src
         @system_arguments[:for] = list_id
       end
 
-      # add `results` without needing to explicitly call them in the view
+      # 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
     end
   end

data/app/components/primer/button_component.html.erb

@@ -1,3 +1,4 @@
 <%= render Primer::BaseButton.new(**@system_arguments) do -%>
   <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+  <%= tooltip %>
 <% end -%>