Comments (7)
So... first thing first we should have more test for the current Dialog. It's just too risk to revamp something without test :D
from moai.
Hi @lqt93 , what is the difference between current implementation and Headless UI? (pros and cons,..)
from moai.
Currently, Moai's dialog has issue with focusing on its content (see #249). It is complicated to handle the focus event in a dialog, not only the container of a dialog can be focused on, it also needs to support developer to choose what to focus on when dialog open. Headless UI is fully supported focus management and other things like accessibility, transitions, etc, which we haven't provided in our current Dialog yet. If we use it, we could focus on the design and apis to bring good experiment for our developers.
from moai.
@thien-do Could you please give more reasons for why we should implement with Headless UI?
from moai.
Currently, Moai's dialog has issue with focusing on its content (see #249). It is complicated to handle the focus event in a dialog, not only the container of a dialog can be focused on, it also needs to support developer to choose what to focus on when dialog open. Headless UI is fully supported focus management and other things like accessibility, transitions, etc, which we haven't provided in our current Dialog yet. If we use it, we could focus on the design and apis to bring good experiment for our developers.
I see, but I think if we use Headless UI for this component (Modal and Select), we'll have a reason for using another Headless UI components in the future. If we aim to build a home-made UI Kit, I suggest trying to implement/resolve it by themself.
from moai.
Good point @huyng12 . Moving forward, I think we should prefer headless UI. In fact, one of my big todo is to have a custom Select based on Downshift (the current one is a simple implementation based on the native select tag).
The Dialog is a compromised choice I made previously to quickly have the Dialog (its demand is high, you know). However, now I think we should have one based on Headless UI, since it's just too much work to handle here.
Again, one of Moai's principles is to leverage the industry's best solutions, and not re-inventing them (https://docs.moaijs.com/?path=/docs/intro-principles--page#interoperable)
Now speaking of the implementation, I'm afraid that revamping the current Dialog using Headless UI's Dialog would be too much work and risk. So we have 2 options I think:
- Create a new Dialog, maybe called it Dialog2 or AdvancedDialog, which should use Headless UI underlying, and should try to mimic the API of Dialog, and we will encourage our users to move to this, and drop Dialog in v2
- Provide a complete test suit for the current Dialog, and after that we can confidently revamp it using Headless UI
WDYT?
from moai.
Actually, I am lean on the second option, AdvancedDialog or Dialog2 make no sense. We should make least affection on our client if possible.
from moai.
Related Issues (20)
- Autoselect
- Unit tests for Dialog
- The Select circle is skewed on Safari
- Refactor: Moving away from Qix/color
- Add Gitpod integration
- Fix node_modules caching in GitHub actions
- Moai should reset fieldset properties
- Add blank icon to core
- MenuItem lost the hover and active state
- Expose category colors as an array HOT 2
- Expose Popover.TargetProps
- Button should support "rel"
- Button should pass onClick to its "a" render
- Tag should support size
- Tag should support click HOT 1
- Tag should support forwarded ref
- Revive Moai build HOT 2
- Unexpected thin icon stroke
- Migrate component docs
- Incorrect category order in args table
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from moai.