Floating UI Svelte announcement!

hi everybody this is Chris from skeleton labs in case you're not familiar with me uh I'm actually the Creator and core maintainer for skeleton and open source UI toolkit for the swel ecosystem um you can see the website presented here on the screen uh we just have you know a lot of things that you would maybe kind of be expecting from a u UI toolkit components utilities for things like you know pop-up moodles and and uh theme systems you know know just a lot of really kind of cool and interesting stuff um kind of our our sort of uh what kind of makes us special is that we pair you know spelt and Tailwind to handle styling and The Styling system and so if you haven't checked it out definitely go to skeleton. D and take a look um what I'm kind of using this video for today is to kind of showcase that you know two things one that hey we've got a major version coming soon called skeleton V3 uh it's going to be kind of a total rewrite from the ground up uh lots of improvements to the theme system color system uh lots of different kind of typography stuff uh new new elements and and you know components and just just lots of really kind of cool cool new features including kind of a cool new design so you can see we have different themes and and lots of different you know styling and and just just there's a lot to kind of digest definitely kind of come check out the websites if you haven't already the focus of today's video though is not skeleton per se but the new project that uh I'm here to announce so um very excited to announce that uh we are now working on a new open- source project called floating UI felt so if you're not familiar with floating UI this is an existing tool um you might have seen their website or come across them some some regard uh it's kind of the spiritual successor for pojs if you've been around in the webw world for a long time really great tool for like overlays and kind of positioning modals and drop downs and just kind of any sort of overlaid element that you might have in your application uh they have some really great demos on their website highly recommend kind of coming and checking those out can of see dropdowns you can see menus just just a you know a good a good slew of options the really cool thing with with floating UI is they provide kind of this rudimentary kind of Dom package that just handles like all of the math and the Computing for all of this they have this like modular system for middleware so you can handle things like flipping the pop over to the correct size whenever it kind of gets too close to the edge or something like that and just like a lot of really kind of cool low-level features they also if you're coming from the react World um have kind of a wrapper package that they take and apply a number of uh react hooks so think of these as like utility Fe features that simplify and kind of provide a a Slimmer or simpler API for interfacing with floating UI uh including you know some of the interactions and closing and showing and hiding and tracking events for when uh overlay element appears or something like that um accessibility stuff there's a there's a whole slew of of options that they provide in there on their website um definitely again kind of come check that out take a look so what we're introducing however is the kind of spelt equivalent to this because they provide uh bindings and and kind of a package for react they they provide bindings for view but unfortunately they just have not had a chance to look at spelt and given that skeleton has a kind of a rich history in the spelt ecosystem we're very keen to kind of fill in that Gap and so sort of bring those tools over and so this is kind of a two-fold sort of solution one it kind of solves problems that we have for skeleton because we clearly have like popover elements and these kind of floating elements and modals and things like that that we need to be able to handle and there just generally in the spel community this is a really cool tool to be able to use and having to kind of go to the low level and using the compute methods and stuff like that directly it's possible to do in spelt and it definitely does work and you know we've used it with some some great success but going forwards with skeleton V3 we've kind of made the decision to essentially kind of create this this felt specific wrapper ourself so the result of that is this it's the floating UI spelt uh project which I just you know was mentioning uh we have uh a package uh you we've got you know of course the website here uh I'll link this in the video description and any kind of written post that goes out alongside this this video but um you know we we've provided this to kind of show you a little bit of what we're kind of cooking behind the scenes and so if you come in here you're going to see we've got like sections for uh a tool tip popovers models context menus most of these sections are kind of marked coming soon they're not completed they're not live but we've done a little bit of work on the tool tip sections just to be able to show you kind of a proof of concept today and so if you are coming from uh the spelt world this is going to be uh basically a preview of the new package or new tooling that we are building that is going to fill in that Gap and make it much easier for you to use floating UI and so what we've done is provide some documentation here it details like what is a tool tip how does it operate what is the kind of rules behind that we've provided an actual kind of preview here a live preview so you can see as I hover this this little button here you're going to see the this menu up here it's got a few things that um if you're coming from from skeleton or if you're coming from doing some of this directly you're going to maybe notice some small touches there like the animations and the fade and stuff like that it's a little bit different a little bit unique um from what you may may have seen in the past from us and so what we're doing here is using a combination of again this new kind of spilt UI spilt pack or excuse me floating UI spelt package and also pairing that with some features that come from swelt itself and so if I switch over to the code view you're going to see we're actually importing the fade transition from spelt and then importing kind of our own set of kind of uh features and modules and things like that mixed between floating UI and also you know our our tooling and then we have kind of uh bunch of boilerplate here don't don't don't let this kind of scare you it's there's a lot going on here um but you know this is highly highly configurable everything's bro broken down into small modules to allow you to kind of set up okay I want to have interactions I want to have hover I want to have animations I want to control the state I want to control you know this middleware of you know does it Flip or is there an arrow display like even though it looks like a very very simple demo there's a lot kind of going on behind the scenes to to to power that and again we're showing off some of the initial features that we're kind of putting out and and kind of uh rolling out for for preview today uh to to just kind of see what that looks like um we've documented a lot of the process here if you're kind of curious you can kind of come through and read through this later kind of see what see what's going on behind the scenes definitely take a look at the code snippet but um before I get too too far I do want to kind of showcase a couple things and so what I've done is I've pulled up just a local instance of of this project and I've got the code that's actually powering the preview that you're seeing right here and so I'm just going to change a couple things and so with just a couple quick settings I can say maybe like disable this Arrow here uh let's say let me take off I'm going to move it here and I'm going to move it from here from the middle there and then we're going to see when I hover that there's no Arrow so again what I was just saying it's configurable there's lots and lots of stuff going on in there um some of it's optional some of it's very easy to change I'm using the transition so if we want like a really long kind of overly obnoxious you know fade in and Fade Out we can change change some of that uh let's see what else can we do we're kind of mixing in some just basic HTML and CSS in here we're using Tailwind for for our styling but Tailwind is not required for this just adds up for especially for folks that are coming from the skeleton world we use Tailwind a lot so I think a lot of folks kind of get used to that but uh this project is first and foremost built specifically for solving problems with floating UI so again so just some cool stuff with there but I did want to walk you through the fact that we are kind of bringing in a set set of input ports again some of these are a mix from floating UI and a mix from our project uh anything you see is like use use this use that those are the hooks that we're kind of imitating or or replicating for for our project um we're doing several kind of element references which if you've done that in in uh excuse me in spelt uh you may it may look familiar you're going to also notice that we're using State runes which is a good indicator of hey this is actually being built with spel 5 in mind so if you're somebody that's been kind of eyeing the kind of new major version of spelt that's coming out soon um please note that we are fully supporting that right out of the gate and then let's just kind of look through a couple of the settings here and so um used floating is the kind of main hook that you use to set up your you know any kind of floating element think of this as the place that you provide your core configuration for for whatever you're going to display on the screen so by default we're matching the same kind of property names that you see in the floating UI uh documentation so if we come over here and we look at oh I don't know use floating and you see these list of options here things like placement uh strategy transform middleware all of these options are available here and so you can see one of the simplest ones placement it's set to top which means that when we hover this you're going to see it kind of appear here at the Top If I switch this to I don't know let's go left and save that you're going to see now it appears over on the left and it does a few things it put positions it over the left it makes sure it centers everything properly it works with the scroll which is really nice and then even that little arrow that appears kind of repositions itself so lot if you've ever set something up like this custom you you you may start realizing like how amazing some of this is how how how many you know features are actually kind of operating here under the hood we're controlling the open and close State here with a couple properties um we're kind of giving references to what is the what is the main reference which is the button and what is the floating element which is the thing that kind of pops up here uh I'm going to put this back on top and then middleware kind of this the stuff I mentioned a moment ago we're just using that straight from floating UI so any of the middleware you see here you can come in and if you're curious to say what is offset or what is shift or what is flip they have some really great documentation to see some of that but um right now we've got flip implemented I'm actually going to disable it just so you can kind of see what it looks like without so if I do this you're going to see as I get kind of towards the top of the page let's see if I can do that see how it's kind of going off at the top of the page if I put flip back on which is again middleware coming straight from floating UI it will now kind of reposition itself and flip itself down to the bottom so again it's not just uh straight up replacement for floating UI it's a way to augment and simplify um if you were trying to write everything that's that's actually kind of happening behind the scenes or under the hood for this you would would come to realize that hey there's this is a pretty complex amount of you know features and and options that are being provided like just kind of browsing the hook really quickly here you're going to see there's quite a bit going on there so you know it really is a pretty pretty nice abstraction um it's more verbose if you're coming from the skeleton world it's a little bit more ver verbose than our sort of popover feature in skeleton V2 but again the complexity is is essentially endless with with this and there's still kind of that room for abstraction if you really kind of want to go that approach ways to simplify this down but again we're just kind of exposing all of the same properties that floating UI react as just with with a nice you know uh spil port and supporting spil features and spil kind of flows and patterns and things like that that you may be used to a couple other things here before I kind of just wrap this up I want to show that we're we are kind of using the use interactions approach which is how you handle things like hover events click events uh click outside so if you have a modal and you click outside of that how some of that is handled and even accessibility is part of this so you can see we're actually setting a role of tool tip when when this is being assigned so if we were to look at the code for that that kind of hovered element that little pop that little tool tip there you're going to see it's going to add that rooll for accessibility purposes which is really nice because skeleton is very big on accessibility and we don't we don't want any of that lost as as part of this translation uh in the template itself there's a few things going on again I've kind of I've got some extra Styles and stuff here that you can kind of ignore that those are not really important to what's going on here but you're going to see two things that that are really kind of key here one is the trigger or the the reference or button in this case which we are binding and kind of passing a reference up to use floating we're actually pulling in some settings from from you know kind of imported from our interaction set which is kind of handling a lot of that kind of hover State and all that for us so you'll notice we're not setting up like hey when this thing triggers or when when there's a when you're you know are hovering or not hovering we're just basically saying use hover we're providing the context and then we're grabbing the state from interactions and we're spreading it onto the button and that's it that's all you have to do so it's a very simple process and you're doing a lot of the same patterns over and over which I think folks are going to really kind of you know appreciate and really enjoy look at the floating element itself it's pretty simple it's uh set to a you know a div here we've got uh binding you know for the for the element to kind of reference hey this particular element the styles that are being calculated any of the interaction stuff that's being handled that's going to be passed to this as well and then we have the open state which is again just kind of using an open uh Boolean uh state for a state Rune here from SP 5 and then the contents that we want to drop and display and then the floating Arrow here is actually a component that we're importing from floating UI felt and so it it gets some context some information it needs to know to kind of reposition itself but that's the gist of it so you know again there's a lot kind of going on here this is like a full like full you know demo but I did want to kind of just point out some of the little like niceties and sort of the the you know just kind of scratch the surface there to kind of peek your interest and see kind of the amount of config figuration and amount of options that are available so um just to kind of let you know where we are with things uh as per you know the the early part of this video today is the announcement this is the first time we're actually showing anything for this we've been kind of teasing it in this in the skeleton Community but uh we wanted to kind of just get the word out um we're going to be sharing this video in the skeleton Community but I do kind of encourage you if you are from you know the spelt world or you were in no Focus in the SP Community please do go and share this we want people to know that this tool exists and it's coming and that you know we are looking for contributors so we need some folks to kind of help us build out the rest of what's there we're we're we've made a a tremendous amount of progress everything you see here is just a couple weeks worth of work so really impressive uh uh shout out to to Abdel and Hugo for just doing an amazing amazing job with with what we have already but you know we still need some features that are that are missing you you can see see like we're calling out like a dismiss feature that doesn't exist yet and some other things that we really want to get done so again kind of help us kind of get the word out there and let folks know that hey this is coming and this is something we want to do as far as features to actually work on uh of course you can come to the website click the GitHub link and that will take you here you can look at the list of issues we have a number of issues open and just kind of feature requests for uh a transition hook a dismiss hook and different features uh we are welcoming folks to come in and say hey I'm interested in contributing and kind of work with us to kind of figure out you know who who's working on what uh we're happy to kind of assign that there are more advanced features uh right now with with a lot of these hooks but there's also some smaller lower hanging stuff like just helping us kind of set up like contribution guidelines and helping helping everybody get organized so if you're interested at any portion of that please do reach out either kind of on GitHub or again you know this is related to the skeleton Community uh either on our main website or or our new website you're going to see a Discord link just kind of linked up here this little icon just tap that that's going to take you into our Discord and then we have a dedicated Channel called floating UI felt so please uh join the Discord check it out um ask any questions you have again Reach Out where're you know either myself or Hugo or someone else that's contributing to the Project's happy to help and you know let us know what you think um we are very excited to get this in your hands it's not quite ready for you know it's not an alpha or anything like that yet but we're we're kind of fast approaching that and we really want to kind of get that to to everybody as soon as possible so um hopefully in maybe a couple more weeks we we can start looking at something like that so if you're interested in trying this again I want to kind of put forth that this is not a skeleton specific feature this is a feature just for anybody you using spelt so if you're using spelt or spelt kit or you know something like that you're not using skeleton at all you're not using Tailwind totally fine all of these features that you're seeing demoed all of this will work in your project so again if you're interested please come check it out and I love to see what you think

Channel: Skeleton Labs

Views: 9,618

Keywords:

Id: Trr-nn1yZ44

Length: 18min 47sec (1127 seconds)

Published: Tue May 07 2024