UIKit Workshop default style proposal

[bradfrost]

This issue is meant to capture my thinking around PL's workshop UI, as well as touch on the other opportunities for other versions of the UI.

Before I get into it, just want to give a massive shout-out to @sghoweri for all the work on overhauling the UI and bringing it to where it's at today. It's so great to be working with a solid, modern foundation, and I hope that we can continuing tweaking and improving.

I'll start by framing the goals and purpose of the workshop UI, and then move into some of the suggested adjustments with those considerations in mind.

Workshop UI audience and purpose

Primary audience: frontend web developers Secondary audiences: design team, clients and stakeholders who would be reviewing/commenting on UI work Purpose: Allow working teams (namely frontend developers and designers) to navigate to, develop, and test patterns and pages. Secondarily, teams can view code, documentation, lineage, and annotations to assist in ongoing development of patterns and pages. Also, this view of the UI is where design review sessions happen with designer colleagues, as well as with clients and stakeholders. (All of our internal and client/stakeholder design reviews happen by reviewing Pattern Lab links).

Given the above, the goal of the workshop UI is to get out of the way of users so they can focus on creating and reviewing the UI inside PL's iframe. The UI needs to be present enough for users to navigate to patterns/pages and access PL's features, but the workshop UI should be extremely understated.

Proposed changes

I'll detail the changes I'd like to see the default PL workshop UI, but the basic gist of my proposal is generally to return PL's UI to its former aesthetic state. These changes are largely minor cosmetic tweaks, and I'm certainly not proposing throwing out all the great improvements that have been introduced with the latest version.

Here are the changes I'd like to see:

• No logo by default - a logo is a great addition for a storefront view, and of course should be configurable to show up in the workshop view should the user want it, but by default the logo should be hidden in order to keep the focus on the UI inside the iframe.
• A neutral background color rather than a color that may collide with the UI design inside the iframe. The light theme might be a good default, but a default dark theme should be a neutral dark color (like a dark gray) in order to stay out of the way
• Horizontal layout by default - this may be a bit unconventional compared to other tools (with the notable exception of Codepen), but I think the horizontal layout is a smarter default for the workshop UI. The reason once again is for developers to focus on creating UIs, and developers should be able to access the full viewport width and also not be distracted by a relatively imposing sidebar
• Viewport resizing handle should be hidden by default - The viewport should be full width with the resize handler hidden by default. I've had workshop attendees wondering if something was wrong because they couldn't get rid of the gray left/right borders. I really like the treatment and behavior of the resize handler, but think that should it be tucked away until the user specifically asks to resize the window by adjusting the values in the PL UI.
• Introduce a show/hide toggle and/or keyboard shortcut - Especially for the vertical layout, it can be helpful to tuck away the PL UI to show off a design sans any PL chrome. The "Open in new tab" feature does this, but it would be quicker to just be able to toggle the UI off and on
• I'm not seeing this locally, but I was seeing drop shadows in the UI that impose on the other frame.
• Resize icons - Historically I've not been a fan of equating viewport size with device type, but now I just shrug my shoulders. I'm generally ok with the icon treatment, but they can be a bit noisy. Would be good to explore toning them down in some way so as not to distract from the UI that teams will be focusing on. (Also, I'm not seeing the resize icons locally but am seeing them on the online demo)
• I'm on the fence about the dual-purpose accordion handle - This conundrum goes back to the responsive navigation days: do you have a single-purpose hit target that expands the panel, or do you have a link that clicks through and a second button that expands the sub options? In the latter case, is it clear to the users that two different behaviors occur? I don't know the answer to that, but I think a point of distinction here is that this is a tool that teams would be working in frequently, so either behavior would be learned. Which is a bit different than a website where you have to accommodate users of different skill levels. Again, I don't have a super strong opinion about it, but it's worth flagging as a point of conversation.
• Reintroduce contenteditable pixel/em inputs - this was a really great feature for zeroing in on an exact breakpoint. Using the up/down arrow keys or entering in a specific value is really effective for debugging breakpoint-related issues ("Ah, at exactly 712px this headline wraps to multiple lines which ruins the composition!")
• Sidebar layout tools - right now the tools (viewport resizing, expand panel, etc) occupy a lot of space and add a lot of noise to the UI. I'm wondering if there's a way to either tuck the tools away behind a tool icon (similar to the horizontal layout) or make them more understated (for instance, presently the font size of the tool options have a bigger font size than the pattern navigation, which seems backwards). This may even be a configurable thing (Expose tools by default or not)
• Sidebar layout resize it would be a nice feature addition to be able to drag the sidebar and resize the viewport, similar to Codepen.
• Horizontal layout dropdown one-at-a-time - Presently clicking on multiple top-level pattern categories (i.e. Atoms and Molecules) opens both menus, causing an overlap, which feels a bit broken. Probably best to open each panel one at a time (Edit: Ah just now seeing this is addressed in #1102 ! Nice!)
• Consider relabeling "Expand/Collapse Panel" as "Show/Hide Info" or "Show/Hide Pattern Info", which feels a little more explicit.
• Pattern Info panel switch layout - Next to the close button there's a switch layout button, which I think is a bit redundant with the switch layout button in the main menu
• Super minor UI tweaks such as light mode active state color, matching dropdown treatments (settings has a bubble/caret while pattern dropdowns do not), view all pattern info panel border animation jitter, super super super minor stuff.

WHEW. So that's my feedback. Let me just say I poked the UI a lot, and it's pretty freaking amazing. It feels super snappy and a lot of the old issues (like not being able to scroll to the bottom of a page with the pattern info panel open) are totally gone. Seriously stellar work, @sghoweri! Thanks so much for making this so amazing.

As far as next steps go, I was thinking about taking a stab at some of the aesthetic bullets, but I think there may be tasks that I'm not very well suited for.

One last thing worth mentioning is that these suggestions are just that. @sghoweri @bmuenzenmeyer , I'm happy to chat through any of this stuff with you if you think that would be helpful.

[sghoweri]

Thanks so much @bradfrost! This is awesome!!

It’s actually really reassuring that I’ve got a lot of these exact same items on my own punch list. 😊

I’m still working through my own thoughts and comments on some of these (will loop back shortly + break things up into a few buckets), however in general I think all of this sounds super reasonable.

There’s a couple I’d like to discuss a bit more, but all in all I think we’re on the same page! 💯

[bradfrost]

Great to hear, @sghoweri! Lemme know if you think it's worth chatting through some of this. I'm around for the next couple days.

[mikemai2awesome]

Hi @bradfrost! There's something I want to touch on:

Consider relabeling "Expand/Collapse Panel" as "Show/Hide Info" or "Show/Hide Pattern Info", which feels a little more explicit.

This is the most unintuitive feature in PL. The icon change is a step in the right direction, but I feel the label isn't clear enough. We've been using PL for our design system, and whenever there's a new person joining the team, I have to actually teach them where to click to see the code snippet. Majority of people who uses our PL on a regular basis did not know code snippet exists in PL, they would instead just inspect the element in their browser's dev tool to see the markup, which is not the true markup we want to advocate using.

Code snippet plays a huge role in any design system or ui kit docs, I believe PL needs to make it more obvious where the user could find such information, neither Pattern Info or Panel makes it clear. I understand that this panel shows more than just code snippet, maybe the information needs to be re-organized or separated, for the sake of clarity.

[sghoweri]

Hey @bradfrost!

I’m still chipping away at the 2nd half of this punch list but here’s what I have so far. Let me know your thoughts + if anything here doesn’t make sense!

Done ✅

• Horizontal layout dropdown one-at-a-time - Presently clicking on multiple top-level pattern categories (i.e. Atoms and Molecules) opens both menus, causing an overlap, which feels a bit broken. Probably best to open each panel one at a time (Edit: Ah just now seeing this is addressed in #1102 ! Nice!)

Yep, already taken care of!

• I'm not seeing this locally, but I was seeing drop shadows in the UI that impose on the other frame.

I recently simplified a bunch of UIKit styles (ex. removed or toned down shadows) so I suspect that you’re referring to the UI before I folded in these changes.

Questions / Comments

• Horizontal layout by default - this may be a bit unconventional compared to other tools (with the notable exception of Codepen), but I think the horizontal layout is a smarter default for the workshop UI. The reason once again is for developers to focus on creating UIs, and developers should be able to access the full viewport width and also not be distracted by a relatively imposing sidebar

But it is horizontal by default...?

• Consider relabeling "Expand/Collapse Panel" as "Show/Hide Info" or "Show/Hide Pattern Info", which feels a little more explicit.

What about something like “Expand/Collapse Info” or “Show More/Less Info?” My main thoughts are:

• Not everything in Pattern Lab is necessarily a “Pattern”
• I tend to think of Hide / Show as things related to visibility vs Expand / Collapse (or Show More / Less) as UI that’s still visible, just getting out of the way (ex. Accordions)
• And per @mikemai2awesome’s comments, I want to make sure end users (content authors, backend developers, contractors, and designers) aren’t missing out on the content that gets tucked away in these panels.

Splitting out the code from lineage / markdown docs could be one way to handle this... 🤔

• A neutral background color rather than a color that may collide with the UI design inside the iframe. The light theme might be a good default, but a default dark theme should be a neutral dark color (like a dark gray) in order to stay out of the way

A dark gray dark theme (not #000) I can buy into as long as there’s sufficient contrast with interactive states, text etc.

That’s actually still the default in older browsers like IE 11 since my goal for theming in general has been to make the light + dark themes user customizable via CSS Custom Properties.

There’s still some specifics to iron out with the actual way users would configure these styles, docs, etc however no arguments here otherwise.

• No logo by default - a logo is a great addition for a storefront view, and of course should be configurable to show up in the workshop view should the user want it, but by default the logo should be hidden in order to keep the focus on the UI inside the iframe.

That’s a relatively easy change. I just want to make sure folks know that having a Logo is a readily available option so this work doesn’t go to waste.

^ have some ideas on how we could tackle that (separate thing)!

More to come!

[bradfrost]

Finally getting around to this, sorry for the delay @sghoweri!

But it is horizontal by default...?

I dunno, you tell me. When I installed from the CLI, I was seeing the sidebar layout rather than the across-the-top treatment.

Not everything in Pattern Lab is necessarily a “Pattern” I tend to think of Hide / Show as things related to visibility vs Expand / Collapse (or Show More / Less) as UI that’s still visible, just getting out of the way (ex. Accordions) And per @mikemai2awesome’s comments, I want to make sure end users (content authors, backend developers, contractors, and designers) aren’t missing out on the content that gets tucked away in these panels.

Can think more about this. Maybe it's worth spelling out "Code & Info"?

A dark gray dark theme (not #000) I can buy into as long as there’s sufficient contrast with interactive states, text etc.

Yep definitely want to make sure the color contrast is there.

That’s a relatively easy change. I just want to make sure folks know that having a Logo is a readily available option so this work doesn’t go to waste. ^ have some ideas on how we could tackle that (separate thing)!

Yeah I mean this is what good docs and demos are for. We need to make it obvious what all you can do with all the config options.

[sghoweri]

Can think more about this. Maybe it's worth spelling out "Code & Info"?

@bradfrost What about "Hide Code & Info" and "Show Code & Info"?

[sghoweri]

^ After thinking more about this, I could also buy into having it just say "Hide All Code" and "Show All Code"

[stale[bot]]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[mfranzke]

Response

[thethomic]

Hey team, I like to chime in on the renaming thoughts for Expand/Collapse Panel. I'm quite convinced that the current naming is rather misleading. "My users" thought it would expand the navigation panel and had no idea that the really helpful and quite essential "Pattern Info" is hidden there. Also in my opinion "Show Info" would be too weak to describe this main feature...

It' really hard, but these are my ideas:

• Stick with "Show pattern info": After all the whole system is still called "PatternLab", even if not all content can correctly be described as "pattern". But this way it marks a core feature and is clearly not speaking about the navigation panel

Maybe it's easier if you give the panel a name that indicates additional content quite clearly?

• "Open Insight Panel" (my favorite) or
• "Open Detail Panel" or
• more visually "Open Immersion Panel" or
• or simply "Open Info Panel"

I hope that helps to additionally enhance the pl! Best regards! thomic

[stale[bot]]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[stale[bot]]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[stale[bot]]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[stale[bot]]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[carly-kins]

I would love to bump this with one more request @bradfrost

I would love a config option in the patternlab-config.json under theme for overriding the colors. Specifically the following:

--theme-bg: #161b3c;
--theme-primary: #464a6d;
--theme-secondary: #161f50;
--theme-text: white;
--theme-text-rgb: 255,255,255;
--theme-border: rgba(255, 255, 255, 0.2);

It would be nice to do so for both light and dark. I can't seem to touch them with my patternlab-specific.css - I'm guessing because any styles I'm creating is rendered in the iframe.

I don't want or need a complete overhaul of the UI kit, I just want to be able to make my colors match the design! :)