Just curious by the way, have you considered using BEM classes? So a button component would get a .button.button--primary class for example instead of utility classes.
Asking this because it would be nice not having to use !important when overriding styles, as described here: Modifying components. Since this increases the CSS specificity.
This would also enable other niceties such as theming via CSS vars:
.button {
--primary-color: #abcdef;
}
I understand the goal is of course that the styling works out of the box with as little setup as possible. However if the developer is already using Tailwind they could import the stylesheets from ./deps/petal_components (I think) and it would “just work”, no need for an NPM package.
By the way I’m currently using this package with some of my own components mixed and it works quite nicely
Thanks good suggestion. I’ve wondered if that could be a superior option - something like daisyui - especially for certain elements like buttons. One problem is it might fall down with more complex components like <.dropdown> or <.pagination>, where we want to abstract away where to put the divs and spans and in what order etc. So it might be slightly more confusing to have some components where you use a BEM class, and some you just use a HEEX component.
I need to learn more about CSS vars - can you explain why that is better than defining the “primary” color in the tailwind config (theme.extend.colors.primary)?
Ah yes what you’re saying is expose BEM classes only right? I agree that would fall apart with more complex components.
What I meant only affects the implementation. End users still use HEEX but the implementation wise you’d use BEM classes instead of utility classes (which are the reason currently !class is needed to override styles).
So implementation wise it would look something like this:
In Tailwind the components layer always comes before utilities so it has a lower specificity in CSS, so no need for !p-3 (important). Also think it would cleanup the petal codebase a bit but that is up to you two to decide of course.
I need to learn more about CSS vars - can you explain why that is better than defining the “primary” color in the tailwind config (theme.extend.colors.primary)?
I mentioned CSS vars mostly because when you separate the styling from the components you can reference CSS vars for additional customization. When all styles are inlined via utility classes this is not as easy.
You could also provide a default value for primary so that users don’t need to modify their tailwind.config.js for it to work. On the other hand you can also expose a Tailwind preset. So lot’s of options there
Ohh I see now… that looks great - you’re all over it . We’ll definitely look into this - might ping you when we have a PR ready to have a look over it if that’s okay
then in each component I can’t use bg-gray-500 or whatever. It forces me to use bg-base-100 and text-base-content. The advantage is color use is pretty consistent/branded. It’s also very easy to theme as we know from daisyUI.
I went and used hsl for colors… not sure if that’s the right plan or not.. that’s just what I ended up choosing for the moment. DaisyUI uses hsla at times for opacity.
Just wanted to throw that out there in case that idea is interesting.
I’m experimenting with Petal components for my liveview webapp and have run into a strange behaviour.
In my example I have a standard dropdown component from petal library and a custom dropdown live component (sorting selector), like so:
<div phx-click="toggle_sort" phx-target={@myself}>Sorting</div>
<%= if @sorting.visible do %>
<div>displaying sorting options here</div>
<% end %>
The event that handles this toggle looks like so:
def handle_event("toggle_sort", _params, socket) do
{:noreply, socket
|> assign(:sorting, socket.assigns.sorting
|> Map.put(:visible, !socket.assigns.sorting.visible)
)}
end
It seems to be working fine in separation. However, whenever I click on the petal dropdown component, “toggle_sort” event is also triggered. It also happens when I click on a color theme selector (from petal boilerplate project).
I don’t really understand why is this happening. I’d really appreciate if someone could point me to what I should be looking for here?
Not sure if this is enough. To be honest I don’t have much good experience with JS and every time I’m trying to use it I end up dejected after a lot of struggling. As a result I’m actively trying to avoid writing JS myself and try to rely on libraries like this one. Perhaps that’s not a very wise strategy haha
. We’ll definitely look into this - might ping you when we have a PR ready to have a look over it if that’s okay
