Thinking on ways to solve SWITCH GROUPS

Key Takeaways

welcome to another episode of gooey challenges where I build interfaces my way and then I challenge you to do it your way cuz with our creative minds combined we will find multiple ways to solve these interfaces and expand the diversity of our skills and in today's gooey challenge we're building a switch group and that's not a button group this looks like a button group but if it's a button group each of these could be highlighted in blue but notice how as one is enabled it disables all the other ones this is a switch group only one of these can be active at a time I mean makes sense right it can't be left aligned text and right text at the same time so I'm excited to break this down for you I got some great HTML to show you and some cool CSS tricks let's get [Music] started here we are in the debugging Corner looking at iPads we have Safari all along the top here looking great in all the different browsers and in light and dark which is nice uh that this particular component is you know Savvy to that I always like doing that right it's really fun we have uh Android down here so we have Chrome in these two panels and we have Firefox down here and everybody is happy with this particular layout it's just using a radio group essentially as the kind of foundation in the HTML here and then a couple of tricks like with grid um and has to kind of help us represent the state of those particular radio buttons and group them in a nice way and anyway we'll get into all that but here's the light and dark across all these different browsers just to show you it's looking great well now let's go look in Chrome and we're going to um kind of build this up from the ground up I wanted I wanted you to see how the HTML looks and then see it kind of progress over time into this really nice set of uh buttons so let's go check it out uh here is our unstyled HTML it's just um the interactive document portions so we've got a field set as our first element that's what's wrapping everything and then you see how that line kind of goes right into this little header element that little header element is called a legend uh which has like one of the coolest HTML element names ever like Oh I'm a legend uh that would be super cool to say if I was an item in the Dom right uh no that's definitely a nerdy joke and then look at we have a class here it's called switch group it also has an ID this is so that JavaScript can listen to the field set for changes I don't have to listen to each one of these input type radios for changes I can just listen to the field set and I love doing that it's super cool so then we've got this group switch and inside is an input it's this one is currently checked it's a type of radio its name is text alignment and that's what's going to group it with the others here you can see they all have the same name they each have a unique IDE D and they have a value left center right or Justify and of course a label don't forget your labels and that goes with that ID so that ID of text left has this clear label of uh text left that makes the label interactive as well as the input so look over here I can hover over the label and click the label itself this is really handy for Mouse users keyboard users screen readers everybody likes the way that labels and inputs work together so always include those together and in my particular case here I made my lab La a little verbose so look it says text align left even though it's in a group called text alignment so a screen reader could definitely derive that they're inside of a group and that the value is left inside of text alignment but when I'm using the screen reader I kind of find it nice to to hear it again it's not annoying at all in fact let's test the screen reader so here I'm going to hit command of five voice over on chary switch group vertical Lang challenges part of challenges Google chome Canary Adam window text line left there's a couple ways to move around the first one that you're going to be tempted to do is use the arrow keys and the arrow keys work awesome they'll deselect where you previously were oh hey let me tab in text line left selected radio button text line Center selected radio button they'll deselect where you previously were excellent and they will um select the item that you went to text text right selected radio button three or four as if we were clicking through these ones so here I'll go through all these selected radio button you can see the value is changing so when the arrows move over to this element it's becoming selected it's sending an event and we can see it changing the alignment here now screen reader have another kind of special feature which is what they at least on Mac OS here you can hit control and option and your virtual cursor text text Aline Center radio button and and pseudo move to these other other elements and then when you're ready you can hit control option space and actually select them selected great so now we know we have a strong Baseline uh set of functionality here we have a field set we have elements inside of there that are grouped and named and have relationships Mouse user is able to use it a screen reader user is able to use it keyboard users can use it let me just uh get rid of our screen reader here command F5 and I can tab through our interface and now I'm just using the keyboard so it's no longer a screen reader specific uh experience this one's just a keyboard so we don't want to we don't want to break this we want to make sure that this stays strong as we move this into something more visually pleasing for Mouse users and sighted users so knowing that this is our strong Baseline let's not disrupt this strong set of Base user experience and move forward let's go ahead and bring in some of these extra elements here so I've got a tool tip and some SVG let's bring in the tool tips and the SVG so remember these are extra the tool tip is totally extra the SVG is just decorative they're not bringing anything to the experience here other than sort of visual affordances and and niceties which is nice where we have a very sturdy Foundation all right we have seen and understood our HTML this is it we're looking at what we are going to start styling and let's just jump right into the style so the first thing that we're going to do is we want to make this switch group and inline layout and I'm going to do that with a quick little Flex layout right so by default it's going to make columns we see columns here and we can give them a little bit of a gap between them and it's a very small Gap and we'll see why that Gap is small soon we're also going to set the max inline size or the maximum width to the maximum of its content look we have four items Here and Now we could see it kind of shrink wrap to fit there which is really nice it's also defensive against flex and grid stretching so since it's a child or all these elements are a child of a greater reflex or maybe this even this field set is a child of a greater reflex setting that Max in line size make sure it's not going to grow uh and then become kind of too wide for all the items it needs to host okay the next thing we're going to do is make it look kind of like a card we're going to make it look like a card by setting the background to surface one this is a variable inside of the open props normalized this is adaptive it will change BAS on light or dark we have some padding again very small cuz we're making a kind of small icon toolbar when we have a border radius it's a small border radius and we have a small box Shadow and the next thing we're going to do is we're going to remove that border that comes with a field set it looked cool over the legend but we don't need it in the way that we're going to make this sort of Floating Action toolbar here okay uh we get border none great we have an animate box Shadow so what we're going to do is when we do change box Shadow on Hover and focus within we're going to make sure that that box shadow kind of um bounces a little bit with this little bit of this ease squish three from open props and we'll check that out in a second uh the next I'm going to skip down to here where we have the icon let's bring the icon color in to current color excellent okay so this is saying um in our selector we were using some nesting here our group switch carry that selector in so it's do group switch space direct descendant selector SVG find all the SVG and make them the current color the current text color which is nice because the current text color is also adaptive to light and dark so as the theme changes so will our icon color excellent okay our next thing here and here we're jumping into some more nesting we're going to change the Box Shadow when there's Focus inside so cool let's bring in that little bit of an animation here and this is saying when the switch group is has Focus within inside of it or is being hovered increase the Box Shadow to Shadow 4 and there it is you can see box Shadow 4 it has a little bit of a bounce and so putting the bounce on the shadow kind of makes the element looks like it's bouncing as it's lifted okay and then this last thing here we are going to select the legend and we're going to hide it we're going to keep it in the Dom we're not setting display none because it is providing valuable information to screen reader users but we just don't want it visible so we're going to make it visibility hidden and we're going to set its block size like it's height to zero so now it's consuming no space and you can't see it but it's still in the document and we're done with that first part so let's look at the group switch this is each icon button itself what we need to do is we need to stack the radio and the label and the icon all together into one square and then we want to make sure that that label text is still interactive because that's going to give us that big nice large um kind of like hit area that interactive area that's going to then trigger the different things so look right now if I click on the icon I don't activate it if I click on the label though I do so we're going to make that label cover this whole Space it's going to be really cool and we're going to do that with display grid so display grid is going to set a single cell grid and it's going to prepare for a pile I call them a pile because you know we we use the word stack so often and stack usually means you know like a vertical stack like these are stacked now but I want a pile and to make the pile we're going to have to Target each one of those children and tell them to share some space uh let's see where is that pile code let's see M looking at these checked aha right here so all direct children pile into a single cell grid that's what we want and we're doing that by selecting all of the input labels and SVG children uh so not the tool tip uh that is here in as a child of these particular buttons and I'll hit save and there is our pile look at our radio button is humongous our icon is big and our uh our label here and these are probably select oh no they're not changing so if I click them look they're not changing so something is front of the other one I bet the SVG is sitting in front of these and making them non- interactive so we'll get to that okay let's set a width because these are obviously too large we're going to set the inline size to size seven so this is just a size that comes from open props um look at that we're getting some collisions already so we're going to have to H we'll figure it out here in a second we're going to round out the corners let's round out the corners and the reason that I'm doing a little bit of math here is so that the a nested radius looks kind of weird if if it's the same radius but it has like a different size anyway there's a Code pen here I'll put it in the show notes for you to check it out you can go see how that works okay so if this is where we did the pile let's fix the interactivity here so we're saying if it's an input and a label we want the opacity to be zero we want the Overflow hidden and we want the white space no wrap so that's taking our text label making sure that it's not kind of consuming a bunch of vertical space we're setting the Overflow to Hidden so that it's it's appropriately fitting it inside of the the cell that we're trying to fit it inside of and we're setting the opacity to zero this is crucial because now it will still be interactive so if I click uh see we can actually see changes in our UI because our values are being received we're just not seeing selected state yet so we still need to represent that all right that's cool get get into some good progress here let's update this so this is saying if the motion is okay for this user which this particular um open props value here refers to prefers reduced motion uh no preference so that means motion is okay this user doesn't have a preference um so we're going to give them the full motion experience and that's going to include an outline offset animation and a background color animation can we see that yet I don't think so because nothing's really selected yet so we'll see that in a second so now we're going to Target all of the let's see um any of this these elements that are not active give them an outline offset so that's going to give them a sort of bouncy active uh State we'll see that in a second so here let's set that active state so if it has Focus visible and focus within so if they are using a keyboard so here I'm going to focus in here and hit spacebar so Focus visible says we only want to see this F Focus ring if someone's coming from um some technology where they want to see Focus visible and if they are in that sort of technology and there's Focus within well then we want to see represented here so I can move between these and hit space bar to sort of activate them and we can see that that outline is animating based on the motion preferences and the transition that we set and the various values super cool okay so now let's see if the um the button has a checked child and that child being checked or not is going to allow us to visually represent the selected state so if this button has a child that is checked which is going to be that input. radio we're going to make the color the link color of the page which is another adaptive prop that comes from open prop so this is going to be dark blue and a light theme and a sort of light blue and a dark theme here and we're going to set that to the text color and the SVG we set the SVG to the current color and so that's adapting to the text color that we've set for the context of the element uh it's kind of cool let's set a button hover so now it's going to um play into those different padding and Border radius amounts and look at selected State and we can see the hover color popping in here looking cool and notice it's Surface 2 so surface one was this background and Surface Two is just another surface these are adaptive for light and dark and we are done that was it we're using the tool tip that came from a previous episode of gooey challenges on tool tips and we dropped it in again they're non interactive tool tips they're just extra information and they're there uh just to help Mouse users understand what their values are in case they were wondering and that is pretty much it for this gooey challenge I hope you had fun watching this and watching me sort of take a field set with different input type radios as a group and turn them into a really nice looking switch group I'll see youall on the next goe challenge and take care y'all [Music]