Styling individual chips

[janpeterka]

I'm creating filter with multiple multiselect inputs (recipe category, dietary labels,...), and want to show all selected in one div - see image:

First part - showing them in same div - can be done setting param[:for_id], no problem here (it's not documented, and it cannot be set in multiselect_chip_src, but other than that, it's ok).

But I also want to separate them by color. And it seems (looking into code for hw_combobox_selection_chips_for) not possible to style chips.

Am I missing something?

[janpeterka]

Ok, after some more trying to make this work I found out that this case is not the best as it doesn't really work with remove action (as tags are outside the input div). I'll try some prodding into that too, but option to style chips is still relevant to me.

[josefarias]

Hey @janpeterka thanks for the question.

As you've noticed, rendering the chips in a separate container will likely cause issues downstream. I don't have plans to support that directly unfortunately.

However, the good news is you can absolutely style chips yourself! It's a matter of implementing your own turbo stream templates for chips. Check out this example from the system tests:

1. Set the source

hotwire_combobox/test/dummy/app/views/comboboxes/multiselect_async_html.html.erb

Lines 46 to 51 in ce2bfbb

	<%= combobox_tag "state", states_path(page: 0),
	id: "states-field",
	label: "States",
	multiselect_chip_src: html_state_chips_path,
	value: State.limit(2).ids.join(","),
	placeholder: "Select states" %>

2. Implement controller action

hotwire_combobox/test/dummy/app/controllers/state_chips_controller.rb

Lines 8 to 9 in ce2bfbb

	def create_html
	end

3. Create your own chip tempalte

hotwire_combobox/test/dummy/app/views/state_chips/create_html.turbo_stream.erb

Lines 1 to 9 in ce2bfbb

	<% @states.each do |state| %>
	<%= within_combobox_selection_chip do %>
	<%= tag.div class: "custom-chip" do %>
	<%= tag.span class: "state state--#{state.name.downcase.parameterize}" %>
	<%= tag.p state.name %>
	<%= tag.span **combobox_chip_remover_attrs(display: state.name, value: state.id, class: "custom-remover") %>
	<% end %>
	<% end %>
	<% end %>

You're right that this isn't documented yet. I'm waiting to see what kind of issues come up before settling on an API.

Let me know if that doesn't work for you. Closing in the meantime.

[janpeterka]

Hi @josefarias, thank you for answering!

As you've noticed, rendering the chips in a separate container will likely cause issues downstream. I don't have plans to support that directly unfortunately.

I was thinking about looking into that possibly (maybe using some separate controller with outlets or something), would you accept it then, or you don't want to complicate things?
I will probably find some simpler UI for now, as what I imagined doesn't really have simple solution.

However, the good news is you can absolutely style chips yourself! It's a matter of implementing your own turbo stream templates for chips.

Ok, it's lot simpler than I though, thanks!. But still, maybe default helper/template could support class: parameter?

[josefarias]

I was thinking about looking into that possibly (maybe using some separate controller with outlets or something), would you accept it then, or you don't want to complicate things?

Probably not, I'm afraid. I'm open to being talked into it but I'm mostly interested in providing a solution (as opposed to every solution)

maybe default helper/template could support class: parameter?

I'd say not right now. If adding a class is all you need right now, then it should be pretty simple to copy the original chip template and go from there:

hotwire_combobox/app/views/hotwire_combobox/_selection_chip.turbo_stream.erb

Lines 3 to 8 in d9c1e1f

	<%= within_combobox_selection_chip(for_id: for_id) do %>
	<%= tag.div class: "hw-combobox__chip" do %>
	<%= tag.span display %>
	<%= tag.span **remover_attrs %>
	<% end %>
	<% end %>

[janpeterka]

Ok, understood :))

I'll try to write my custom chip, possibly with custom controller and if I succeed, I'll propose to add it to examples, or at least to discussions :)

Thanks for your work, this gem really is great!

[josefarias]

Sounds great! Appreciate your understanding. I'm wary of saying yes to too many things this early.

Thanks for raising these points!