Comments (6)
If I may add a few cents:
I think in macaw we should use a solution that outputs static CSS. This way you are free to chose whatever you need (for example in your Saleor App), we don't force you to use JSS. To achive this we could use vanilla-extract
(or some other zero-runtime styling library). It uses simmilar style of writing styles like JSS, but it primarly uses CSS Variables for overrides and creating variants. It even has Recepies API for writing variants easily like in Stiches.
This would also allow us to do graduall rollout of Macaw 2.0 in Dashboard - because we could keep on using Material UI and dashboard-specific overrides for components directly imported from MUI and new components from Macaw. We would also avoid issues with having 2 CSS-in-JS libraries conflicting with each other.
from macaw-ui.
Macaw has only a few components that were customized to match our needs. The rest of components (inputs, cards etc.) that we use in eg. Dashboard, app-template are imported directly from MUI with just some styles applied (correct me if I'm wrong though). Removing MUI would require us to re-create all of the components that we use, animations, and a lot of the logic behind them eg. dialogs, formcontrol etc. Therefore it's not an easy task.
Headless libraries such as radix seems like a good option but they require quite a bit of boilerplate as they use compound components pattern. On top of that we would have to re-write all makeStyles
styles to use stitches if applicable.
from macaw-ui.
Indeed it's not an easy task. We definitely need to consider many factors.
Maintaining a design system isn't easy, so I would try something light with not much dependencies. Headless UI's promise here seems to fit us. Also, Tailwind approach can be good to speed up development and allow some customizations. Headless UI will work it https://headlessui.com/
On one side, this isn't easy, but on the other, the longer we wait, the harder it will be.
The good part is that we don't aim to build extensible library for everyone (like MUI or Chakra), but to have consisten UI for our internal needs and for Dashboard apps.
Strategically we can consider v1 developed in parallel and slowly deprecation of v0.x
Let's wait for some comments from @saleor/frontend
from macaw-ui.
I planned to switch to Material UI Base to minimize required amount of work and just rewrite component styles (and markup probably). We can even keep JSS as styling engine to avoid rewriting 796 (xD) useStyles
hooks.
from macaw-ui.
Another proposal, low-ui component foundation to be considered
https://reach.tech/
from macaw-ui.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from macaw-ui.
Related Issues (20)
- Add stories to Switch showing usage with text
- Export CSS variables as CSS file
- Create Pill component in new macaw-ui
- Create breadcrumbs component
- Fix input issues
- Create Number input
- Popover is not portalized and misses box shadow
- Remove "release" from auto-generated release title
- Input `on...` handlers overwrite internal handlers
- Verify and fix Accordion storybook
- Checkbox `onChange` does not trigger, can't get value of the onClick
- Toggle: wrong types on values and events
- Unify state management methods on components
- Missing cursor pointer on Checkbox
- Inputs should work with uncontrolled forms
- Filter component HOT 1
- Unit converting to tokens
- Inconsistent spacing scale
- Remove legacy spacing
- Filters component
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 macaw-ui.