Fix issue causing AutoComplete elements to overflow their container (#3217)

Co-authored-by: Marie Lucca <francinelucca@github.com>
Co-authored-by: francinelucca <francinelucca@users.noreply.github.com>
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: camertron

.changeset/quiet-papayas-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix issue causing AutoComplete elements to overflow their container

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png

@@ -88,9 +88,9 @@ def render_overflow_menu?
       def before_render
         @system_arguments[:tag] = render_overflow_menu? ? :"action-bar" : :div
         @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "overflow-visible": !render_overflow_menu?
+          @system_arguments[:classes]
         )
+        @system_arguments[:overflow] = :visible if render_overflow_menu?
         content
       end
     end

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png

@@ -44,6 +44,7 @@ class AutoComplete < Primer::Component
         system_arguments[:"allow-out-of-bounds"] = ""
         system_arguments[:id] = @list_id
         system_arguments[:popover] = ""
+        system_arguments[:overflow_y] = :auto
         system_arguments[:classes] = class_names(
           "ActionListWrap ActionListWrap--inset",
           @overlay_classes,

app/components/primer/alpha/action_bar.rb

@@ -1877,3 +1877,66 @@
   - flex-md-shrink-0
   - flex-lg-shrink-0
   - flex-xl-shrink-0
+:overflow:
+  :auto:
+  - overflow-auto
+  - overflow-sm-auto
+  - overflow-lg-auto
+  - overflow-xl-auto
+  :hidden:
+  - overflow-hidden
+  - overflow-sm-hidden
+  - overflow-lg-hidden
+  - overflow-xl-hidden
+  :scroll:
+  - overflow-scroll
+  - overflow-sm-scroll
+  - overflow-lg-scroll
+  - overflow-xl-scroll
+  :visible:
+  - overflow-visible
+  - overflow-sm-visible
+  - overflow-lg-visible
+  - overflow-xl-visible
+:overflow_x:
+  :auto:
+  - overflow-x-auto
+  - overflow-sm-x-auto
+  - overflow-lg-x-auto
+  - overflow-xl-x-auto
+  :hidden:
+  - overflow-x-hidden
+  - overflow-sm-x-hidden
+  - overflow-lg-x-hidden
+  - overflow-xl-x-hidden
+  :scroll:
+  - overflow-x-scroll
+  - overflow-sm-x-scroll
+  - overflow-lg-x-scroll
+  - overflow-xl-x-scroll
+  :visible:
+  - overflow-x-visible
+  - overflow-sm-x-visible
+  - overflow-lg-x-visible
+  - overflow-xl-x-visible
+:overflow_y:
+  :auto:
+  - overflow-y-auto
+  - overflow-sm-y-auto
+  - overflow-lg-y-auto
+  - overflow-xl-y-auto
+  :hidden:
+  - overflow-y-hidden
+  - overflow-sm-y-hidden
+  - overflow-lg-y-hidden
+  - overflow-xl-y-hidden
+  :scroll:
+  - overflow-y-scroll
+  - overflow-sm-y-scroll
+  - overflow-lg-y-scroll
+  - overflow-xl-y-scroll
+  :visible:
+  - overflow-y-visible
+  - overflow-sm-y-visible
+  - overflow-lg-y-visible
+  - overflow-xl-y-visible

app/components/primer/beta/auto_complete.rb

@@ -370,3 +370,66 @@
   - flex-md-shrink-0
   - flex-lg-shrink-0
   - flex-xl-shrink-0
+:overflow:
+  :auto:
+  - overflow-auto
+  - overflow-sm-auto
+  - overflow-lg-auto
+  - overflow-xl-auto
+  :hidden:
+  - overflow-hidden
+  - overflow-sm-hidden
+  - overflow-lg-hidden
+  - overflow-xl-hidden
+  :scroll:
+  - overflow-scroll
+  - overflow-sm-scroll
+  - overflow-lg-scroll
+  - overflow-xl-scroll
+  :visible:
+  - overflow-visible
+  - overflow-sm-visible
+  - overflow-lg-visible
+  - overflow-xl-visible
+:overflow_x:
+  :auto:
+  - overflow-x-auto
+  - overflow-sm-x-auto
+  - overflow-lg-x-auto
+  - overflow-xl-x-auto
+  :hidden:
+  - overflow-x-hidden
+  - overflow-sm-x-hidden
+  - overflow-lg-x-hidden
+  - overflow-xl-x-hidden
+  :scroll:
+  - overflow-x-scroll
+  - overflow-sm-x-scroll
+  - overflow-lg-x-scroll
+  - overflow-xl-x-scroll
+  :visible:
+  - overflow-x-visible
+  - overflow-sm-x-visible
+  - overflow-lg-x-visible
+  - overflow-xl-x-visible
+:overflow_y:
+  :auto:
+  - overflow-y-auto
+  - overflow-sm-y-auto
+  - overflow-lg-y-auto
+  - overflow-xl-y-auto
+  :hidden:
+  - overflow-y-hidden
+  - overflow-sm-y-hidden
+  - overflow-lg-y-hidden
+  - overflow-xl-y-hidden
+  :scroll:
+  - overflow-y-scroll
+  - overflow-sm-y-scroll
+  - overflow-lg-y-scroll
+  - overflow-xl-y-scroll
+  :visible:
+  - overflow-y-visible
+  - overflow-sm-y-visible
+  - overflow-lg-y-visible
+  - overflow-xl-y-visible

lib/primer/classify/utilities.yml

@@ -138,4 +138,10 @@ def test_denies_name_on_input_slot
       assert_includes(err.message, "Set @input_name on the component initializer instead with `input_name`.")
     end
   end
+
+  def test_results_container_scrollable
+    render_inline Primer::Beta::AutoComplete.new(label_text: "Fruits", src: "/url", input_id: "test-input", list_id: "my-list-id")
+
+    assert_selector("anchored-position.overflow-y-auto")
+  end
 end