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>
primer · Dec 4, 2024 · 0bbb076 · 0bbb076
1 parent 8891e8b
commit 0bbb076
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 2 deletions.
diff --git a/.changeset/quiet-papayas-sparkle.md b/.changeset/quiet-papayas-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix issue causing AutoComplete elements to overflow their container
diff --git a/...pshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png b/...pshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png
diff --git a/....test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png b/....test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png
diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb
@@ -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

diff --git a/app/components/primer/beta/auto_complete.rb b/app/components/primer/beta/auto_complete.rb
@@ -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,

diff --git a/lib/primer/classify/utilities.yml b/lib/primer/classify/utilities.yml
@@ -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
diff --git a/lib/tasks/custom_utilities.yml b/lib/tasks/custom_utilities.yml
@@ -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
diff --git a/test/components/beta/auto_complete_test.rb b/test/components/beta/auto_complete_test.rb
@@ -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