Building a Slide-Over Panel with Tailwind CSS

okay hopefully we're in business here and streaming away okay so having done a little stream in a little while thought it would be fun to do one so let's clean up some stuff here so figma is not eating up my whole life and yeah so this is a plan we're going to build some of these slide over components or at least one slide of a component that Steve has kind of you know our build in box here stuff that's been designed and is ready to go and I'm gonna build that out in our toe and you I kind of like environment here all right so let's let's get started so first step is always to kind of create a new component so I'm just going to grab like one of these and we'll just duplicate it and I think we'll just say like slide over and what it's Steve call it he called it branded header with form so we'll just call it that duplicate slide overs branded header with form so this will be I think that's overlays slide overs and it header with form and with any luck we should see a component there okay so here's the slide over so obviously this isn't a slide over yet but it will be hopefully shortly so we'll just start with like an empty div here and we'll just try and build it so I'm trying to think what to do for there's kind of two elements to this like weird file format that we use this is kind of like the layout this is where the component gets rendered but it's kind of like the shell that we want to render it in so I mean we could probably just start with just a div but we might want to do something like I don't know like 700 pixels or something like that because we're gonna have this like absolute positioned weird thing so I don't know let's just do like 800 pixels arbitrarily again this isn't what code anyone else sees it's only code for kind of our benefit but yeah so that should give us like whatever this is now so you should see we have like this min height 800 and this will be useful for when we actually render it in the toe and do I preview to make sure that it has like a height one thing I'm actually wondering before we even get started probably doesn't matter for the beginning here but I'm not sure how Steve intended for this to scroll like if the screen got shorter should it just be this panel that's kind of scrolling on its own or should the whole kind of screen lock and scroll interesting we'll figure it out okay so let's just start by building it like statically and after that we'll work on making it actually animate so we're gonna have like this is gonna be like the wrapper for everything I know we're gonna have like an outer element for possibly doing like a background overlay or something or at least like the fixed positioning and all that stuff I don't use view for building any of these things this is all just using Alpine and Alpine it actually gets converted into comments by our build system so there's actually no js' at all okay so here's kind of this div I think is what's gonna be like the whole kind of panel right and then we're gonna have like a header I guess we could probably use like an actual header for this I don't know semantically like do we have to put this in like a section for it to kind of be scoped I don't know we'll make it a header I'm gonna use like an h2 because there's probably another h1 on the page in the in the real world like where someone's actually using this and this is gonna be something holding this button so I think we do X or o a con named X Type O one class h6 w6 this will be a button so we'll can't forget that part indigo 200 and I think we need like aria-label close all right the annuity process is not over for the toe and dry job posting Yente but we haven't gotten back to everyone about that yet still in progress okay so yeah so we've got that button there now sure I mean it looks terrible but just trying to get some of the general stuff in place if you look here how Steve doing like the wrapping he has it going right under I don't know if that was always the plan or not but we'll do it that way so this X I think we're gonna put that in the same element as the h2 because it looks like it has to be like centered with it and then we'll do like a P tag here and we'll copy this paste that in alright so we got the header after the header well I guess was have like a div don't put like some input groups in there so I'm just going to go to toe and UI to grab those and put groups just grab this okay and there's some weird formatting here and I should make a note to fix out at some point so go project name project name description no placeholder on this this is gonna be a text area I guess so we should update that okay seems sensible and those should be like sort of styled yeah so that's pretty good and yeah so what's you've got four well okay let's just keep let's just keep dumping stuff in and getting ahead of myself here it's been a little while since I've actually built one of these something I always wonder semantically you have stuff like this where it's like this is a label this is an element but here what is this relative to this is this just like a heading is it like an h3 you know maybe alright let's put this in a section [Music] we are going to build view and react to UI kits like proper good installable updatable ones in the nearer ish feature that is on our roadmap that's a new project okay so we've got this like Avatar group here I don't think we have oops what am I look what I'm trying to do here avatars yeah we don't actually have like a group of avatars that is not overlapping but I'm just going to take this one and let's get rid of that and I guess like since we're not going to make them overlap we don't need the outline on them and Steve had five of them here so maybe we'll add one more and put on splash and just find someone this guy so we'll do the old fit face area face pat equals two with 256 and height equals 256 trick and maybe we'll pad this guy's face a little bit more there we go okay so there we go we've got some folks and then we've got this little plus thing which I guess is gonna be a button one thing I'm beginning in habit of lately which actually been liking is enabling text wrap in my editor for at least four streams and stuff that's telling not soon the rightmost component stuff will not be soon we have to hire someone and it's gonna be someone's full-time job to be working on that for probably until it's done it'll probably be like three months four months but until we get like the first couple components out hopefully a month six weeks feels like I haven't written any code and actually a couple weeks because I'm so busy with HR related crap xro a con what size is this one twenty by twenty so type solid name plus I don't know text gray 400 actually this has to change based on the button being hovered so we'll do that up here and how big is this circle I guess this is gonna be the same thing right we're gonna have to go like inline flax H 8 w 8 items center justify Center and I guess we're gonna want to do rounded full border-to-border dashed or something yeah I mean like that's pretty good all right cool and what color is the border gray 200 okay how much space is between these people eight okay and I think we're gonna want to copy whatever the styles are for the labels for this there's no beautify for Tailwind coming but we're gonna build our own UI kit with you look like Steve's used a different color here that we normally use for labels he's using text gray nine hundred so I guess we'll match the design but it's a little different than what we would do for forms typically and between these we've got eight so space Y - that's interesting what's he got on this one four so I'm gonna fix some of this so I'm gonna switch this to space by one and get rid of this empty one here these are things that will eventually probably back for it to any existing toe and UI components because some of these features didn't exist at the time okay this form I think I can kind of copy out from somewhere to you honestly form layouts like it's basically it's basically this so let's look for comments here all right so the probably it's this fieldset all right this is just a custom build script it's like maybe the worst thing you've ever seen it started really simple and then has just spiraled in complexity over time to just be a bunch of disgusting regular expression replacements and splitting strings and ripping stuff apart and then it runs things through blade to disk and reads them back it's pretty rough okay [Music] so I guess we'll just call us privacy public access private to project members yeah change that capitalization my markup skills feel rusty for some reason really feels like I haven't been doing a lot of programming which is definitely true but that's crazy to me though how noticeable it feels okay so we gotta make these all like radio buttons I guess that's probably the only thing we have to do though now hopefully a Steve has just made these the same time just aisle 12 yeah I'm guessing so with the pl7 here these should be relative if I'm using absolute on the radio button we'll probably do an Alpine thing too not a hundred percent for certain like these are all we still haven't even had time to think about these projects in depth yet so I guess this is gonna be like privacy public privacy private to project privacy private oops okay so now these colors are difference that's 900 opinion on the hey vs. Apple thing I don't know I think I think Apple is wildly inconsistent with how they review and what they allow on the App Store I think this rule about like signing only apps are allowed for business but not allowed for consumers feels very arbitrary and I don't think that was ever truly documented I think that's sort of made up new so I don't know it's tough because I can see the argument I mean I think Apple deserves to make money for putting for distributing things through the app store but they let people distribute free apps through the App Store for free so I don't know I really don't know I think I think it's done that they forced people to allow a payment option but I also think it would be reasonable of them to say hey do you pay X dollars per month based on the number of downloads your app gets or something like that to charge for their bandwidth and stuff like that but yeah I don't know I'm curious to see what happens I want to be surprised if they just end up having to raise the price of the app for people who buy it through the app store just so that they can get it in there like charge 130 bucks for people who buy it through the app store and just give an option to do it it's kind of dumb though that would annoy me in some sense as a business owner because it increases the complexity of your billing stuff all right thanks David lure Aria described by to the label and point to the ID of the appropriate paragraph yeah gotcha so if I was to basically go yeah you know what I my biggest I think like one of the biggest obstacles for people like implementing things excessively when they're doing H overall like this is just idea everything all the time so you don't most want to say like privates privates to project description you know something like this and then we could say like Aria described I equals and then we could do the same thing for a bunch of these other ones so I D equals privacy private description and I D equals progress this should be privacy and this should be these should be privacy to you though this is when it's nice to just do everything with some JavaScript framework where you can just have a component for like a label and description pair and have the IDS auto-generated and not worry about a privacy public description Oh on the input I don't think there's gonna be a clever way for me to capture bummer yeah all right so I'll just do this manually for each one again painful you understand why not understand why but you know it's people are lazy with this stuff because it's tedious it'd be nice if making things accessible was easier more automatic okay cool so I mean this is not gonna look good but whatever so space here is eight so basically let's get rid of this moves out a space y2 now is everything else different too this has a two between it but it never did before sigh like if you look yeah [Music] - how to pixels yeah I'm just gonna do nothing there because that's weird that it's not consistent with the other stuff okay so then we've got a border below that one so to me that kind of says that there's another divider or another div here and this div has like a divide Y divide gray 200 but that doesn't make things like padding trickier that's okay all right so you look at div with the link in it so XO relic on name equals I don't know what that's called is that like link or is it like chain link link type equals solid class equals H 5 w 5 I stopped so much styling - holy smokes and to go 500 it's this thing to go 500 - that's 600 ok text indigo 500 yeah we could use an HR but yeah I've heard conflicting reports on the semantics of HR for that type of situation okay so let's wrap this in a span just so we can be more easily style it and in line flex I am Center gap here is 8 so we'll go space X 2 and 16 between there so let's take another day of here extra row cons is just a custom component just a blade component I wrote it's kind of janky cuz it has to look in two places because of some legacy issues but all it does is just pull the SVG out of node modules and inline it and add the class attribute okay so we're gonna have another link here same thing really SpaceX to inline flex items Center I think this is probably what text small lighting 5 again yes what was I dot here text SM mining five okay so X or Okan name equals we'll find out question mark circle next gray 400 I'm guessing 400 and this is 500 so we'll just do text gray 500 here and text indigo 600 learn more about sharing I don't really have any work outside of tow and work as tow and stuff is my full-time job so I'd write laravel for tailwind related projects though okay so it looks like we got a heavier font way here medium I feel like I'm programming these templates way slower than I used to back in the day when I was like rebuilding the net laughs I dashboard a rebuilding coinbase or all that stuff I don't know maybe I'm getting old or maybe I was like on I don't know speed all right get him warm in here I'll check this out by the way I don't know if you can see my one-of-a-kind almost too insured there's only only two of these ever made one day we were gonna make like a store or something it'll be kind of cool all right so we got a another divider here I guess like we need some padding and stuff like that so why don't we use like slam this into a container and kind of get that started so we'll take this panel and we'll give it a max width I don't get my autocomplete that's a bummer I'm gonna have to bug Brad to help me get all to complete going in these files we have a really gnarly tale when setup for the this project where we actually have three Tailwind config files so it's pretty pretty gross but necessary all right so we have a max with XS on this fixed inside zero absolute in set y 0 right 0 I think we're gonna wrap this in another div so this will be the panel kind of just the size and positioning and then we'll do like the styling so this is gonna have some sort of shadow I think shadow Excel and I mean that should start to see like the shape of it a little bit better here and there's this white yeah so I think will give the whole panel a background of white just so we can at least see it scrolling thing is going to be weird to figure out what should happen see how I can't scroll the hmm I'm guessing like this should be over for why Otto just the thing yeah okay so now I like the individual sidebar panel is scrollable which i guess is probably the right way to do it okay so let's just go back to styling and maybe we'll add the buttons at the end all right so this panel up here got 24 and 16 for the padding so we're just gonna say py 6 PX 4 BG indigo 700 and that should give us something and then this is text LG letting 7 font medium text white and this is going to be flex I am Center just 5 tween and I don't I guess we don't really need that okay so what does Steve have for hover States on that I wonder how our text white okay probably shot transitions to be consistent with the rest of tale in July but for now I'll just do it this way okay so now this paragraph is text SM letting five text indigo 300 okay yeah what's the gap between these oh four okay and then the bottom hiding is correct 24 okay so now here we've got like 24 pixels of padding at the top I'm guessing that's 16 so he probably went 16 at the bottom but we'll probably treat this as his own panel since that goes edge to edge this gap is 24 so there is like 24 pixels of padding that's 16 24 24 20 Steve okay some weird stuff going on here but I accept it okay so that means we're gonna go PT 6 PB five on this div and then the div with the copy link it's going to be pt4 so we saw p b6 okay and the horizontal padding is gonna be on the whole container the thing that has the divider and that's just px4 alright so what we got for like this one two three four rows of text in that text area I would say okay and like these would probably be links or something or maybe buttons that like pop up a little menu I don't know let's make links for now oh my goodness what have I done okay that should look the same and it's gonna be something like gross focus styles on those guess I don't really need overflow:hidden on this anymore but I accept it for now oh wow do we not name these radio buttons the same input type radio' name equals privacy just label wrong on the second one and labels okay good enough and then we've got a sixteen gap between these so we need to make sure that we do a space why for here it seems bigger than go Steve had my imagining things or does that seem bigger sixteen yeah see how that's too tall you know why because you put the lighting on the wrong thing classic mistake make sure that whenever you're doing line height and font size that you added on the nearest block-level parent not on an inline element because then the parent will be the wrong height all right that still looks weird hmm that should not be 25 pixels tall it should be 20 pixels tall okay so it's 20 now this one's still 25 okay so one thought is the I don't know why that is why would I mean it's gotta be because of this inline flex thing no it's it's it's this is like oh you know what I bet it is here's a stupid thing that's gonna make you want to kill yourself I really hope this isn't true because God knows where else to supply me a line middle it's still not perfect what on earth yes we choose the right height these are both 20 fix those tall this is 20 pixels tall this is 20 1.19 so I mean I bet you I could fix this with Flex but why have I never noticed this problem for so doesn't look right oh no that's right now okay so making it display flex fixes it that is odd hmm no it's to do with the it's it's something to do with the relationship between the text and the line height on the parent and how it interprets the height of this inline flex element and what it thinks it should be doing with the line height now is literally nothing to do with the SVG like I bet you this is still screwed up even without the SVG maybe not so and so confusing alright well we're just gonna live with this solution as depressing as it is what is the gap here twenty so the same as we have no it kill me sugar can't just make things as consistent throughout the whole product eight is that right okay the SpaceX classes from Tel 11.4 I think ok so let's add these buttons so here's the thing with a divide we'll do like a divide Y divided gray 200 on this one too and after this div we're gonna add another div with some buttons and it's PX 4 py 4 and we'll just kind of try and find like a form that already has some buttons to copy so like these ones look acceptable so just got a bottom of this what do we got for a gap between them 16 SpaceX for flex items end hmm that's suspect these items end not a class I mean Oh justify and jeez imagine I knew how to use my own CSS framework yeah dark wind dark mode is on the roadmap okay remember when we used to have a shadow here where'd that go that's we've got like scrolling in the background here that's because the overflow:hidden we're moving the shadow I guess we got to scroll things happening now but what can you do ok so this is looking pretty decent I think um I don't go forever on the stream so also I bet use design does not count for these sizes oh it does smart Steve all right let's try um do like the animation stuff and then then we can finish it because actually it doesn't change that much as we get bigger once we go up to the bigger sizes it's like barely changes at all alright so I still want to do about this scrolling we can figure that out it might just be it might just be that I want to do like inset x0 top:0 get rid of this overflow:hidden get rid of a full Y auto here put the shadow Excel back on here and then maybe this will still just work better no I I might need another div dot absolute dot in stock top zero dot and said I wonder what happens if I do this also we lost like a comment now but the panel not that it matters I don't know what I'm doing okay this is probably more like what we want what the whole thing is scrollable at which point we might not need that extra div now okay all right so alpine this isn't actually Alpine here but it's something we used to generate comments will say slide over panel show/hide based on slide over state and up here we'll do like an X data equals open true do next show on open will have our button here we'll do X or does it act click equals open equals false I don't know let's see if this is at least like hides okay so this is kind of my trick for this so I said like open equals false set timeout open equals true after like one second this is my trick for making the demos kind of interactive so you close it and then it comes back okay so let's do some transitions I guess X transition enter transform transition ease in out duration 500 or something X transition enter I'll remember the Alpine API modal's let me just look at one of these enter enter start enter end I've been using view a little bit lately v3 so my mind is a messed up with these api's okay so we're gonna start from trance translate X full X transition enter end [Music] is going to be translate X 0 X transition leave is going to be transform transition ease in out duration 500 X transition leave start is going to be translate X 0 X transition leave and equals translate X fall yeah I would add alt text to the images for sure and like a real thing but off the the problem is I'm trying to do a live stream where it's interesting and we get through stuff quickly and I don't want to like to sit here being like what should we name these people for 30 minutes you know so it's like Tom Warner Sally Preston Dave I don't know Guzman Tom cook Brandon Rogers oh yeah I should have just taken people's names so anyways we have some people now so all right so we got like some transitions here now whoo I feel like the entering one should be I don't know fast lower kinda want it to be like wonder if I just go ease out so I enters a little faster but then slows down that's promise with just ease out it's uh it's a little unnatural looking cuz like it's not like the it needs to it needs to accelerate so I think it does need to be easing out ease and curves are my worst nightmare the ones we use are based on where is it he's they have this standard ease and curve which is a little it's I kind of wish we had something that was a little less linear like it doesn't look that linear but it often doesn't feel dynamic enough like it almost feels linear even though it's not so I spent like a month trying to pick custom and animation curves and easing curves and just give up so it is what it is at this point I'll fine-tune those with Steve maybe yeah so that works now I hate by the way that when I click this button they add a focus ring to it just because I clicked it it drives me insane like because now I have to think of like a better or focus state because ugly this one is even though for keyboard users that's actually like a perfectly good focus dig this is really easy to see but like I only want the focus state to be visible for people who need it instead of making it ugly for everyone yeah but you can't do outline:none unless you're an you can do it as long as you combine it with something else but yeah that's why we need focus visible in browsers so I don't have to hate this so much yeah that's decent though I think all right so how does this look on like 320 so check this out see how it's like so on like a I'm like an iPhone se or I'm like a regular kind of run-of-the-mill kind of modern iPhone I think this is the viewport width right which seems okay on an iPhone se it's like the exact same width which is maybe fine yeah maybe that is fine basically we do with full Mac's with XS and yeah I don't know I was trying to decide if there should be still a little gap here but I don't want to do that I know I could pick a phone from the drop-down but when you do that like you lose the ability to do some things figure out se what's happening why is there horizontal scrollbar showing up did you see that that's nightmarish overflow:hidden back again hopefully I can figure out this problem so this is scrollable so just just so you can see what I'm talking about it's a me added like transform translate X 1/2 here see how I can scroll to that I don't want to be able to scroll to that when it's translated off-screen so we have to figure out a way to not make that possible is it possible to do like over for y auto overflow X hidden okay that's the solution yeah you could disable the I mean this seems to work so let's accept this doot doot yeah this is good I can live with this okay so what about like a little like overlay like a background overlay now by the way say we did want to do this like 320 thing I was trying to think of like a clever way to add that gap I think like the easiest way I can think of is just doing like an ml 10 or something here does that work no okay so we could do like a PL 10 on this I bet Oh except this absolute positioning hmm what would be like a good clever way to do that the only thing I could think to do is like um the problem is with stuff related to the parent element as this is absolute this is absolute [Music] it breaks my like Max wood thing though like I want this to be a max with the 320 here but like have like a kind of a block here that I guess like can't be shrunk let's see if I can think of something smart okay I add another div because everyone loves another everyone loves a good extra div right I'm gonna make this div have these classes and we're gonna make this with ten okay so we broke the out of that so we got that I know that it probably is perfectly fine but I kind of just want to figure it out you know say we put this back to with full what happens then okay so what's the actual width on this 320 okay ah we did it and it looks janky as hell and also this isn't full height so we'll have to figure that out the Flex thing might be making the performance of this animation poor maybe it's not too bad though that seems to get all these avatars actually you know what they don't stretch out this size so it okay so let's fix this height thing [Music] problem solved alright ok so that's pretty good and then I think the only difference in the whole design is that after 640 Steve bumps this up to 448 so what's that twenty-eight REMS max with Md it was the SM max with MD okay boom boom yeah so dude we might want to change the duration at the size two because the panel is bigger now so but it's sliding over a bigger distance so if we wanted to kind of feel like it's moving at the same speed I don't know I don't think the footer has to always be on bottom but I can ask Steve that that's definitely doable though that's a valid valid question oh what have we done now in age fall are you magnificent bastard all right thanks problem solved I was a little bit surprised by that because I thought it would be the full height of the parents but I guess the parent can't know it side because it doesn't know the height of this thing so yeah nice okay so I think like the only stuff left to do is like a couple hover States so let's see how our text grade 500 on that weird button let's add a label here before David sees okay copy link so we're gonna want to do group hover text indigo 500 group hover text into go 400 and then similar sort of thing here group hover text gray 900 group hover text gray 500 do to do to do to do to do you probably want to put transitions on all these to match some stuff that we do in other places transition ease and out duration 150 lots of lots of crap okay let's see that feels nice and smooth now yeah I don't know if it was wise in hindsight that we do all these flashy transitions and all the time we do high stuff because I think it discourages people from customizing things which is fine if you know that's how it ends up being but ultimately when we were building this product we had this picture in our head that we were creating these like kind of like uh opinionated simple blueprints that people could use for common UI patterns but in practice it's turned out to be like much more people just use it exactly as it is I think we're missing transitions on these too that's a bug all right you should do that x2 okay did we miss anything else I don't think so so yeah we can do that like the clothes it on a scape thing that's that's easy to do should be hmm I don't know if we should do it on oops on escape necessarily but maybe click away equals open equals false I guess we got to do this we'll just do this thing yeah maybe we should call it on escape the problem is like what do we do just like key down to escape equals paste this in and then let's see something for a second hmm so clicking away it works now escape works as long as you've got something focused but until something is focused the event doesn't fire so I feel like what do you need to do like tabindex zero like this needs to be like focusable or maybe not this but the panel needs to be focusable this is a David thing for sure so if you were to as soon as you open this I think the idea is that the whole panel should have focus or maybe the first item should have focus what's the correct behavior there David lure is it a do you focus the first item on open or do you focus the panel wonder if this should have like a border or something down the side oops what am I doing here anyways I think um I guess cancel we can have a closer to you right why not oops oh yeah my biggest fear is on these live streams I'd like bring up my like clipboard history and like my transferwise password is in there or something oh wow that's gross so here I would have like ex-raf or something is like initial focus and then I think if you look at Alpine Jas there's like Watchers now I think so we could do X and Nets watch open value you could say value and graphs 'don't initial focus stop focus but now is there like a watch immediate now then I can return a call back here that does like graphs dot initial focused I'll focus also I don't know something like this will probably kind of work do you have any heirs it's weird that that's not working okay anyways not that important I think that's probably good for now I think I'll probably wrap up for a little bit but hopefully that was kind of interesting kind of built this thing out kind of ran in some fun problems I got a few more of these to build if you want to kind of seen in figma file I'll give you a little tour I started with this one but I also have to do these kind of simple ones where it's just like an empty one so people can kind of put their stuff on it one with like a background kind of overlay that fades in the brain it had r1 which is basically what we just did yeah I think you're right that these are supposed to stick to the bottom actually so I should improve that that's pretty easy to do though we could do that actually quickly let's find that div here it is actually where did Steve do the he do the border above it which actually would still work although it kind of feels dirty to do it that way now so I got this div we got this div which belongs to what that okay so here we want to go flex flex call flex and just buy between I guess what on earth this is supposed to be working hmm too much like 75% so we can see flex blah blah oh I put it in the wrong spot we can't really do it on this one we got to do one here too actually so this is gonna be flex flex call flex one that should do it there we go done so we got a cool little slide over thing and scrolling seems to work fine I should try it out with some real content in the background but this is good for now so yeah I'm gonna hack away at some more of these off stream so I can move a little bit faster and I got a ask some questions to Steve too but I'm gonna keep chugging away at these and maybe one other live stream of another one tomorrow or something like that so that's all we're gonna do for today hopefully that was kind of fun and I'll catch it on the next stream see everyone

Channel: Adam Wathan

Views: 15,390

Rating: 4.9411764 out of 5

Keywords:

Id: eSDRc6kyqBA

Length: 79min 2sec (4742 seconds)

Published: Thu Jun 18 2020