Follow-up UIKit Fixes

[sghoweri]

Minor UIKIt fixes I had actually originally thought were part of #1094 but mistakenly overlooked (sorry @bmuenzenmeyer!)

These updates include things like:

• Nav updates to try to get more predictable Nav opening / closing behavior
• CSS updates to remove the "boxiness" of the updated Viewport styles by adding a more subtle solid color background + removing the shadow around the Viewport itself
• Minor CSS fixes to the code panel / drawer to avoid content getting chopped off (especially on smaller screen sizes)
• Logo sizing fix for older versions of IE 11
• IE 11 fix for the viewport resizer background position being a bit off

[sghoweri]

One thing I know I’ll need to add to this PR: need to fix the Nav highlighting for level two links that don’t have any nested children.

[bradfrost]

@sghoweri Thanks for this! Only sorta related, but I could use some help getting the local environment set up to make some tweaks to the uikit code in a separate branch. How would I go about getting that set up? I can probably tackle that tonight or tomorrow night.

[sghoweri]

Thanks @bradfrost! (PS. you can check out the latest and greatest here if you're curious: https://deploy-preview-1097--patternlab-handlebars-preview.netlify.com/?p=all)

[sghoweri]

RE getting a local environment setup, I can do a quick writeup later today (sometime after lunch) to help get you going!

[sghoweri]

@bradfrost try giving this a shot -- lemme know if this works and/or if you run into any issues!

[sghoweri]

Working on Pattern Lab’s UIKit Locally

Step 1

Pull in the latest updates from the dev branch + do a fresh install to make sure you’re fully up to date.

git checkout dev
yarn run setup
git pull

Step 2:

Create a temp config file that points to the local Handlebars demo so we can easily preview changes as they’re being made:

echo "module.exports = { buildDir: '../development-edition-engine-handlebars/public' };" >> packages/uikit-workshop/.patternlabrc.js

NOTE: make sure to not commit this — this is just an example config to help get you going!

Step 3: Initially Compile The Handlebars Demo To Have Some Demo Content When Making Changes

In one terminal / iTerm2 tab, run the following to get the handlebars demo installed and running locally

yarn run preview:hbs

Step 4: Boot Up a Local Dev Server / Watch for Changes

Finally let’s get the UIKit watch task running + boot up a local dev server to reload when we save any Sass / JS changes

In one terminal tab, run the following to boot up a local browser sync server:

cd packages/development-edition-engine-handlebars && npx browser-sync start --server "public" --files "public"

And then in a 2nd terminal tab, run the following to start up the UIKit watch task:

cd packages/uikit-workshop && yarn run watch

[bradfrost]

Awesome thanks so much @sghoweri!

I'm able to work through all these steps, but things seem to be falling down on me when I run the yarn run watch in the uikit-workshop directory. It takes this:

And turns it into this:

I'm able to get the desired view back by re-running yarn run preview:hbs, but the yarn run watch command keeps returning me to that other state.

Any suggestions?

[sghoweri]

Awesome thanks so much @sghoweri!

I'm able to work through all these steps, but things seem to be falling down on me when I run the yarn run watch in the uikit-workshop directory. It takes this:

And turns it into this:

I'm able to get the desired view back by re-running yarn run preview:hbs, but the yarn run watch command keeps returning me to that other state.

Any suggestions?

Dang it. Well, the good news is that I actually ran into the same issue yesterday when testing this new workflow out (albeit, I swear this new workflow was working before sending this over... 🤦‍♂️).

Hang tight @bradfrost - troubleshooting this morning!

[sghoweri]

PS. If you haven’t guessed it, this is a bit of a different setup than the one I’ve been recently using to work on PL’s UI.

Normally all I’ll have to do is just fire up an existing project like Bolt and run the UIKit watch command... 🤔