Thinking on ways to solve ​​SPLIT BUTTONS

welcome to another episode of gui challenges where i build interfaces my way and then i challenge you to do it your way because with our creative minds combined we're going to find multiple ways to solve these interfaces and expand the diversity of our skills and today's gui challenge is split buttons [Music] here is a split button a primary action like viewing your cart you know the most used action with a tucked away set of secondary actions so this in this case we have check out quick pain safe for later i think a really good example of a split button that you probably see all the time is the send action where the send is the primary email action and you have these additional options to save a draft delete it or schedule it for later and i think it's really important that the interface isn't being crowded constantly with all of your actions they're talking away some of the secondary less used actions into a sub menu and if you're getting really fancy i mean you can promote things from a secondary action to a main one like i think that happens in github if i often squash and merge it becomes the primary action and that's just really nice that the application can kind of give me secondaries as an initial way to introduce me to actions but then sort of promote them up into a primary one over time super cool so anyway the split button is full of all sorts of little nested components like we have this pop-up we have buttons we have svg we have hover effects we have all of that stuff so you know where we need to go to talk about all that right we got to go to the debugging corner boom over here in the debugging corner the safari is on top firefox in the bottom left chrome desktop chrome on android got our nice little environment set up here with all of our actual browsers okay so i'm going to pop open the dev tools on chrome here and start talking about the theme if you notice we have a light theme and a dark theme the light theme is very bright and vibrant the pop-up is like a white card and on the dark theme we have a desaturated color set still blue we invoke the background and we get a nice dark piece of paper right we're in a dark theme so how do we create these surface layers and how do we create all these interactions i did it all with hsl i really love desaturating the dark themes and i really like flipping mostly lightness so here let's open up i'm gonna hit command shift c grab our gui split button here and here's let's look at the colors so the light theme down here you can see we have lights lots of vibrant colors a nice bright blue we're getting into navies and some like light grays but a few different blues here that seem all quite saturated and vibrant and then up in the dark theme look at how they all look desaturated and we can even look at the values let's see so hue saturation lightness there's three channels in here these are 75 75 all of these are 75 saturated which is pretty saturated and up here they've dropped down to 50 50 oh theme active is still 75 so when i'm uh actively pushing it oh look it even looks a little more saturated i don't think that's too saturated though it looks great anyway i made the color so that better be the way right that's how i did some of the colors and these things just get passed around all the way down there is one interesting uh concept though here which is i liked this uh color here on theme so that way and look this is also not black it looks very black here and this one also looks like it's like a really dark gray but if we look at here it's 90 saturated that same blue hue it just has five percent lightness in it so it's very very dark color which makes it a really rich dark navy and that's nice because this is this is a dark navy sitting on blue i just think that those always look better when it's not black on blue you're doing a really really dark navy and as long as you can achieve your accessibility contrast scores which we do on this show all the time uh with the same technique i think it just ends up being really really nice so there's a couple color tips in there for how to do in a light and a dark theme and next i want to talk uh some of the shadows that are in here there's some really interesting shadows so let's go to the light theme first to talk about some of the shadows the first one is you can see on the button here that the text has a little bit of a text shadow on it now and the dark theme doesn't have that a dark theme with text shadows is kind of hard to do i found that if you add a light text shadow to a dark button it looks um like it's embossed instead of where it does here now in the light theme where it kind of looks like it's sitting on top and that embossed effect can be nice but that's not really what i'm going for here um but anyway i thought the text shadow was really nice when you hover that background text shadow becomes flat because it matches the same as the hover color so it kind of disappears so it's like the text pops until you hover and then it just sort of is and i don't know i thought that was cool another thing here is if we pop this open we look at the shadows on this pop-up if you look really closely it's not a black color there is blue in there right there's a shadow being cast off of this and it's not ever gonna be just white or black there's always a tint of color in your shadows and so i brought uh a little bit of our brand hue into the shadow even and here it is being multi-layered on its way down and i thought that looked really good and lastly um if we hover on these buttons we can see a little bit of a text shadow on them right let's see yeah just a little bit of a text shadow there and i thought that turned out really nice now the dark theme does have some text shadows we use um a shadow here so notice the shadow as this pop-up pop-up pops up and look at it layer on here so it's a really dark um blue color similar to the other one but it's a it needs to be a little bit more dramatic to sit on black but it also needs to sit on the button anyway i thought that just turned out really nice how that worked and if you look at these buttons when they're not hovered they're getting a little bit of that text shadow also the icons have a filter drop shadow on them so that the shadow can follow the shape of the svg turns out looking really sweet so those are just a few of the shadow tips in here i think they were little details that end up going a long way in making this thing feel really refined and you can find all that code in the article the colors and the shadows i think they're just ready to take if you want but always think about hsl and how you can how you can bring your brand color into these little thoughts here and speaking of little details we gotta talk about some of those svg little details here let me uh let's invoke this um button with uh let's see hover focus within yeah okay so now i'm gonna command shift c and find the svg in here and go to the svg okay i'm gonna stroke uh stroke down i'm gonna scroll down oh that's so funny uh because i'm looking for stroke line cap stroke line join and stroke width so the width by default might have been like one pixel and i was like ooh that's just too thin let's give this a little bit of a boost to two pixels now critically i have stroke line cap and stroke line join set to round and let's talk about what that means and how it works so let's go bump up the size of our icons so that we can see our changes here excellent that looks like it's plenty i'm going to go turn off both of these and talk about what i see and maybe you already saw the difference but look at the line end here so this is the line cap and now we have a sharp ending right here and if we look down on these ones see we have two little sharp endings on this horseshoe and here we have a pointy um connection point where these are joining now what we do with round is we're telling both of these scenarios to round out those edges and watch what happens look at that it's just a slightly softer edge and overall icon effect and i just think those little things can really make a big difference let's go back down to two characters um and that was just a small tip about svg i wanted to share with you i thought that was really important that combined with the filter drop shadow just made for a really cool effect i thought even more little details continue to go into all of the states that this thing handles so let's check out the state so we have like a dark and light theme we're gonna of course have reduced motion and we'll cover that in a second but let's talk about all these different interactions that need to happen in here we can see that there's a hover effect if i click there's an active effect and here it is in the dark or in the light theme if i hover and i click i get buttons and i think also in my opinion clicks and and hover events should increase contrast so if you look at to see like what i'm doing here i'm trying to make sure that i work and hover towards a color that's going to make the button more legible instead of less legible anyway i think that's just an easy mistake to fall into sometimes and to get all of these effects in a full view here let's open up our special little like state emulation tool in dev tools which i love and just click through some of these so let's go to the button and the button's gonna of course have a hover effect and we can see here's the hover uh changes right here we have a theme hover color and a theme on theme or a color called on theme and that's giving us a nice contrasting color if i hit active we're going to set the background to something a little bit brighter so that you can see your um your interaction there as a user right as you're clicking or you'll see as you're using spacebar from a keyboard okay so we'll get rid of those we also have focus within and so focus within is being used on this one focus within is going to prompt the pop-up at which point we here let's pull this down a little bit we could dig in and see the pop-up here yes right so if the gui pop-up button is focused within then find that pop-up itself and bring it in and so we're setting it to translate zero it's opacity one and we're giving it a speed and that's how it's showing up that way also notice pointer events is set to auto because when this thing is hovered out we don't want any of those buttons to be interactive right that would be a bummer which they are by default i have to go turn those off so if we come here to the pop-up we can see that it has pointer events none opacity zero right because we want these things to be not interactive it needs to be invisible um and look i can hover on the buttons right now and we also want it to be not interactive so kind of tricky but that was just a small thing to get in there and i thought it turned out really nice it was pretty easy to manage so let's go back to invoking our focus within on our buttons and then find our way down here into some of these buttons because if as these get hovered look at their state oh look at their styles oh nice we can share some of the styles down here and hover in active excellent see those pop in and we have focus visible as well i think we skipped focus visible on our upper button here let's check that one out focus visible i liked this focus visible state we can go look at how i did it as well because i used a outline offset of negative five and negative five was kind of nice because instead of me trying to hit focus and have it crawl outside of my little viewports here it's going inward and it still has a lot of contrast and so it's able to not leak outside of the container it's in while still providing nice ample focus i thought that turned out really nice in this particular component to have this sort of inner uh offset for the focus so that is most of the um styles here i think for like emulating the different states so we have the different interactions we've seen a lot of the mouse interactions here let's talk about and show some of the keyboard interactions so here if i tab into here you can see my tab focus we were just emulating that but now it's actually tapped because i use my keyboard to go in there so it knows that it should be showing me that focus that's the difference here in focus visible if i hit spacebar you can see me invoking those buttons that's kind of nice and if i hit tab again i'm using my roving index library my roving index library look for focus to hit this element and then it's going to forward focus into this button list and we'll do the screen reader flow in here in just a second but now inside of here i can hit up and down to go through my buttons i think you can also go left and right sure can can go up and down or left and right and find the button that you want you can hit space to hit it space space space you can enter to hit it which doesn't show the prompt but it does push the button and then of course you can hit escape and if i was to come over here and hit escape to bring up the console look we can see all the buttons that i've been pushing so there's definitely javascript waiting and is aware of these during your view curt is aware of what button is pushed so i mean of course you're going to need to take some action right so that's all handled in my javascript but the roving ux i thought was really nice and what you know just that kind of cool feature that we got from other episodes is it saves its state so here i have delete as the secondary action already focused if i go back into it it's still focused so it's going to remember where you were and that's just cool stuff right so we covered keyboard we've covered mouse let's reduce motion so we'll pop up in here into the rendering tab i'll scroll down we'll say reduced motion and here we'll emulate the light color again just because it's nice so we saw before that when we weren't emulating reduced motion we were getting a slight up card here but now it's just going to fade in we're just getting a simple crossfade so no motion but we're still getting an animation now i left this as spinning still and i thought that was just something that there's not motion here that's going to create a sickness i didn't think this wasn't a sort of scrolling or a big amount of um surface area that has motion so i thought it was nice to leave that in there now someone can comment and let me know if that's not going to be okay but from my research and the folks that i know with this a small icon rotation should still be okay so let me know in the comments what you think of that design choice also notice that the if i don't emulate motion that it animates in at a different pace that it goes out so i thought that it was really nice to sort of bring in something very calmly and slowly it still has a nice pace but then to dismiss it very quickly but i don't want to dismiss it like instantly i just wanted to have like a nice slow well i don't know i wanted to be able to tell that it was dismissing but have a nice slow introduction so those are just some of like the animation considerations i didn't do any color animation i just have instant color uh animations like interactions because sometimes i like those a little bit better and they're a little bit less for like the gpu to do so the user is not really going to care if there's like 300 milliseconds of hover time here they're just going to make sure that the hover is there and they're getting some feedback that that element is interactive it has states like click states and it lets them know that this is a button speaking on whether or not and knowing if something is a button or not let's check out the screen reader experience i'm gonna hit command f5 and invoke the mac os system one and try out the ux for the split button leaving dev tools entering split buttons gui challenges web content view cart button checkout button list three items you are currently on a button to click this button press ctrl option space quick pay button save for later button view cart button and that's it as we tabbed into it we were told that it's a button list and how many buttons are in there and it did that based on some html and a few attributes save for later button list three items you are currently on a button to click this button press ctrl option space quick pay button pretty cool someone hit escape and close that and hit the hotkey to turn off uh the screen reader voice over off even more detail can be put into this though we are not done we can handle right to left so if i pop in here and i go to the top of the document and i change the direction here to right to left and hit enter i can see that my button which is using logical properties and a few other things is still usable and look our icons have changed sides i didn't do that that was just flexbox this button even being on this side changed because of flexbox i didn't do that i didn't have to change order or anything what i did have to do though is make sure that i specified the rounding corners appropriately per logical properties so that this could be right to left have the right borders and left to right have the right borders even this border side here let me inspect this we'll go to this gui pop-up button let me take out the hover states let me close the console pull open the styles more scroll to the top and we're looking for border inline start here it is for border and if we go look disability like one pixel solid theme border yep and so there it is that's instead of using border right or border left i used border inline start and now as i flip the direction on this from right to left and left to right i don't have to care i actually got to deploy less code and think about less stuff while reaching more people and that is the power of logical properties in css so that's how i handled that and the pop-up does use physical properties left right top and right so if you wanted to do something a little bit smarter in here let's go to right to left in this mode you could the pop-up is locked to the box that this button is coming up inside of so that's why it doesn't look like it's too far off here this looks like a fine layout and i thought it was fine so you could though write a media query and adjust this if you wanted to and make it a little bit more specifically positioned so that's how i handled right to left i got it mostly for free with flexbox i love it speaking of flex we got to go check out these layouts that are in here so let's just check out one of these buttons we got the gui split button it has display flex already so here it is display flex and that's it for that style let's go to the layout panel actually and and kind of hover over these individually right so okay so here's our split button that was not a whole lot of look and doesn't even show any alignment items in there because it's just a flex and looks like it's just making these sit next to each other and we get the directionality for free and right to left okay every button is a flex layout that makes sense because especially because you're going to want to align item here let's go to it we're going to want to align items and put some gap in there between our um icons yep there it is so here's our gap and here's our align items again display inline flex okay let's go back to the layout panel let's look at the pop-up button okay so that looks like it has some padding um and probably some alignment properties let's go to the styles here display inline flex as well align item center justify content center so it's getting us centering here oh look we can hover on these to see their factory online item center and justify content center excellent and let's go ahead while we're here and pop open the states and go focus within because we're going to want to look at the layouts of the pop-up here so here is a gui pop-up right that's a ul right this is a list of items and we have no gap between them because look at the hover here oh it's pretty much going edge to edge for each button let's go look at the styles here styles what do we have we've got display flex flex direction column oh that makes sense and that's it again a pretty light amount of layout styles being done here this one is positioned absolute so i usually don't position things absolute in this show or just in my ui in general but this one ended up being um an easy exception because the whole pop-out is coming out of this little button here it just seemed really nice to anchor them it just felt anchored to the element so i'm going to position it absolutely and anchor it to an element it seems kind of straightforward and uh the effect was really easy to manage and i liked it um okay so what let's see we've got a layout panel we've probably got one more uh to look at here we have the can we i know there's just buttons inside of there so it's just a flex list a ul flex list of buttons so really there's like three or four very um essential display inline flex layouts that power this entire thing except this one here that put them in display in a column i mean that was not that tricky right here we go flex direction column let's let's change the direction here to row oh i don't know that's interesting a little pop-up row of buttons that's actually kind of neat i could totally get behind that anyway there's the direction that we originally set it to so those are all of the layouts that are done to create this and i thought that they were really kind of digestible for the first time um everything was really nice and we got a really powerful layout back let's change this back to left to right left to right boop excellent well now is the point of the show where we got to leave the debugging corner and go check out some of the javascript that powers these interactions follow me to my ide i used two of my util libraries to kind of help me make this code a little bit more succinct today the first one is called bling bling js and really it just gives you it gives you this dollar sign which makes selecting elements easier putting some events on multiple elements easier and it just has like a couple of conveniences that are sort of left over from the jquery days and then we have this one here called roving index which we've talked about on the show before which is what's maintaining and enabling a roving index ux on that pop-up so the first thing that i do is i go grab the split buttons so this will grab every one of the buttons on the page and this will grab all of the pop-up buttons now for each pop-up button we want to give them some roving index right so when that pop-up button is focused so here's the element this is the pop-up button itself we forward the focus to these targets to these buttons and then the tool will maintain all of the different state inside of that target set so that's how the roving index was set up we also want to support that escape key so on the pop-up buttons we're going to watch to see if escape gets pressed so this is the thing that's prompting the pop-up itself we're watching for the escape bubble to sort of like come up into the parent element here and if we see the character code is escaped we're going to blur on this item itself which will remove focus within and therefore close the pop-up kind of neat here's another one where we're explicitly on focus in setting some attributes uh so that a screen reader can still reflect the accurate state of the pop-up right someone can't see so you have to set the state to expand it and set the expanded state to false when it's opened and closed that way someone who can't see right again can acknowledge and know the state of this element and then last year this is just some demo code to watch for clicks on these elements but we're watching the split buttons and on click um as long as the node name here is not equal to a button we're gonna uh load and console log the target text so this is just so saying like hey the you know play button was pushed or the send button was pushed and um this is filtering out anything that's not a button since we're using bubbling we're watching for all the clicks you could click on the very edge of the pop-up and this wouldn't invoke any button text because well you didn't you didn't click a button so the javascript it wasn't that um complex or a whole lot to put down but i think it did add a whole lot of value right we're adding some unique things to keyboard interactions with the escape key we're adding some unique attributes for screen readers and we're also tying in our clicks and making sure that we're getting some a nice experience for mouse and keyboard users alike and that is the end of this gui challenge i hope you liked the split buttons now it's your turn to fork like subscribe do all that sort of great stuff interact with this content leave me a comment and show me how you would do it i mean that's the most important part here you need to tell everyone and show everyone how you do it what is your style alright y'all see in the next gooey challenge [Music]

Channel: Google Chrome Developers

Views: 18,473

Rating: 4.9445982 out of 5

Keywords: purpose: Educate, pr_pr: Chrome, series: GUI Challenges, type: Screencast (0-10min), GDS: Yes, ways to solve split buttons, split buttons, what are split buttons, how to solve split buttons, gui challenges, css, chrome developer, chrome developers, google chrome developer, google chrome developers, developer, developers, google chrome, chrome, google, Adam Argyle

Id: Qcpru-fIgwk

Length: 21min 54sec (1314 seconds)

Published: Wed Sep 08 2021