x-show on flux:separator

[mauritskorse]

Flux version

v2.0.6

Livewire version

v3.6.2

Tailwind version

v4.0.14

Browser and Operating System

Vivaldi on Windows

What is the problem?

When adding x-show on flux:separator it is not appended to the wrapping div, but fowarded to both of the divs that render the separator lines, but the text does not receive this alpine directive causing the text to still show in case x-show returns false.

Code snippets

<flux:separator text="or" x-cloak x-show="false"/>

is rendered into

<div data-orientation="horizontal" class="flex items-center w-full" role="none" data-flux-separator="">
    <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow" x-show="false"></div>
    <span class="shrink mx-6 font-medium text-sm text-zinc-500 dark:text-zinc-300 whitespace-nowrap">or</span>
    <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow" x-show="false"></div>
</div>

How do you expect it to work?

That the x-show is added to the wrapping div:

<div data-orientation="horizontal" class="flex items-center w-full" role="none" data-flux-separator="" x-show="false">
    <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow"></div>
    <span class="shrink mx-6 font-medium text-sm text-zinc-500 dark:text-zinc-300 whitespace-nowrap">or</span>
    <div class="border-0 [print-color-adjust:exact] bg-zinc-800/15 dark:bg-white/20 h-px w-full grow"></div>
</div>

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@mauritskorse Have you tried wrapping the whole flux:separator?

I find it's always more reliable to do something like this as we don't always know what markup a component will expand into (e.g. multiple divs, nested, etc.):

<div x-cloak x-show="false">
    <flux:separator text="or" />
</div>

[mauritskorse]

Yep, that is the solution for now. But it doesn't feel intuitive and neat. Especially because this way we're getting quite some nested divs for js/alpine implemenations where intially it was a blessing to have Flux make all those nests unnecessary for styling.

[jeffchown]

@mauritskorse I feel differently on this one. I think relying on all Flux components to be able to handle such an Alpine directive inherently adds a level of complexity, to the Flux code, that outweighs the benefits for a relatively infrequent use-case.

[joshhanley]

@mauritskorse thanks for reporting! At the moment the attributes are forwarded to the line elements and not the wrapping div. That will likely be a breaking change and a re-think of the component, as such I've converted this to a feature request as something we might be able to look into in the future. I would recommend publishing the component and updating it if it's something you need now.