Building a Custom Select Menu with Tailwind UI Vue

okay here we go so I streaming is confusing I linked to what I thought was like a reliable YouTube stream link for my channel which is youtube.com slash Adam wild and slash live but when I started live streaming it didn't actually update that URL just created some random URL and never made that live one actually point to the new one so that's kind of weird but what can you do so hopefully everyone who clicked the link in twitter finds their way over to the real stream I'm going to just tweet it out for real here as people can see it so we'll just say live now link changed will throw the old thinking dude in there okay so um it's a back story basically so we make this tell and you I product right a bunch of you're probably seen with a bunch of kind of pre-built gentleman components and I think it's pretty cool but there's a lot of components that require JavaScript to work so if you go to like dropdowns these require JavaScript to work and implementing these you know it could really bulletproof way is not not as easy as it sounds there's a lot of work that you have to do with keyboard navigation and stuff like that to get things working excessively so what I decided would be a good thing to explore is trying to figure out how can we give people working versions of these components that work with JavaScript in the framework that they already use without making them like go to this code tab and copy like a disastrous amount of JavaScript because right now you can see like it's just comments we just say here's the transitions you should use make sure you show or hide this based on the state so the search bar until when you I just command K one day will put like a button or a link for it or something but I haven't finished making this properly accessible so like up and down works a little bit but it doesn't work with like Aria roles and stuff like that so it's better than nothing but it's not perfect so I try not to advertise it too much in the UI yet until it's fully baked anyways I've been trying to figure out a way to provide some sort of baseline interactive components that people can use with tell and UI components so that they don't have to worry about writing all that crazy JavaScript stuff themselves the popper jas stuff i am not planning to handle that immediately but something that we could also tackle in the future anyways so all that said what I have decided to do is build a view library and a react library and hopefully an Alpine library as long as Caleb can finish this feature that I needed to finish to make it possible at least to start for those three libraries where we can take like common UI behaviors like list boxes toggles modal's stuff like that and provide primitives for those that make it really easy to kind of encapsulate all the complex behavior behind kind of this black box but still let you fully customize the mark-up and fully customize the Styles um which is an interesting challenge because as you've probably seen most libraries that are like a prebuilt custom select menu are end up being really hard to customize so I've built one so far I just kind of started on this this week I started with custom select menus which are called list box is in like the Arya world and I've done it just in view and I'm pretty happy with the API so I wanted to do a little stream here today where we try and consume it so we'll use it as if we're like a user of the library who doesn't need to know about the internals and we'll just kind of walk through how it works so totally unrehearsed we'll just figure this out as we go come up with some cool ideas for data and stuff like that basically to start that we need to import some components so there's a bunch of components that we get from this file that right now I think is just components slash list box J is something like that yeah so we're gonna need to import the list box itself the list box label the list box button list box the list and list box option I also have this list box popover or pop-up I've I don't think I'm actually gonna end up shipping that I think I have a kind of a better way to do that so we've imported these kind of five components and these all work together to create these custom selects so let's register these components with you and again I'm gonna build react versions of this too and they're all gonna have the same API as much as possible so we've got these components supported let's start by setting up some data so the way this component works is very much like any other form control in so you know how in view you have like an input with v-model on it and it just kind of stays synchronized or a radio button or select menu whatever this is meant to work the exact same way so it's what they call and react a controlled component so the state in terms of like what is selected and what the options are those are gonna live in our parent component here and the internal state of the component is just worried about the interactions and stuff like that so we're just gonna do this sort of like data down events up sort of approach to synchronizing disk data framework free there's no such thing as building these framework free unless you want to blow your head off alpine will be like the framework free option in my mind even like what I've written here with view it's 375 no 400 lines of code for the view version and think about how much of you is actually doing for me so if I was gonna give you a framework free version of this it'd probably be like two thousand lines of code it's just outrageous and not even productive use a framework use view react angular something Alpine is awesome if you're not a framework person I don't believe web components came and work for this because as far as I understand web components don't really do well with slots and stuff like that so and that's totally required to make this stuff work so we'll see if someone can convince me that web components make sense I'd be interested to see it but everything I've read about that makes it sound like rather than working with every framework they just work with no framework so anyways we got this stuff let's set up some data so we'll have a data function here let's return like let's think of this is a always fun coming up with some sort of like domain one that I thought of was like pro-wrestlers because I love wrestling well as a kid I did anyways so let's do like something like this I do like a selected wrestler and then we'll have like wrestlers and we'll make an array of wrestlers here so let's think of some wrestler names so there we go Stone Cold Steve Austin someone suggested basically let - Bret Hart because he gave me a Tillman shoutout for my birthday a couple years ago it's due Ric Flair who gave Taylor a shout-out for his birthday yesterday maybe we'll do a Macho Man Randy Savage maybe we'll do Jake the snake Roberts maybe we'll do the Undertaker Oh Cole you know I can't forget Hulk Hogan let's try and get like 15 or 20 in here Rikishi okay we're going to a different era here I'll take Rikishi John Cena okay we're going even more modern all right keep throwing him at me Shawn Michaels I see in there all right who else British Bulldog okay yes Superfly Jimmy Snuka okay Superfly Jimmy Snuka xxx whoo The Ultimate Warrior Andre the Giant don't the clown alright this will be enough for now especially because it'd be kind of fun to get images from these people and I think that's gonna be not possible okay so we've got this list of names these are all unique so we can just kind of roll with this as a first step so why don't we pre select like Hulk Hogan he'll be kind of like the default selected wrestler Pro Wrestling is unfortunately a very male-dominated area I guess there's a lot more women wrestling these days though but I don't really keep up with it now so I don't know any of their names back in my day it was like the only chicks that even showed up are like May young when she got like powerbomb by the Dudley Boyz he's like crazy stuff like that or like trish stratus there weren't really wrestlers like they are now I know now they have like some really athletic women doing lots of crazy stuff which is cool but back in the day it was not as diverse as it is today all right yeah we could do a placeholder and we can do pre-selected remind me about that and we'll make that work okay so we got our data set up let's make a list box so what we do to start is we kind of create our route list box component and we're gonna do a V model on selected wrestler okay then we're gonna do a list box label which renders nothing but a span so we can do whatever we want here we can be like you know selected wrestler and then we'll do a list box button and so knowing that these don't want to complete that well and in here we're just gonna put like the selected wrestler name probably and then we're gonna have a list box the list and inside the listbox list we're gonna have a bunch of list box options so we're gonna do like a v4 of wrestler in wrestlers and once used like the wrestler name here and each option also needs to have a value so that the list box knows like what the values are think of it just like a regular old HTML select menu so let's just do value is wrestler and we don't need this for the purposes of this library but view will complain if we don't have keys ok so we've got this right this this looks terrible right it's completely unstyled but check it out like I can go ahead and like click John Cena or the British Bulldog or you know all these people and it is it is working if I hit down and hit enter that's Rikishi you know if I had down down enter those Shawn Michaels so things are working but we just have no styling or anything so let's start with a couple things I never use apply ever I don't think anyone should use apply with toe and if you can avoid it it sucks it's a it's a it's a gateway drug feature to trick people into using tailwind and when they start using to when they realize that they don't actually need it personally I do not care about the mark-up getting bigger at all I'd rather a big string of HTML where I can actually see what I'm doing than having to jump between all sorts of files all the time okay so we got a list box we don't need to do any styling on this but maybe what we should do first is hide the list box list unless the list box is open so I consider it baking this right into the library but the problem is with view there's multiple ways to show and hide things right some people like to use v-- show some people like to use be if there's reasons to use one or the others depending on context and some people might want to do transitions some people might want to not do transitions so what I determined the easiest approach was is to just expose the open state through a slot and then you can just do whatever you want if it's open so let's just say here we'll just we'll only show the list if it's open all right so now it's not open we click Shawn Michaels then we click British bulldog it closes so you know it's working better these focus sounds by the way the new default chrome focus styles I like him better than the old ones all right so we got that opening now what about the label what's like let's why don't we just use this level just for screen readers let's hide it okay now the labels gone this is again just like vanilla tail and stuff right okay what about the button let's make this button kind of look cool a little bit like rounded px3 py2 border border gray 200 or something maybe 300 yeah okay that's sensible maybe let's make it like a with full and we'll do it like an inline let's tube with full okay so I've got this container here with like a max width on it so you can see like that's why we're getting this big button let's do text left all right and let's add like a icon let's go to heroic ons and we could do like a I think there's two good ones there's like the selector icon and there's also like Chevron down so maybe we'll just use a Chevron well slam that in here and we'll do like a class of h5w v text gray 400 something like that okay so there's a chevron so let's make this inline flex items Center and justify between I guess like really this Chevron should be like an absolute position thing but for our purposes like this is pretty good right okay so we've got this button it opens the drop-down now we can click an item in the drop-down and that totally works now what about what about let's do a little bit more styling let's do a little bit more styling and then we'll worry about keyboard navigation and stuff so this list thing looks ugly so let's improve that so we'll just do like focus outline:none so at least when it's open we don't get this like ugly outline and instead we'll kind of style it ourselves so why don't we start by giving it like a shadow maybe like a rounded MD or something like that and why don't we just set the v-- show here to true for a second so that we can oh my goodness why is he isn't giving us problems here do I need to do like an es lint disabled in a template - is that like a thing yes lint you're killing me hmm I used like the default view CLI template when I made this and it has this really aggressive es lint stuff setup where even if there's like it's the smallest warning it doesn't even show your stuff IV s lint disable here I know I can remove the V slot but that doesn't get rid of the stuff I mean ok let's try putting it up here I'm pretty sure this is just gonna fail though because like that's not even yeah it doesn't care I just want this gone okay that's amazing okay so there we go there's a solution we'll just disable it for the whole file using an HTML comment so that's probably fine all right cool that's what I wanted all right so we got a little bit of a shadow on there that's kind of cool let's do some padding on the options maybe so we'll say like px well maybe we'll match like what we had for the thing above like that sort of thing and maybe on this whole thing we'll do a little bit of padding too like a py one all right and we could do a border on this too I guess and let's position it a little bit farther away so first of all let's do position:absolute and we'll do like position:relative on this and we'll make this with full and we'll go like mt2 or something so there's a little bit of space okay so let's go back to is open here when there's enough space in the viewport like again do you just have to decide what to do there there's a threshold between handling as much behavior as possible and like giving you control many you eyes will try and dynamically show the drop down either above or below depending on how much room there is in the viewport you can use a library like pop or jazz for that which I might bake into it at some point but for v1 I'm just kind of I'm keeping the sort of line of like what we handle versus what you should handle like a little bit lower so that we can put out something and then continue to improve on it all right so like this is a really long list right which is probably too long so why don't we give it like a max height of like I don't know what's this do let's go back to forcing this open okay so max height 32 is probably not enough maybe like 56 or something I mean like that's sensible for a for a list box I think what's 56 it kind of cuts off the Undertaker I want it ideally you want to get something that sort of looks like it cuts off half of a word you know so you can tell that there's more options so 56 is probably pretty good you can see like the tee and you are gonna be poking through so people are gonna know that it's scrollable and then we'll just do like overflow why Auto all right so now we got like a scrollable container here okay all right and we have it forced to open so let's just set it to is open here you can do custom scroll bars if you want again that's styling related right and this library is completely stylist and maybe we'll introduce custom scroll bars is a tell and feature at some point okay so anyways we got this select menu kind of working now so let's do some other coolest stuff with it so why don't we try doing something like for the selected item maybe we'll put like a checkmark next to it so let's get a check and in the listbox option i'm gonna add an SVG here for the check mark what's it like h5w five text grade 700 or something I don't know this is totally arbitrary okay so now you see you've got these like check marks for everyone now we don't want check marks for everyone we only want check marks for the people who actually should have check marks right let's make this like relative we'll make this absolute or let's do a span span come on omit span tab no programs don't work I don't know if you guys knew that but most software is just bad all right absolute in set y 0 right 0 flex item Center alright so now we got check marks over on the right there let's do a little bit of padding on the right maybe like PR 2 all right so now I've got like a check mark on the right but it's there for every single one we only want it there for the actual selected one right so so how do we know that it's selected so you might think well one way that we could do that is to just do a V show we could say if Wrestler triple equals selected wrestler then we'll show it right and yeah that does work and that's fine but I've created an API that I think is a little more declarative even so just like we have a slot up here that tells us if the thing is open we also have a slot here that can tell us is this the selected item because the dropdown knows all that information right so we can just say V show is selected and now that it's selected we get the check mark if I click macho-man now much man has the check mark if I could click superfly so you put flies got the check mark ok pretty cool now what about like when you're hovering over it with the mouse and you want it to like change a little bit say we wanted to style that how could we do it one way that we could do it is by using a dynamic class so basically we want to say well actually here we go here's an interesting approach right say we do like hover B G blue 600 hover text white this is gonna like you're gonna think okay this like mostly gets us there right but if I hover and then start using the keyboard it doesn't work right now I actually have ultimate warrior selected but you'd never know that you know here if I hit down down I'm on Doink the Clown but he's not selected it looks like I'm about to select the British Bulldog but if I hit enter don't the clown is selected so hover is like a very naive solution for this we actually have a more abstract concept at play which is which one of these items currently is like active based on either Mouse action or keyboard action so rather than doing it this way what we can do is we can D structure another piece of data out of the option which is whether this is the currently active option active in the sense of whether it's highlighted and then we could just do a dynamic glass binding or we can say we want to do BG blue 600 text white if it's active I'll add multi select support eventually for sure right now it doesn't support it again this it's just been like a couple days of getting of something together that I felt happy with and spiking at the API and stuff all right so now that we open this you can see why is it not working we've goofed something up okay we got some errors property and method is active it's not defined oh alright I remember so there's this thing with view where as a view to point six or something you can put the V slot declaration on the root component instance but you can't actually access it on the root component instance you can only access it on children so we have to do like this little trick here where we make it div we move everything into the div and then we'll get rid of basically these declarations and move them to the div and now it should work okay so now if we open it up oh you can see Hulk Hogan is already selected because he was the selected item so by default that's the first one that's active now if I do my hovering oh interesting they all hover now if I hover and then start using the keyboard oh oh and look at that it even autoscrolls the right option into view as I'm doing it it's just magically working and all I had to do was say these are the styles I want if it's active so that is pretty cool in my opinion so now what about the what about the the check mark see how the check mark is kind of like an ugly color right now well if we wanted that to also change color we could just can't rid of the gray 700 here do a dynamic class binding and we could just say so we'll do text gray 700 if it's not active active so not as active and then maybe we'll do text white if it is active so now yeah you can see the check marks white and then it switches back to dark gray and I'm doing all this with a keyboard which is pretty cool right but d cool and that's like basically all you need and this is like beautifully accessible too so check this out if we look here you'll see here's the button and you have aria-expanded true right because it's open when I highlight Ric Flair let's see let me just let me okay so we got Bret Hart selected you can see the active descendent is to enjoy a list walks ID 21 these are like automatically generated IDs for each one and that has Aria selected true right as I hover over as I choose macho-man you'll see that's what just aria is selected true so all this stuff is working perfectly if I was like switch on voiceover alright welcome to voiceover so you won't be able to hear it but you over on System Preferences Chrome Lu to Google selected rasilla Jake the snake Roberts so I can hear him like saying selected wrestler Jake the snake Roberts in my headphones Jake the snake Robert macho man Ric Flair brett hot stone cold duelist Brett Rick gently Hulk selected wrestler Hulk Hogan that's pretty cool voiceover all perfectly you can hear it that's cool so that means that you can live is automatically doing the system audio it's that's sweet yeah so this this is pretty cool I'm pretty happy with like how this works now say we want to look at transition so like when we close it maybe it fades out originally I was experimenting with building an API for transitions directly into the list box list but for the same reasons of like V show versus VF and all that stuff it just ended up feeling a little inflexible by getting rid of all that stuff now you can just use a regular old view transition object or component and now we can just do like enter active claw or let's just fade out I've been studying a lot of you eyes like good ones like Mac OS and stuff to see what they're doing for animations and most things open instantly and then leave a little bit more gracefully so we'll do it leave active class transition or duration say like 300 is going to be slow but it might be easier to see on the stream so then we'll do like leave class which is like what we're starting at so we'll start at opacity 100 then leave to class we'll go to opacity zero so with any luck this should list fade-out now when I click stuff yep fades out that's pretty sweet right and now you can see we can't we have this like pointer or this regular default cursor here we can of course like do whatever we want so we can just say cursor:default we can even say like select none and now you can't select the tax so behaves more like a regular drop-down now so another thing is like this button here we could do some focus styles on it right so say we did a focus outline:none focus border blue 300 focus shadow outline blue this is like using tailwind you eyes kind of customized utilities alright so yeah now you can see we've got like a nicer focus style and then this opens up and it's pretty legit right and then it goes back to that when we're done and now say we wanted to keep that focused out even while it was open cuz technically what happens raised when we click this button this list gets focused so that becomes unfocused but I could totally see an argument where while it's open you want a dot to remain focused because like as it kind of a unit they are still focused so for that reason we expose that to you as well so if you go here you can do like a V slot equals is focused and this will tell you that the that the button is focused now because of the same limitation of slots not being able to be accessed here we might want to basically grab this jump down here throw in a span move this up add this class here and see what I've broken I didn't have a class and yeah okay that's fine so we'll do also hope you like a width full here all right so now like we can't get any focus stuff on it all right but we could do like focus outline:none here then we could get rid of this stuff and instead we could replace this with just a dynamic class binding so you can say class equals is focused if it's focused will do border blue 300 woo shadow outline blue and if it's not focused then we'll just do border gray 300 and then we'll get rid of this one all right so now like we get the focus tiles back and oh okay so yeah we get the focus back now if we wanted it to be focused even while it's open we could just say okay well if it's focused or if it's open then we'll keep the focus tiles so now there's staying there all right so you have all the flexibility in the world like you could do literally whatever you want and even here we have some of this tail and you eye the product is paid but like these components are gonna be totally open source and free and you can use them however you want you can use them Intel and with filling do I like we're building them because we need them for tail and UI but we're just gonna open source them all and you can just use them however you want just like another project just like tail end is um okay what was I saying I was basically saying yeah we've kind of kept this simple right it's just like lists of items but of course like you could do anything that you wanted in here say we wanted to find like say we wanted to make this a little bit more complicated we've just got like a rest our names here let's like make all these like objects so we'll do like name and then let's give each one like a UUID and maybe we'll do like a avatar for them can I just like get this to format everything on separate lines please all right so let's just maybe do like a faker image avatar so these are obviously not gonna be real avatars and things are gonna be broken right now cuz we've kind of messed some stuff up by changing these two objects so let's go up here and we'll put the rest will display the wrestlers name and we'll make the selected wrestler a UUID instead so we'll just say we want to match that's like Macho Man is gonna be like the selected person okay and then up here where we have selected wrestler let's make a computed property to find the selected wrestler by the ID so we'll do computed selected wrestler is gonna be this wrestlers dog find wrestler this selected wrestler ID will rename that triple equals wrestler dot ID and let's name this to ID and then that should be back to mostly working selected wrestler name all right so now we've got like this is back to working but now we're using like objects instead oh wait what it's like Oh V model is busted selected wrestler ID we've got errors what have we done what's my mistake selected wrestler named V model selected wrestler ID so let's the wrestler ID I guess we can look at the console avoid using duplicate keys detected that's why okay we can update our keys where's rav4 let's do wrestler ID since now we have a unique identifier this will be view react and hopefully Alpine as well to start and since it's gonna be open-source there's a chance that we can explore other stuff to you especially with the community help I write them as Pascal case because I do some react and I do view and that's one thing that's the same in both or works the same in both if you look like there's like a view style guide and you look at like multi-word component names mmm where's it component single file component file name casing first case component name casing in templates in most projects component names should always be pascal case in single file components but kebab case and Dom templates so they recommend doing pascal case instead of kebab case so i do it okay back to this we look looks like we got is working now oh what have we done now scroll interview of undefined Oh value we gotta update value to be wrestler ID as well I have no idea when it will be ready I just started working on it this week so it'll be ready when it's ready I'm hoping to create a repository where I have some of the code public as early as possible but we'll see I again I would be very surprised if I could do it with stencil but maybe the code for this is absurd right it's all render functions using crazy stuff like views provide inject as context to be able to implicitly share data between all these related components it's like very advanced code using a lot of very specific view api's and I don't really know how you could I'd be very surprised if it was possible to have like a generalized solution that worked for everything okay so this is back to working now that we've made all those updates to IDs so let's display like their avatars again this is just to demonstrate like how easy it is to do totally custom stuff right let's just you the image source is gonna be wrestler dot avatar and we'll just do like h6w six rounded full and maybe we'll put this in like a div that's got like flex items Center space X 4 and we'll wrap the name in a span and look at that it's not the actual wrestlers of course but now like we have avatars in our drop-down and we didn't have to like do some crazy configuration option or anything we just literally write the HTML that we want like we have complete control but again we didn't have to write the word like Arya in here a single time but all that stuff is totally handled for us we don't have any like at key up or any of that stuff it just all beautifully magically works it lets you basically build components just like a regular old HTML select component in terms of automatically being accessible automatically working the way that you'd expect you don't have to have any of that knowledge yourself but you still have complete and absolute power in terms of how you structure and style things so pretty cool I am pretty excited about this project and I'm excited about tackling new components and converting it to other stuff what about a placeholder value so you mean like if nothing is selected right so let's do like selected wrestler ideas null so that there's no wrestler selected we're gonna probably get an error right because we haven't handled it but then up here we could just say we'll do like a span will put the selected wrestler name in it do another spin here so we'll just say like V if selected wrestler V else we'll just say select a wrestler all right there's a placeholder value we choose one and now like the selected wrestle option it's gone and you can only stick with the other stuff if we wanted the ability to like get rid of the selector wrestler thing we could absolutely just add like another list box option at the top and I'm not gonna bother like we want it to be styled the same way right but whatever we'll just say like nobody and we'll say value is null and I guess we'd have to do like the is selected is active stuff on this too so it's not going to be perfect in this case but we can now select like macho man and then go back to nobody if we want it so you can imagine like what we would do to get this like working in the most bulletproof way possible form validation I mean it's the same as it would be with a select right you have you just have to write the logic yourself on the client to make sure like when someone tries to submit the form if some required field is null then whatever I get your point I guess if you're thinking of like the required attribute like the HTML stuff couldn't it be handled by the library I mean it already is handled by the library if you want it to be but I don't want to expose a bunch of configuration options like that's the biggest mistake anybody ever makes with all these libraries is having to pass a bunch of props like list box list like default placeholder pop over corner radius position when it's raining you know like this is what ends up happening when you try to do everything through options if you can just yield control of the whole thing to the end user then they can literally just do whatever they want so if we want it to like make this placeholder thing an option I would just go through to the wrestlers thing and I would just drop in like a name of choose a wrestler you know and then like an ID of null and then for the avatar I guess we would just do a null avatar probably two and then we could just go up here and then we could just do like a V if avatar V else then we'll just like do that you know you could you could remove some of its duplication clean it up a little bit property or method avatar restaurant avatar okay so now we have like our null option you know and you could say if the value is null we'll like don't show the checkmark right we could say we show is selected and wrestler dot ID does not triple equal null so now choose a wrestler won't get the checkmark but the other ones will like this is all user land level configuration now right like we're able to do whatever we want and we didn't have to expose any quirky configuration options are way for someone to open and github issue and be like well I want the icon to change color when I select it and now I have to think about mmm what's the API I should expose for that that's like I never have to do that because it's just up to you you have complete complete complete control so yeah and again we could make this look completely different right we can make this square we can make this pop up above we could do whatever we want literally anything we want and it's all fully accessible and just like works beautifully so I love it this is gonna be completely open source like I said before I don't know I've never written any type script but that would be cool I would like to learn to do that and I think that's something that we could get help from the community - yeah so if you wanted to have this like pop up above based on like the screen size view box viewport dimensions and position we can probably come up with a way to make make that easy from within the library you know like we could probably give you a slot that kind of tells you where the best place to position it would be or we could maybe help you do it with popper j/s but the nice thing is like you could already do it with popper j/s right now if you just created a popper instance and you attached it to this list box list and you also attached it to the list box button as like the thing that it monitors it popper will tell you where you're supposed to put it and then you just use the right classes to put it in that place like this component wouldn't actually care about any of that stuff so anyways that's kind of what I wanted to demo because I'm super excited about this and I'm really looking forward to like for example I'll show you kind of like what prompted this if you look at the old telling you I project itself here and we wait 45 minutes for it all to compile because this project we have to compile tell one two three times because of a bunch of stuff I don't know it's disastrous but it's fine so once this is done we'll be able to I'll show you some stuff quickly and I'm a wrap up so slow because of so many giant CSS files being compiled let us go wait here anyways okay so it's done so we have like this the secret workbench area that doesn't actually this route doesn't exist in production only locally but you can see like we built all these select menus right so here's like a native one which works great but then when you get to like the these custom ones I need it to like make these demos work in telling you why when people are browsing them but if you're looking at like something like this or you're looking at one like you know here's a kind of a cool idea with like the secondary text next to it again super easy to do with the API that we've created here or like with a status indicator with like different statuses super easy to do with the stuff that we've done putting the check mark on the Left super easy to do right because you control all the markup if oh you know what else is cool by the way and this is all fully working say I want it to like go to Bret Hart just using my keyboard I just type Bret Hart just works macho man jake the snake' stone-cold you don't have to write any of the code to do like the type of head stuff it just works magically so good it's so exciting alright so anyways all this stuff like all these tail and UI components the code that we're gonna give people is just like not pleasant to work with you know cuz we would just be giving you like basically something like this you know like this you'd have like 18 copies of the same Li we there be gross comments above every single one and you'd have to like go and build a Select menu completely from scratch you'd have to implement all the up/down stuff and this is like an old Alpine based one from a couple weeks ago and this doesn't even properly handle all of the Aria stuff completely you know it's it's it's good enough for just like getting people that see the states of the component and I understand the design but it's not good enough to put into production probably really it doesn't have the type-ahead functionality or any of that stuff it's pretty good but it's not fully complete whereas like this one I've I've really kind of nailed this one I think but anyways I know people wanted these components but I was kind of nervous about publishing them because people would get them they'd see them and I think wow this is really cool then it copied into their project and realized oh now I have to spend a week building a custom select menu to make this actually work and I'm probably gonna do it poorly you know and that that was just like is that a good thing to do does it make sense to give our customers components that like a really like beautiful but are like deceptively complicated to actually implement so we decided you know what like we're just gonna bite the bullet and build these headless UI libraries that we can use to power this stuff so that when you copy the code it would look more like what we built you know a couple minutes ago so when you caught so here's kind of what I'm imagining imagine you came to here and this is actually funny because like there's commented out code that kind of already has this place because I've prototype this and revert it at so many times but you're gonna come in like toe and UI and now there's gonna be two tabs so you go preview then you go code okay now you've got two tabs just like the HTML and then instead of this saying demo imagine this says like you know view and maybe probably mmm definitely this is gonna be like marked like this you know to start while we kind of work out the kinks and stuff but you'll be able to as my mouse Ted that's sad you'll be able to oh it's back you'll be able to go and just click like the view experimental thing and you'll get a component that looks like this where it's consuming our list box and it'll just be kind of like this you know we'll have a bunch of hard-coded data in it just to seed it up and then you can delete that stuff and wire it up you want but this is the plan we're gonna have like view react Alpine and that'll be that me will probably still offer the HTML one with the comments and stuff but I think for the interactive ones most people are probably not going to use that and yeah so once if we have this stuff done you'll be able to do that so here's the plan I'm going to I want to ship these select menus that we've built it's because it's been a few weeks since we've published something and I just haven't wanted to ship them until we've been able to provide the JavaScript stuff so I think what I'm gonna do is ship these I'd like to say today but it's unlikely it'll probably be Monday so say Monday we'll ship these custom selects that we've built these like five custom ones and this like basic one and when we release them it'll probably just be the HTML in the view version and the view want to have a big comment at the top kind of explaining to people what we're doing and I'll write an email that explains it too and then I'm gonna start working on a react version of the same thing and we'll give people access to that and these will either be in like a repository or they might just start as like a gist of the component for the people who again it's experimental right like I'm not ready to like tag it on NPM yet because that is kind of restrictive but for the people who are interested in trying it out like we'll make it available so yeah anyways that's kind of what I've been working on I'm really excited about it I think the API is really slick I think it makes it really easy to do stuff like this and it feels like it kind of gives you like superpowers which is kind of like my favorite thing to do when building developer tools is just build stuff that makes people feel like holy crap like that was so easy you know so I'm really excited to dive into this we're hiring someone the job posting is already closed but we got like almost 900 people applied and that person's job is basically gonna be helping we build these render list libraries and maintaining them on github I'm so that's gonna be fun so hopefully we can crank through a lot of that work and get some of this stuff out I'd like to I'd like to imagine that by like the end of June we'll be able to say here's like a V you know 0.10 of like both of you and the react libraries for the types of components we already have in Tomah do I so we'll probably have like dropdowns the custom selects maybe the modal's and yeah that'll gonna be that so thanks for checking out the stream I will let you know when I have some more cool stuff to show and keep your eyes peeled for when this stuff drops because I'd like to get some feedback from people who want to tinker around with it and let me know how it works for them or what edge cases I'm missing here's like my to-do list oh I think stuff that I'm going through by the way so like this this is all the steps this is like what's left I actually did this one already this one's done I still have this issue we're on load it double renders the component but it might not be solvable it's not really a problem but it's like if I can render it once and so twice that seems better but yeah it's been fun basically running into little edge cases and then like cranking on them so that's that I hope that was informative hope you're excited to tinker with some of this stuff and yeah thanks and we'll see it the next stream so yeah

Channel: Adam Wathan

Views: 16,024

Rating: 4.9285712 out of 5

Keywords:

Id: fx2lbOCAqrg

Length: 55min 51sec (3351 seconds)

Published: Fri May 29 2020