UIKit Fixes & Updates

[sghoweri]

TLDR: a bunch of misc updates cleaning and fixing up the core work from #1078

This includes:

• Updated UI for expanding / collapsing in-page code panels + corresponding icon / naming updates used in the Context / Tools menu
• Added Copy / Copied SVG icons for the copy to clipboard button
• Reduced the # of initial UI re-renders (particularly unnecessary rerenders of the Nav) via updates to the main HTML template + Layout component
• Added the Loader UI (spinner) inside Drawer when source code is getting loaded
• Polished up the UI for the Viewport resizer
• Added mobile / small screen support for displaying the Nav as a slide out panel (aka vertical nav) + dropdown to allow for the exact same layout options on all screen sizes
  • This also sets us up for a larger Nav UI refactor now that we don’t have totally different Nav behavior on smaller vs larger screen sizes!
• CSS updates to fix / improve small screen support — in particular, trying to make sure the navigation and viewport content don’t get chopped off!
• Updated CSS for Pattern Lineage UI to better allow links to wrap if needed
• Added the ability to auto-close the primary navigation via pressing the escape key + clicking outside the Nav (including slight behavior differences for the mobile panel vs larger screen dropdown / side nav)
• Ported over the “sticky” copy to clipboard behavior (copy to clipboard button stays at the top of the code snippet, even while scrolling!).
  • Note: Safari for iOS support for this is a bit buggy when scrolling through the code panel due to rendering differences. This will be improved on in a future update!
• Fixed placeholder text color contrast issues in the global search input
• Updated the “Open in a New Tab” UI to improve the consistency of updating when expected
• Updated the Header UI on smaller screens to now display a Close icon when the Nav is open!
• Updated the Viewport size UI to more reliably display the current viewport size (in particular when initially loading)
• Started cleaning up the Nav component’s internal logic + updated to no longer auto-close the mobile navigation section you are currently on, in addition to no longer “forgetting” which section you are on while toggling between the vertical and horizontal layout modes on larger screens
• Theoretically added / restored support for setting the default theme color / layout mode via the Pattern Lab config (need to further test to verify)

Note: this PR includes the same open / close panel fixes from #1074

Closes # (TBD)

[sghoweri]

@bmuenzenmeyer any idea why Travis / Netlify didn't run on this PR?

Maybe it has something to do with my PR pointing to another feature branch vs dev? 🤔

[sghoweri]

Side note: I still want to get these updates merged down into the feature/uikit-refactor-and-enhancements branch vs dev (unless the other updates have already gotten merged down) — I just switched bases to make sure the Travis CI build is running!

[bmuenzenmeyer]

@sghoweri merged #1078 into dev and merged dev into this PR - good for review I take it?

[coveralls]

Coverage remained the same at 74.144% when pulling 1b89f55 on feature/uikit-refactor-and-enhancements--v2 into 4b2faff on dev.

[sghoweri]

@sghoweri merged #1078 into dev and merged dev into this PR - good for review I take it?

Yessir! Thanks @bmuenzenmeyer!

[bmuenzenmeyer]

netlify is fixed - was a problem with uikit-polyfill not being published