GitLab UX Team, 9 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Pajamas UI Kit badge migration Figma walkthrough

Description

Walkthrough of migrating the Single Stat component to use our updated badge component in Figma.

https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1372

A

Hello: everyone dan mitzi harris here product designer at git, lab uh recently in the pyjamas ui kit. We refactored the refactored the badge component.

A

But there are other components that use the badge component, so there's a list of other components that need to be updated to use the new badge component, and this is a walkthrough of how I'm approaching them.

A

I appreciate that was a bit of a weird jumble, but hopefully it will make sense as as we go forward and so for this one. I'm going to look at the single single stat component um see I can see here. Sometimes uh extra information is displayed in a badge, so we'll be updating this single stack component to use our new batch in the data visualization file single stack page.

A

So to start, I'm in the pyjamas ui kit.

A

Project in figma.

A

And I'll start by making a new branch for this work.

A

Then, let's see how we get on, hopefully it's a straightforward one and it doesn't have any hidden nasties.

A

So I'm gonna have a look at some of these examples, see how they're constructed first, uh because that might give us some clues as to what's going to go on here.

A

So I can see using the old badge, and the goal of this would be to update all of them to use the new one.

A

Lots of auto layouts going on here, um looks like we're using this wrapper for some of the spacing. So I'll have to be be aware of that um bottom padding's, coming in from here.

A

Might might see some weird behavior in the interaction between them, but it all looks all looks like it's gonna be okay. So before I do anything, I'm gonna use a plug-in called visual difference just to take a snapshot of everything. That's um so when I make changes uh what it'll do is compare it to a visual diff between what it was at the start and any changes I make. I can make sure I'm not introducing any extra regressions and it is a one for one replacement.

A

So that's all done. um Let's get started so I'll start with the base component. I'll move my face, like I said, we've got a badge in here.

A

Hopefully it's just going to be as simple as swapping the instance for the new batch.

A

So we've lost, we've lost the format and we had before.

A

So change the variant to neutral looks like most of the other stuff is come through. So let's just check, uh icon icon enable by default that's fine. We will turn on our icon. This is a 12.

A

Pixel one and trend down- I would, I definitely would have forgotten about that icon. So I'm already really grateful for the visual difference. Plugin trend up.

A

Nice, so something that's quite cool about the new badge component is all of the attributes can be accessed from this top level which make made updating that super easy. Nice we've got a one for one, let's see if anything else is broken so far,.

A

So it looks like this is worked and we've got some changes.

A

Here I can't see by eye what's going on so I'm gonna just do a diff overlay between the two.

A

Nice, so the text, the text hasn't been retained for this update. This is zero percent and it says status and some other stuff has shifted, but that might just be because this has moved.

A

I know logos changed up here. Oh excuse me, the icon has changed up here as well.

A

A

Gonna check here to make sure that it has used the the new badge. Sometimes um because we didn't delete the old component, it will um retain the deprecated one. All of that looks like it's updated. Okay, let's just.

A

A

So to test, what's going on, I'm gonna try and make a couple of versions of um these two single stats, uh try and manipulate them a little bit and see if I still see the see the challenges and that we've seen in the other file and hopefully it'll, give us some clues as to what's happening or if I can't work out what's happening, give more confidence and that merging medium won't break it.

A

So on this one, I'm going to change the variance but leave the others the same. So I'm going to change that to warning on this one, I'm going to change just the value and on this one I'm going to change just the icon.

A

Nice I'll do the same same for these as well so danger. Oh, that's interesting! um That color hasn't updated. That might. That might be why there might be some other overrides that have happened, which is why that didn't didn't do what I was supposed to do, but I'll just keep it like that, and this was changed to text and this one I'll change the icon to.

A

Oh interesting stopped and the color hasn't picked there. Okay, this might that's giving me some indication that it might be something unusual, some override somewhere being correctly incorrectly applied. So I'll just do the same same change again. I'll switch this out to badge.

A

Watch for changes- I'm seeing this change here and here here here here, but when I change the uh when I've changed this variant, it hasn't so I'm going to undo um reset some overrides.

A

A

Reset all changes the text to zero percent.

A

I'm trying to emulate a what it would be like if someone set set up from scratch, rather than using using these instances. So this is status. No, it's not. It's trend, trend, static, then neutral with a pause, so reset resettle changes.

A

And we need a text to say.

A

Icon to say, pause.

A

Status, paused nice: let's make a new copy of these.

A

Make our change to the new.

A

A

A

Still breaking and all of the rest of these are stuck with the the old one. Is that the same? In order there.

A

Cool, so all of these needs updating, essentially, um and that's why that's why it wasn't wasn't behaving as it should have been no problem at all.

A

Well, I took a long time to work out, but I'm glad I did, I'm gonna delete this branch.

A

Cool, so there's a little bit to do now too.

A

What's happened is because it's the stiller component, it hasn't it hasn't updated everywhere, so where the styles have stayed the same, it's still using the deprecated version, so we'll just quickly go through and update all of these, and thankfully we've got the visual diff to help us um recreate them exactly so. That's the top percent icon is topic source and it should be a down. uh I'm going to sell changes just to be sure.

A

Oh, that hasn't worked. Let's just reset it back to the original component.

A

We've got batch here, we're using a new version for all of these.

A

Nice, so let's go ahead and update our badge to be trending down 12 percent, and that is a good thing. So success trend down 12 nice. So this one needs updating as well. So that's a neutral! I need no. I can't represent neutral, no icon, 0 plus 100 success.

A

That's 100 success, nice, minus 100, not so happy.

A

Or some other figure, friends online, I'd, say: lovely badge, happy up, 100 a little bit tedious, a little bit manual.

A

But this is the glamorous side of figma work trend down honestly neutral.

A

A

Danger and they're the same again with some icons as well. This has got pause. That's already been done. Success with the circle, which I think means open, 12 waiting that looks right morning.

A

Icon, which was lit danger.

A

X, icon, because it's a status, oh, I forgot what this one was again very grateful for creating the visual diff at the start. Okay, then, I'm gonna use one of my other favorite plugins, for this is select news by name and let's see if we can find any instances of.

A

Bad, I'm pretty sure, that's how it's spelled I'll just go back here and check quickly. Let's copy that layer, name nope, not gonna. Let me dip rick catted dip, breaker.

A

With the e yeah find oh cool, so we have some hidden ones here. I will update them, uh but I won't update the content in them because they are hidden, but just in case anyone copies and pastes um across and just one more check.

A

One more check.

A

Nice no layers match that's everything. Migrated run the visual difference. Compare all that is happy nice. So that's how I've been approaching these and sorry it took a little bit longer than I hoped it would, but I hope you um I hope it gave you some ideas for some things that you could include in your figma workflow, but most of all, I hope it encourages you to contribute to our figma library and a good place to start could be performing. One of these badge migrations feel free to reach out in slack.

A

If you have any questions.