diff --git a/.changeset/quiet-papayas-sparkle.md b/.changeset/quiet-papayas-sparkle.md new file mode 100644 index 0000000000..46364f467c --- /dev/null +++ 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/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png index a9f4eda881..4ce766d649 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_beta_truncate/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png index a9f4eda881..4ce766d649 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_deprecated_truncate/focused.png differ diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb index a8473e6bc2..82b897d8fc 100644 --- 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 index fe51dcaa82..5839822adf 100644 --- 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 index d11d7612c3..265e163d3e 100644 --- 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 \ No newline at end of file diff --git a/lib/tasks/custom_utilities.yml b/lib/tasks/custom_utilities.yml index 78c40b5ff9..63862cb09c 100644 --- 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 index 598459a928..d07865a58d 100644 --- 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