Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autocomplete design updates #1189

Merged
merged 108 commits into from
Jul 28, 2022
Merged

Autocomplete design updates #1189

merged 108 commits into from
Jul 28, 2022

Conversation

langermank
Copy link
Contributor

@langermank langermank commented Jun 8, 2022

These markup and CSS changes bring the Autocomplete component in closer alignment with PRC and design.

  • Uses Overlay and ActionList for the picker styles
  • Uses updated FormControl styles to align with Rails forms and PRC.
  • Adds support for more features like leading and trailing visuals

In order to safely roll out these changes, this PR moves the current Autocomplete and corresponding Item back to alpha status, also deprecating them. When this release rolls out to GitHub, all implementations of Autocomplete::Beta will be moved back to Autocomplete::Alpha. Feature teams will have the ability to safely update to Beta on their own timeline.

Upgrading from Alpha to Beta

Most of these param changes are auto-fixable when upgrading to beta. Refactoring AutoComplete::Beta::Item is more nuanced.

For Hubbers only: please use this draft PR as a reference for upgrading to Beta.

AutoComplete param changes and additions

old new default
is_label_visible visually_hide_label false
with_icon slot <% c.leading_visual_icon(icon: :search) %>
is_clearable show_clear_button false
n/a placeholder
n/a disabled
n/a size: :small, :medium, :large :medium
n/a inset false
n/a monospace false
n/a full_width false

AutoComplete::Item param changes and additions

old new default
leading_visual_icon slot <% c.leading_visual_icon(icon: :search) %>
leading_visual_avatar slot <% c.leading_visual_avatar(src: "") %>
trailing_visual_icon slot <% c.trailing_visual_icon(icon: :search) %>
description slot <% c.description { "Description" } %>
description_variant :inline, :block :block

AutoComplete::Item aria-selected view:

CleanShot.2022-07-27.at.17.57.16.mp4

Closes: https://github.com/github/primer/issues/1133

langermank and others added 30 commits May 20, 2022 23:07
Co-authored-by: Jon Rohan <[email protected]>
@jonrohan jonrohan temporarily deployed to github-pages July 27, 2022 22:55 Inactive
@jonrohan jonrohan temporarily deployed to github-pages July 27, 2022 23:01 Inactive
@jonrohan jonrohan temporarily deployed to github-pages July 27, 2022 23:10 Inactive
@jonrohan jonrohan temporarily deployed to github-pages July 27, 2022 23:18 Inactive
@jonrohan jonrohan temporarily deployed to github-pages July 27, 2022 23:36 Inactive
@primer-css primer-css temporarily deployed to github-pages July 28, 2022 00:19 Inactive
@primer-css primer-css temporarily deployed to github-pages July 28, 2022 00:40 Inactive
@primer-css primer-css temporarily deployed to github-pages July 28, 2022 01:01 Inactive
@langermank langermank temporarily deployed to github-pages July 28, 2022 17:09 Inactive
@jonrohan jonrohan merged commit ec3af74 into main Jul 28, 2022
@jonrohan jonrohan deleted the autocomplete-design-updates branch July 28, 2022 17:34
@primer-css primer-css mentioned this pull request Jul 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants