search

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
606 stars 26 forks source link

Feature Request - Transitions on InfoBar #23

Open TheOnlyTails opened 2 years ago

TheOnlyTails commented 2 years ago

Right now, <InfoBar> components, which are supposed to display helpful notifications/information, have no loading animation, which could be nice to have.

I'm thinking of something like a quick fly transition.

Tropix126 commented 2 years ago

I think this should be handled in userland rather than have fluent-svelte take opinions on this. WinUI adds no transitions, so i'm somewhat against shipping this by default.

Tropix126 commented 2 years ago

A simple way around this would either to add an API for exposing transitions to components (which is something i've been considering), or just using a wrapper element with the transition.

TheOnlyTails commented 2 years ago

I think this should be handled in userland rather than have fluent-svelte take opinions on this.

The main problem is that Svelte prohibits using transitions on components; I think that Fluent Svelte should match the WinUI spec completely, by default. Extra configuration options that deviate slightly from the original spec shouldn't be completely prohibited.

Tropix126 commented 2 years ago

See my comment above about forwarding transitions. It's possible, similar to the actions array method, but would require a fair amount of boilerplate internally. I'm hoping that svelte will eventually implement a method of doing this natively. For now, a wrapper element should do the trick until ive made a decision.

TheOnlyTails commented 2 years ago

What about a transition tuple prop? first item is the actual function, 2nd is the transition props. that way it's completely customizable

Tropix126 commented 2 years ago

What about a transition tuple prop? first item is the actual function, 2nd is the transition props. that way it's completely customizable

This is what I have in mind more or less, and it's completely possible. The thing is that for the sake of consistency i'd need to add this to every existing component. At that point I might as well add action forwarding as well using the same technique. I'm still undecided if this is a good idea, though, but if it's clear that the svelte maintainers don't like https://github.com/sveltejs/rfcs/pull/60 i'll get around to adding it.