live_select icon indicating copy to clipboard operation
live_select copied to clipboard

Add :caret slot with ability to customize its classes

Open sax opened this issue 1 year ago • 5 comments

sax avatar Oct 29 '24 23:10 sax

Hello @sax and thanks for the contribution! I have a question and a couple of suggestions:

Question: why is this slot attribute a list?

Suggestions:

  1. It would be nice to have a default implementation of the caret, turned off by default but that people can turn on if needed
  2. Styling of the caret should follow the styling conventions of the rest of the library, so I would add a caret_class and caret_extra_class options like for the other elements.
  3. There need to be tests that check that you can override the caret slot and set the styling attributes for it. The former tests are in live_select_test.exs and call the LiveComponent in live_component_form, to which the caret slot will have to be added. The latter tests live in component_test.exs.

Let me know if you need any help or have questions! Thanks

maxmarcon avatar Nov 01 '24 07:11 maxmarcon

Sorry for the delay. I set the :class attribute on the slot to be a list because heex rendering treats attributes as iodatas rather than strings. Maybe there's a way to declare that, so people can use either strings or iodates.

Yeah, I was having issues understanding the test setup. Thanks for pointing me in a direction.

I have a set of tailwind classes that can be used as a default, but I am unclear what a daisy UI version would be.

sax avatar Nov 08 '24 17:11 sax

I have a set of tailwind classes that can be used as a default, but I am unclear what a daisy UI version would be.

daisyUI uses tailwind so very likely you could reuse the same classes

maxmarcon avatar Nov 10 '24 19:11 maxmarcon

I am looking to push this one forward a little bit...

It would be nice to have a default implementation of the caret, turned off by default but that people can turn on if needed

Do you have any thoughts on how this might work given that the caret is a slot? Maybe an example in the docs?

eahanson avatar Jan 16 '25 02:01 eahanson

It should probably work like here:

https://github.com/maxmarcon/live_select/blob/main/lib/live_select/component.html.heex#L33

when the clear_button slot is not set (e.g. == []) the default implementation is rendered Plus a check for whether show_caret_slot is true (or whatever we want to call the assign that controls the rendering of the caret slot)

maxmarcon avatar Jan 16 '25 06:01 maxmarcon