Pattern Lab + Docs Site-related Enhancements & Fixes

[sghoweri]

Jira

• http://vjira2:8080/browse/BDS-922 (Docs Site Layout)
• http://vjira2:8080/browse/BDS-927 (Video component size - related to docs site layout issue)
• http://vjira2:8080/browse/BDS-910 (Finish Pattern Lab upgrades)

Summary

Implements a number of improvements and bug fixes related to the docs site and Pattern Lab UI.

Details

Docs Site Updates / Misc Fixes:

• Updated our docs site-specific grid + class name logic to address layout-related visual regression issues with a number of components
• Added a new Testing Steps component nav section that gets automatically added when a component has a TESTING.md file
• Fixed the new redesigned docs site homepage layout being completely broken in IE 11 / Edge

Misc Component / Bolt Core Updates

• Updated the Basalt Twig renderer library + locked down the version of Lit-HTML using (after troubleshooting an unrelated component explorer UI issue encountered when testing)
• Temporarily disabled the Bolt List Component’s console log (related to schema validation)
• Added a missing line-height + slightly increased the space between the link component's text and icon based on testing this component out on the Bolt docs site

Pattern Lab UIKit Fixes & Improvements:

• Updated our version of Pattern Lab UIKit to include updates from UIKit Refactor Part 8: Nav, Viewport, Header & More! pattern-lab/patternlab-node#973 in addition to several other updates on top of this
• 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
• Refactored Nav to automatically highlight the currently active page
• Refactored Nav to auto-close when you click outside of the Nav component — both inside AND outside of the iframe
• 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 NOT auto-close when you select a new page to navigate to
• 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

Bonus: these updates should speed up the initial load and rendering times of Pattern Lab!

How to test

• Confirm the homepage, main docs section of the site and main Pattern Lab section of the site works as expected
• Confirm updates fix the Bolt component layout / rendering issues flagged by QA

[sghoweri]

Thanks @danielamorse! See notes below:

On homepage, the main layout wrapper is pushed ~100px from the left, creating a dark-blue gap and causing a horizontal scrollbar.

Just pushed a couple more updates to help address this -- should be all set!

On homepage, the "View the Components" and "Getting Started Guide" buttons are transparent with white border. They are missing the primary, secondary styles seen in Chrome.

Was this local or via a now.sh url? Locally (and on the https://feature-pattern-lab-refactor.boltdesignsystem.com/) I'm seeing the buttons render correctly in IE 11 so wanted to double-check.

In Pattern Lab, the dark theme nav background color is black not blue.

The black background for the PL nav is 100% intentional (those are fallback styles for browsers that don't support CSS variables (outside of Bolt) since this will be how folks can more easily customize the overall look and feel of Pattern Lab's UI in the near future). Working as expected!

[sghoweri]

There are couple issues:

1. The history state seems to be messed up, as I go back in history using the browser controls, I get pushed to the massive view all page.
2. The scrollbar on the side nav gets in the way of me trying to click the chevron to expand sub pages, maybe style the scrollbar with CSS so it never covers up ui.

@mikemai2awesome can another look at this when you get a chance?

I've pushed up a bunch of updates to address the browser history-related issues (should be in a much better spot now) + made some CSS adjustments to the nav itself (increasing the target area of the chevron + add a little extra space for the scrollbar). Should hopefully be good to go!

See latest updates -- updated code per PR feedback

[remydenton]

Links look much better, thanks!

I noticed some strange behavior with the navigation disappearing when resizing the width of the content. It only happens intermittently, though seems to happen pretty reliably if I open a new incognito window. Not a show-stopper IMO (hence why I'm approving the PR), but a nice-to-have if you have time and/or know what's up.

[danielamorse]

@sghoweri, pulled the branch down, ran clean, setup, and start...

Fixed

• offset homepage layout is fixed 👍

Issues

• Localhost has the transparent buttons with white border, staging has primary/secondary buttons.
• Localhost uses system font, staging uses Open Sans. (Actually, this is happening in Chrome on other branches too, may not be caused by these updates.)

Warnings

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/patternlab-viewer.js (358 KiB)

Are you not seeing either of these issues?

[danielamorse]

Tested again locally. Warnings are longer appear, and I understand that text issue is expected until you save a twig template. Approved 👍