Dismissable callouts - a tip from Caleb's X post

[jeffchown]

Morning, all,

Here's a handy little component that uses @calebporzio's great tip on X this morning (https://x.com/calebporzio/status/1899472846516003056) re: making a callout dismissable:

resources/views/components/dismissable.blade.php

<div x-data="{ visible: true }" x-show="visible" x-collapse>
    <div x-show="visible" x-transition>
        {{ $slot }}
    </div>
</div>

You can use it like this:

<x-dismissable>
    <flux:callout icon="bell" variant="secondary" inline>
        <flux:callout.heading class="flex gap-2 @max-md:flex-col items-start">Upcoming meeting <flux:text>10:00 AM</flux:text></flux:callout.heading>

        <x-slot name="controls">
            <flux:button icon="x-mark" variant="ghost" x-on:click="visible = false" />
        </x-slot>
    </flux:callout>
</x-dismissable>

You can actually wrap anything in x-dismissable as long as your $slot content somewhere contains a tag that has x-on:click="visible = false" on it. (and you don't have any conflicting Alpine code in your $slot content or in any of the parent tags)

[joshhanley]

@jeffchown nice! Thanks for sharing. You could also create a <x-dismissable.trigger> component, like how the modal close works and wrap the button in that, so the visible = false isn't leaking out 😁

resources/views/components/dismissable/trigger.blade.php

<div x-on:click="visible = false" class="contents">
    {{ $slot }}
</div>

<x-dismissable>
    <flux:callout icon="bell" variant="secondary" inline>
        <flux:callout.heading class="flex gap-2 @max-md:flex-col items-start">Upcoming meeting <flux:text>10:00 AM</flux:text></flux:callout.heading>

        <x-slot name="controls">
            <x-dismissable.trigger>
                <flux:button icon="x-mark" variant="ghost" />
            </x-dismissable.trigger>
        </x-slot>
    </flux:callout>
</x-dismissable>

[jeffchown]

Good call, @joshhanley - Makes it even better 👍

[joshhanley]

@jeffchown was thinking more about this, if there is an Alpine component inside the callout, does it break it? If it does, what I would do instead is dispatch an event from the trigger and listen to it on the dismissable component (with a stop to stop it bubbling past that point) and use that to change the visibility.

[jeffchown]

@joshhanley It definitely could. That's why I put the 'caveat' warning in an earlier post (and you don't have any conflicting Alpine code in your $slot content or in any of the parent tags).

So, a more robust/bulletproof version of this component would need to take a different approach, like the one you describe.

That said, I tend to start from a minimalist approach when designing certain components and only add dispatched events if it becomes an obvious need.

[joshhanley]

@jeffchown I just made a showcase discussion category for stuff like this too and moved this into it 😁

[jeffchown]

Perfect. It definitely wasn't a fit in the 'Featuer request' ;)

[joshhanley]

Yep exactly!

[jeffchown]

Combining @calebporzio's X post and @joshhanley's great suggestion, here's my revised x-dismissable component (two files):

resources/views/components/dismissable/index.blade.php

<div x-data="{ visible: true }" x-show="visible" x-collapse>
    <div x-show="visible" x-transition>
        {{ $slot }}
    </div>
</div>

resources/views/components/dismissable/trigger.blade.php

<div x-on:click="visible = false" class="contents">
    {{ $slot }}
</div>

Usage: (w/ flux:callout example, but you could wrap anything):

<x-dismissable>
    <flux:callout icon="bell" variant="secondary" inline>
        <flux:callout.heading class="flex gap-2 @max-md:flex-col items-start">
            Upcoming meeting <flux:text>10:00 AM</flux:text>
        </flux:callout.heading>
    
        <x-slot name="controls">
            <x-dismissable.trigger>
                <flux:button icon="x-mark" variant="ghost" />
            </x-dismissable.trigger>
        </x-slot>
    </flux:callout>
</x-dismissable>