Major UIKit Refactor Updates

[sghoweri]

Builds off of the updates from #960 and #973 and keeps going with many of the UIKit updates from boltdesignsystem/bolt#1050 + a bunch of misc bug fixes, cleanup, and performance updates from Drupalcon Seattle!

High Level Changes

• Updated Pattern Lab search keyboard shortcut to open via CMD + Shift + F; fixes previous issue where the browser’s native CMD + F no longer worked as expected
• Finished porting over the vast majority of the remaining PL components / styleguide.js logic over to standalone web components that are all wired up to use Redux (Viewport, Nav, Viewport controls, iframe resizer, etc);
• Refactored Nav to automatically highlight the currently active page
• Refactored Nav to NOT auto-close when you select a new page to navigate to
• Refactored Nav to auto-close when you click outside of the Nav component — both inside AND outside of the iframe
• Adjusted the dark theme in PL to have better contrast
• Refactored Nav to display the View All pages at the top level + show nested children if / when they are available
• Added JS-integrated SVG icons to the viewport resize controls + tools menu
• Initial work adding CSS Variable support for customizing Pattern Lab’s UI without requiring a custom UIKit build
• Adds tooltip support to the viewport resizer controls
• Major refactor / cleanup to the browser history / hash logic

What's Left?

Here's most of the big stuff (off the top of my head):

1. Testing -- in particular things like the different variations the content in the code drawer can display, especially with markdown docs, lineage, etc variations.
2. Misc CSS cleanup (minor refactoring and cleanup), possibly updating some of the CSS variable theme defaults (dark theme mostly) to be a tiny bit more generic. Could be something to tackle separately.
3. A few misc bugs that existed before these updates (opening / closing a single code panel on the viewall page stops working after doing it a few times)
4. Docs - especially related to configuring and customizing the build, adding custom light / dark logo options, etc
5. Making each UIKit package NPM installable / extendable
6. Refactor mobile-specific nav to support the side-nav / off-canvas layout
7. Finish refactoring out the sidebar / light theme specific ITCSS layers and incorporate into the standalone components instead
8. Kill off the /dist folder committed to Git
9. Decide if we still need to include a density config option (currently not supported)
10. A couple of minor UIKit bits of functionality are either disabled or need to get re-wired up.

• Disco and Random mode for example are temporarily disabled from the viewport resizer buttons since they need their JS logic ported over to the new component
• Keyboard shortcuts controlling the viewport size need to get re-implemented
• The viewport resizer input is currently read-only (can't currently update the input field manually)

Even with these things that are left, these updates should bring us very, very close to the finish line on modernizing Pattern Lab's UI + opening things up to be a heckuvalot more extendable!

[coveralls]

Coverage remained the same at 75.019% when pulling c882bab on feature/uikit-refactor--batched-updates into 7d2a9b5 on dev.

[sghoweri]

CC @bradfrost

[JosefBredereck]

I'm looking forward to the final version. I wish I could help a bit, but I don't have so much time at the moment. Keep up the great work.

[bradfrost]

@sghoweri what should I be looking at here? Anything I can run/test?

[stale]

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!

[bmuenzenmeyer]

@sghoweri i may need help making heads or tails of this merge conflict!

[sghoweri]

@bmuenzenmeyer woah - that is one big merge conflict! Taking a look at this in just a bit!

[sghoweri]

Also, FYI, we're probably going to want to port over at least a handful of these upstream changes I've recently made in this PR -- both to speed things up from an NPM install and CI point of view in Pattern Lab, but also to fix a bunch of cross browser bugs (IE 11 especially) that I ran into recently!

Shouldn't necessarily block this one -- just more a heads up that we've been kicking the tires for quite a while and came up a few things to button things up.

[sghoweri]

@bmuenzenmeyer, after resolving merge conflicts with the latest code from dev, I noticed a couple things in the UI still weren't looking as buttoned up I as recall they were in April so I went ahead and pulled in most** of the big cross browser bug fixes and updates I've been working on from April till July which did the trick!

Should be ready to have you take another look at this!

**sans some of the server side pre-rendering / Google puppeteer updates -- I'll try to get those in via a separate PR.

[sghoweri]

^ I also noticed the Travis build was failing due to some unrelated eslint errors in packages/core so I autofixed those as well so the full CI build can run

[bmuenzenmeyer]

is this what i should be seeing on initial load?

[sghoweri]

is this what i should be seeing on initial load?

@bmuenzenmeyer that's almost what I'd expect to see on initial load. The weird thing mostly is just the Viewall page seemingly not showing up.

Out of curiosity, are you seeing a JS error or 404 error getting thrown? If it's a 404 error, it could just be there's an initial path option that needs to get fixed.

[bmuenzenmeyer]

no errors

…

On Thu, Jul 25, 2019 at 7:21 AM Salem Ghoweri ***@***.***> wrote: is this what i should be seeing on initial load? [image: image] <https://user-images.githubusercontent.com/298435/61685482-84ac9500-ace2-11e9-9f71-91cc1b96c7c7.png> @bmuenzenmeyer <https://github.com/bmuenzenmeyer> that's *almost* what I'd expect to see on initial load. The weird thing mostly is just the Viewall page seemingly not showing up. Out of curiosity, are you seeing a JS error or 404 error getting thrown? If it's a 404 error, it could just be there's an initial path option that needs to get fixed. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1008?email_source=notifications&email_token=AACI3Q7YKRLY4DYBGOUDM6TQBGLEBA5CNFSM4HGOI6YKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2ZJV7I#issuecomment-515021565>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACI3Q2XZMPH5AFXR3C76DDQBGLEBANCNFSM4HGOI6YA> .

[sghoweri]

Hmmm. The initial iframe URL src is set to undefined (but should still update if you change pages via the nav).

Double-checking to make sure I have the right initial path in there.

[sghoweri]

Fixed! Pushing 1-liner fix up 👍

[bmuenzenmeyer]

https://www.youtube.com/watch?v=NmPhaG1ud38

[bradfrost]

Woohoo! Great work everybody!