-
Notifications
You must be signed in to change notification settings - Fork 406
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
UIKit Workshop default style proposal #1103
Comments
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! 💯 |
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. |
Hi @bradfrost! There's something I want to touch on:
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 |
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 ✅
Yep, already taken care of!
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
But it is horizontal by default...?
What about something like “Expand/Collapse Info” or “Show More/Less Info?” My main thoughts are:
Splitting out the code from lineage / markdown docs could be one way to handle this... 🤔
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.
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! |
Finally getting around to this, sorry for the delay @sghoweri!
I dunno, you tell me. When I installed from the CLI, I was seeing the sidebar layout rather than the across-the-top treatment.
Can think more about this. Maybe it's worth spelling out "Code & Info"?
Yep definitely want to make sure the color contrast is there.
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. |
@bradfrost What about "Hide Code & Info" and "Show Code & Info"? |
^ After thinking more about this, I could also buy into having it just say "Hide All Code" and "Show All Code" |
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! |
Response |
Hey team, It' really hard, but these are my ideas:
Maybe it's easier if you give the panel a name that indicates additional content quite clearly?
I hope that helps to additionally enhance the pl! |
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! |
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! |
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! |
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! |
I would love to bump this with one more request @bradfrost I would love a config option in the
It would be nice to do so for both light and dark. I can't seem to touch them with my 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! :) |
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:
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!")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.
The text was updated successfully, but these errors were encountered: