Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

write a full headless select box + daisy component #76

Closed
1 of 15 tasks
shairez opened this issue Jan 4, 2023 · 0 comments
Closed
1 of 15 tasks

write a full headless select box + daisy component #76

shairez opened this issue Jan 4, 2023 · 0 comments
Assignees
@gilf @gioboa

Comments

@shairez
Copy link
Contributor

shairez commented Jan 4, 2023 •
edited
Loading

Still missing:

  • Keyboard navigation
  • Verify ARIA is fully implemented by the spec
  • Fix the flickering issue
  • placeholder?
  • Design a theme-daisy implementation
  • Auto placements
  • storybook stories
  • component testing
  • multi-selection
  • disabled items (skip them)
  • arrow
  • hidden inputs for selected value / values (plus enabling selecting a complicated object and not just a primitive value with item[prop])
  • mouse clicking outside the list should close
  • transitions / animations
  • Grouping items
@shairez shairez converted this from a draft issue Jan 4, 2023
@shairez shairez changed the title write a full headless dropdown + daisy component write a full headless select box + daisy component Jan 4, 2023
@gioboa gioboa assigned gilf and gioboa Jan 9, 2023
@gioboa gioboa moved this from Todo to In Progress in Qwik UI Development Jan 9, 2023
gilf added a commit that referenced this issue Jan 9, 2023
@gilf
feat(component): add a headless and daisy select
526d3af 
#76
@gilf gilf mentioned this issue Jan 9, 2023
Closed
7 tasks
shiroinegai added a commit to shiroinegai/qwik-ui that referenced this issue Jan 22, 2023
@shiroinegai
refactor(component): upload alternative implementation
c44a5f8 
Alternative implementation of headless Select component. Includes minimally styled demo.

re qwikifiers#76
shiroinegai added a commit to shiroinegai/qwik-ui that referenced this issue Jan 24, 2023
@shiroinegai
refactor(component): cleaning up unused props & integrating into head…
a2b9d50 
…less page

Component is named AltSelect (alt-select in path)  to avoid naming conflict with existing headless
implementation.

re qwikifiers#76
gioboa pushed a commit that referenced this issue Jan 28, 2023
@shiroinegai @gilf @shairez
add select implementation (#88)
ba67163 
* feat(component): add a headless and daisy select

#76

* feat(component): fix a small missing props spread in daisy implementation

* WIP: reimplemented headless select

Co-authored-by: Gil Fink <gilf@users.noreply.github.com>

* refactor(component): added z-index, trigger change to show selected option, added Daisy impl

* fix(component): add accessibilty for keyboard usage

* refactor(component): upload alternative implementation

Alternative implementation of headless Select component. Includes minimally styled demo.

re #76

* fix(component): prevent style props overwriting functional ListBox styles

* refactor(component): cleaning up unused props & integrating into headless page

Component is named AltSelect (alt-select in path)  to avoid naming conflict with existing headless
implementation.

re #76

* feat(component): closing on clicking outside of Select

Current implementation is kinda hacky

BREAKING CHANGE: Value on option elements are set to 0 despite value prop being successfully passed

bug #88

* fix(component): remove value attribute due to HTML spec incompatibility

Previous commit depended on value attribute on a list item element which should only be storing an
integer value

fix #88

* feat(component): implement arrow keys navigation & tab key behaviour

Tab key behaviour mostly works with the caveat that if the user uses the Tab key to select an option
and the next sibling element has a negative tabindex, it will cycle in an unpredictable manner

re #88

* refactor(component): relocate files to work with routing refactor (#97)

Slight refactoring of alt-select.tsx in preparation to implement Floating UI's autoUpdate function

re #88

* feat(component): add Daisy implementation

re #88

---------

Co-authored-by: gilf <gil.fink@gmail.com>
Co-authored-by: Shai Reznik <shairez@users.noreply.github.com>
Co-authored-by: Gil Fink <gilf@users.noreply.github.com>
@gilf gilf closed this as completed Jan 29, 2023
@github-project-automation github-project-automation bot moved this from In Progress to Done in Qwik UI Development Jan 29, 2023
@gioboa gioboa moved this from Done to Previous in Qwik UI Development Feb 19, 2023
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@gilf gilf

@gioboa gioboa

Labels
None yet
Projects
Qwik UI Development
Archived in project
Milestone
No milestone
Development

No branches or pull requests
3 participants
@shairez @gilf @gioboa