Additional components and improvements for completeness

[gjovanov]

Hey @saadeghi ,
Daisy UI is becoming really powerful set UI components.

We though that adding few more components and improvements on the existing ones, would make Daisy UI even more complete E.g.

• tooltip - we can pretty much achieve this with an absolute positioned dropdown that opens up on mouse hover opening a panel/card etc, however not sure if it makes sense to factor it out as a separate component that can be used in combination with other components like button, form-toggle, menu etc. here is an example
• treeview - very similar to accordion with the difference that it can go in depth of multiple levels here is an example
• timeline - this is more advanced and composite control that would have slots for its timeline items and their icons/images/avatars. here is an example
• badge (floating or overlapping) - we already the badge component which great as it is. Here the idea is more to provide an example of how to place the badge in one if the upper/lower angles of e.g. a button or avatar similar to this example e.g. indicating user online/offline status. Probably this can be achieved by using margins on bottom or top e.g. mb-x. However, the idea is to show these in the examples of Daisy UI.
• dropdown programmatic open/close - Current dropdown is really powerful option to display complex menu items. However, since, unlike accordion its status (open/closed) is not mapped to any input element, we haven't found a way to programmatically open or close a dropdown. Especially this is an issue if the dropdown opens up on mouse hover and inside the dropdown menu there is a form component e.g. form-toggle. In that case, if the user clicks on the form-toggle and leaves with the mouse the menu area, the menu still remains open. So in such case it would make sense to have an option to programmatically close it. Maybe, there is a way around this, that we are not aware of...

Not sure how feasible is to implement these components and improvements as CSS-only-components (without JS logic), but definitively these would make Daisy UI more complete.

Thanks for the already existing set of great UI components.

[saadeghi]

Thanks for the suggestions.
I already have plans for some of these. you can see the full list of upcoming components at the end of [readme file].(https://github.com/saadeghi/daisyui)
I will add the missing ones soon.

About dropdown and accordion
Actually I'm planning to change accordion's markup later to get rid of that chackbox 😅 I think it's better to control it using classes. dropdown has a class for openning (dropdown-open), but you're right, you can't close it with classes. I should make that possible too.

I will keep this issue open until all these components are ready.

[gjovanov]

Oh I see... I wasn't aware of the list of components in the [readme file], probably because it's collapsed by default.

Technically speaking it doesn't matter if the open/close is done via a css class or via checkbox value as long as we can achieve the manipulation programmatically.

Anyways, thanks for the heads up about the upcoming changes. We will keep an eye on them.

[gjovanov]

Actually regarding my last statement:

Technically speaking it doesn't matter if the open/close is done via a css class or via checkbox value as long as we can achieve the manipulation programmatically.

I think having the state inside a checkbox makes more sense because that state can be manipulated by two triggers:

1. user events (clicks, hovers etc)
2. programmatically

Whereat, if we rely only on css classes, then not sure if there was a user even e.g. mouse hover, that removes or adds certain css class, how would know how to update the state accordingly so that can be in sync with potential programmatic manipulations?

[saadeghi]

@gjovanov The problem with checkbox is being an extra element in markup. It wouldn't be a problem with web components or react components but when it's just CSS/HTML, I think it's important to keep the markup clean as possible. An open/close functionality can be achieved using :focus state on CSS and I think I can also define CSS rules to overwrite that state using a -open and -close classes.
So, this element will open and close with :focus

<div class="accordion-item">

and these ones will be always open/close and will ignore then :focuse or :hover:

<div class="accordion-item accordion-item-open">
<div class="accordion-item accordion-item-close">

I think this markup is cleaner than the current one:

<li class="accordion-item">
  <input id="item-foo" type="checkbox">
  <label for="item-foo" class="accordion-title">
   ...

What do you think?

[gjovanov]

I fully agree that that markup is cleaner with css only and without additional checkbox HTML element.

Does this mean that in case we want to programmatically manipulate the accordion-item expanded vs collapsed, we would need to handle also: click, focus vs blur, mouseover vs mouseout events so that we can update the JS state, based on which we can attach accordion-item-open or accordion-item-close classes?

Anyways, if this is correct assumption, I think it's fine to keep the CSS clean, but it seems to me that we are just moving the complexity out of CSS to JS event handling...

Either way, I'm fine with both approaches.

[gjovanov]

it's important that there is a way to manipulate the UI programmatically and we have that option by the cleaner CSS only variant, so it should work.

Thanks for clarifying @saadeghi

[saadeghi]

@gjovanov This is what I have in mind:

• <div class="accordion-item"> is closed be default. it opens and closes when user focus/unfocus. No JS needed.
• <div class="accordion-item"> is closed be default. we add accordion-item-open using JS. User wont be able to close it by any focus event .
• <div class="accordion-item accordion-item-close"> is force-closed. User wont be able to open it by any focus event.
• <div class="accordion-item accordion-item-open"> is force-opened by default. User wont be able to close it by any focus event.

I think this covers every scenario except this one:
An accordion-item that is open by default but we want it to get closed when user focus on any other element

[gjovanov]

Makes total sense @saadeghi 👍

[niccolox]

feature-request: mega menu
https://github.com/hunzaboy/bulma-megamenu

[pavangayakwad]

It would be great if you provide us css class of animations. For example, the animation effect of button click. If I only get that animation as a separate css class, I can apply that on other composite elements like stats.

[saadeghi]

@pavangayakwad This is the animation used for button click:

daisyui/src/components/styled/button.css

Line 4 in 6e77b42

animation: button-pop var(--animation-btn, 0.25s) ease-out;

daisyui/src/components/styled/button.css

Line 202 in 6e77b42

@keyframes button-pop {

But you can use btn btn-ghost or btn btn-link on any element. I hope this is what you're looking for.

[pavangayakwad]

Thank you very much! btn btn-link did the trick for me!

[kvetoslavnovak]

This is just to confirm that the dropdown stays active using oPad, iPhone and there seems to be no way to close it. Even after selection.

[saadeghi]

@kvetoslavnovak can you please open a new issue for this?

[victorlopezalonso]

Hi, I got here looking for a way to programmatically close the dropdown once an option has been chosen. As this is an already work-in-progress feature I just wanted to share my nasty solution in case it helps anyone.

You just need to set the focus into another element or use a hidden one and trigger this in the "li" click event

<li>
  <a onclick="setFocus">Dropdown item</a>
</li>
...
<button class="w-0 h-0" id="hiddenfocus" />

// setFocus
document.getElementById("hiddenfocus").focus(); 

Thank you all for your work.

[KilianB]

+1 for this feature request.
I attempted to add a swap component with chevrons to rotate the icon depending on the open/close state of the dropdown.
Any attempt to use group and group-focus:swap-active messed up the swap components state, thus it would really help if we can control the component via js

[saadeghi]

@KilianB swap works with a checkbox. dropdown works with :focus so you can't use them together unless you add some JS: https://svelte.dev/repl/72216b3a2fd54ecda82340e5786f709e?version=3.46.4

But if it's just a chevron icon rotating 180deg, you won't need swap: https://play.tailwindcss.com/2KWiHzRrSl

I'm locking this conversation. please open new thread (or issue) for new topics