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

Add New Combobox Component #66

Merged
merged 10 commits into from
Aug 4, 2024
Merged

Add New Combobox Component #66

merged 10 commits into from
Aug 4, 2024

Conversation

cirdes
Copy link
Collaborator

@cirdes cirdes commented Jul 20, 2024

Description

This PR introduces a new Combobox component to the PhlexUI library. The Combobox component enhances user interaction by allowing them to select from a list of options using filters. This component was inspired by the Shadcn Combobox component and try to adheres to W3C standards for web accessibility.

Features

  • Inspired by Shadcn Combobox (reference).
  • Implements W3C standards for web accessibility.
  • Follows ARIA roles for combobox and listbox to ensure better accessibility.

References

The development of this component was guided by several references to ensure best practices and compliance with accessibility standards:

  1. Open UI Combobox Research
  2. Open UI Combobox Explainer
  3. MDN Web Docs - ARIA Combobox Role
  4. MDN Web Docs - ARIA Listbox Role
  5. Shadcn Command Component
  6. W3C ARIA Combobox Example
  7. Deque Labs Combobo Demo
  8. Hotwire Combobox
  9. Sarah Higley's Article on Comboboxes
  10. Stimulus Components

Libraries and Components Consulted

To ensure comprehensive functionality and usability, several existing libraries and components were reviewed:

  1. Ant Design Select Component
  2. Atlassian Design Select Component
  3. Semantic UI Dropdown Component
  4. Fluent UI Combobox Component

Screenshots

2024-07-20 17 21 36

Additional Notes

The PhlexUI Combobox and the Shadcn Combobox are available to be tested on: https://phlexui-playground.fly.dev/

@cirdes cirdes requested a review from SethHorsley July 29, 2024 21:03
@cirdes
Copy link
Collaborator Author

cirdes commented Jul 29, 2024

@iseth, I have moved combobox.rb to combobox/combobox.rb as you requested!

@SethHorsley SethHorsley changed the base branch from main to v1 July 31, 2024 19:36
@SethHorsley
Copy link
Collaborator

We need to make a new RBUI module to start the migration to the new gem name.

Copy link
Collaborator

@SethHorsley SethHorsley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome!! Love the new rbui and js syntax

@SethHorsley SethHorsley merged commit 43e9bf8 into v1 Aug 4, 2024
4 checks passed
@SethHorsley SethHorsley deleted the cirdes/add-combobox branch October 31, 2024 16:52
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.

2 participants