Separate util class for fab-top

[giscura]

I would like to introduce a new class that overrides some of the styling on .fab so that the fab button can be located at the top of the viewport, with the controls opening below it on click.

I made a rough Tailwind playground: https://play.tailwindcss.com/sFmKvos7b2

Essentially, a new class would be added to fab.css:

.fab-top {
      @apply pointer-events-none fixed end-4 top-4 z-999 flex flex-col items-end gap-2 text-sm whitespace-nowrap;
      @apply absolute end-0 top-0;
      @apply absolute end-0 top-0;
      .fab-close {
      @apply absolute end-0 bottom-auto;
    }
}

and one could apply it like so:

<div class="fab fab-top">
 <!-- content -->
</div>

There's already a precedent with this convention with btn btn-primary for example.

I am (obviously) a novice at CSS, but I would be happy to work on and contribute this if necessary 😸

[pdanpdan]

I think it is not difficult: https://play.tailwindcss.com/nCIzow0DXw?file=css
Just a demo improvement (label direction on flower and unify start/end fabs): https://play.tailwindcss.com/mV1nrTUpA4

@saadeghi Should we implement this? Do we also want the fab-bottom and fab-end variants - the moddifiers can be applied only when we want them (even responsive) so something like fab-top lg:fab-bottom would not be needed because we can use max-lg:fab-top.

[giscura]

Nice. Thank you so much for your quick reply! Seeing your implementations is very helpful 😊

[giscura]

Bumping this 😄 Thank you all

[saadeghi]

It's not usual to put it on top.
I don't think a handful of people would use this. FAB usually stays at the bottom corner, for a mobile navigation because it's easy to reach with thumb. Putting it on top defeats the purpose.

[pdanpdan]

I agree with this view, but I would create a PR for using variables for flower.
In this way it can be extended in userland to add any of the other placements if one needs them.

[saadeghi]

It can be extended right now.
It's an uncommon design pattern to put FAB on top. If out all the daisyUI users there are ~5 people who want to do that, it's possible to to customize the position with some CSS.
I think it would be a maintenance hell if we decide to add something to the library that only a small percentage of people are going to use it.

[pdanpdan]

Check the play. Now in daisy the multiplier for x axis is hard-coded, while for y it is in a variable (or the other way around :) )
I was talking only about that part.

[Stetzon]

Setting aside whether it should be allowed on top, fab-left/start should probably exist to allow better access with the other hand. IMO it also makes for better back button placement (my use case). Thanks @pdanpdan for the helpful demos!

[giscura]

Great point! For my use case, my application expects users to have a large screen, but I still wanted the main action on each page to be obvious and easily clickable (at the top). No worries if DaisyUI's maintainers consider this to be a redundant addition, but I thought I would ask. The Material design guidelines expect a FAB to be placeable in different locations (https://m3.material.io/components/floating-action-button/accessibility) for user accessibility.

Not saying that DaisyUI has to subscribe to material design standards, but it is why I thought the FAB should be moveable 😄