ux
ux copied to clipboard
symfony
[WIP][Site] Bootstrapping section to find "UI Components"
| Q | A |
|---|---|
| Bug fix? | no |
| New feature? | no |
| Issues | None |
| License | MIT |
UI Component = Twig component / markup + Stimulus controller
I'd like a place to share "solutions". What is the general markup and Stimulus controller needed for a modal? A tooltip? Tabs? Toast notifications, etc? How can we help people discover that, if you need to build a popover, there is a controller for that?
I'm proposing a new section on ux.symfony.com to find these "pieces". It's meant to be solution-based: you search/browse for your need (e.g. modals) vs the package (e.g. "turbo" or "live components"). We talked about this and Bootstrapped a bit on a live stream - https://www.youtube.com/watch?v=3f65q46k6TM - this is the result.
Unstyled example page for toasts
https://github.com/symfony/ux/assets/121003/6091b819-7c24-4a3f-86dd-e4408ac012ae
UI Component Ideas
- Modal
- Tooltip/Popover
- Button
- Tabs
- Toast
- Dropdown
- Trix
- (video player)
- Clipboard
- Alert
- Form Inputs
- Pagination
- Google Maps & open street maps
- Sliders
- Off-Canvas Menus
- Lightboxes
- Badge
- Progress
- Autocomplete
- Charts
- Image cropper
- Dropzone for upload
- Lazy images
- Password toggle
Open questions:
- WDYT?
- I use Tailwind. Do we try to have a Bootstrap version? And also a "no CSS" version of each one?
- I've used the word "UI Components" to describe these... "component" is a loaded name, but it might still fit well.
About the naming, at work we faced a similar situation where we were reusing existing things only, without any specific code for that "thing", in the context of Storybook. It wasn't a story describing a state of the component, nor a component because of no specific code for it, just a particular composition we want to document. We ended up naming it a "Recipe", like cooking, we mix what we have.
So what about "UI Recipes"? 😁
Recipes is great!
Is it possible to decide if we want bootstrap and/or "pure css" on a recipe basis ?
Would you accept LiveComponent in here too ? Now that i've played a lot with Live, i'm thinking at some basic component that could be really usefull (custom dropzone, calendar with ranges, some "infinite paginator" ... )
Side not for the name: I think "HowTo" could be a challenger... but i'd really like to keep that name aside for something more "how/why" than "what".. Questions with a project scope (how to structure my folders / how to reuse components / how to decide what's "front" what's "back" ....
For me, use Tailwind is a good idea.
The list of ideas is super interesting :).
I add to the UI Component Ideas : Breadcrumbs.
I use Tailwind. Do we try to have a Bootstrap version? And also a "no CSS" version of each one?
I have no particular opinion on my side about Tailwind or not, but I think having a "no CSS" with semantic class names on elements is good, so it's a matter of copying the markup and styling the classes :) Maybe the system can be "extensible" and allow the community to contribute with different front-end libraries (Bootstrap, Materialize, Foundation, etc...)
Just to share so I don't forget: I (re)discovered PicoCSS, looks like to be a good candidate for a semantic markup only variants
I watched the live streaming (https://www.youtube.com/watch?v=anXeWMLHNWE) associated with this Pull Request. I tell myself that it could be interesting to make the sources for the different components available and thus the community could contribute to this Pull Request. What do you think ?