Should we use svelte namespace for slots

[axel7083]

Is your enhancement related to a problem? Please describe

After #7150 has been merged I was wondering, could we improve the slot stuff as it is pretty ugly (IMO)

Describe the solution you'd like

Svelte allows easily to make some Namespacing¹ for components.

Currently if I want a tooltip we do the following

podman-desktop/packages/ui/src/lib/alert/ErrorMessage.svelte

Lines 13 to 24 in 17d4db0

	<Tooltip top>
	<svelte:fragment slot="content">
	<Fa size="1.1x" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
	</svelte:fragment>
	<svelte:fragment slot="tip">
	{#if error}
	<div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
	{error}
	</div>
	{/if}
	</svelte:fragment>
	</Tooltip>

However with the svelte namespacing I could do the following

 <Tooltip.Root top>
      <Tooltip.Content>
        <Fa size="1.1x" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
      </Tooltip.Content>
      <Tooltip.Tip>
        <div class:hidden={error} class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
          {error}
        </div>
      </Tooltip.Tip>
    </Tooltip.Root>

This makes easier the usage, as we do not hardcode the slot, and reduce the risk of misusing the component. It requires a bit more code on the library side, as I have to declare an index.ts file with the following

export { default as Content } from './Content.svelte';
export { default as Tip } from './Tip.svelte';
export { default as Root } from './Tooltip.svelte';

And here is an example of the Tips.svelte

<slot name="tip" >
  <slot class={$$props.class}/>
</slot>

ℹ️ Those slot component could probably be generated through a function or something like getSlot(name: string)to avoid having to create a file per slot.

Describe alternatives you've considered

No response

Additional context

cc @deboer-tim @benoitf @luc

Footnotes

1. https://svelte.dev/repl/18f41adb56fa46ff8b25cad7c1a388a4?version=3.38.3 ↩

[deboer-tim]

IMHO there was a good argument in #7150 for leaving a default (unnamed) slot and not changing the behaviour for the simple case - tooltips will always have a direct child that they're providing the tooltip for. Maybe we should have already done that for components like NavPage.

I dislike Tooltip.Root as I think it also makes the simple case look uglier, but instead of namespace we could just do TooltipContent/TooltipTip, I think it's simpler and probably more familiar to users.

[axel7083]

If the Tooltip.Root bother you @deboer-tim, there is a nice javascript way of doing it. This method is from the well known react-bootstrap package.

In our tooltip/index.ts we would have the following

import Content from './Content.svelte';
import Tip from './Tip.svelte';
import Tooltip from './Tooltip.svelte';

export default Object.assign(Tooltip, {
  Content: Content,
  Tip: Tip,
});

Allowing us to make the following in other components

import Tooltip from '@podman-desktop/ui-svelte/Tooltip';
...
<Tooltip top>
      <Tooltip.Content>
        Hover me
      </Tooltip.Content>
      <Tooltip.Tip>
        Hello world
      </Tooltip.Tip>
    </Tooltip>

Both solution are fine for me

[deboer-tim]

Thanks, that is better.

Personally I still prefer the pattern like Tooltip/TooltipTip, List/ListItem over Tooltip/Tooltip.Tip, List/List.Item, but I'm fine being out voted.

And yes, I still think TooltipTip or FormPageIcon is a nice way to avoid exposing named slots in the api, but if we have something named 'content' it should probably just be default slot. :)

[axel7083]

And yes, I still think TooltipTip or FormPageIcon is a nice way to avoid exposing named slots in the api, but if we have something named 'content' it should probably just be default slot. :)

Totally agree with this one, most of the time, we often just want a string in the tip!

[axel7083]

Closing as we started using it, and it is nice