UIKit Refactor Part 6: Refactor Search / Typeahead Component, Bug Fixes, and Improved Scrolling

[sghoweri]

Major refactor of Pattern Lab's Search Component + major improvements to overall scroll behavior (especially on mobile / touch devices!) This PR includes misc bug fixes and cross-browser related updates that popped up in testing the previous round of UIKit updates. 🎉

New Search Component

• Refactored to now ship as a Preact powered web component
• Added ability to customize the max number of results to display (via custom element prop), among a handful of other customizable settings added in this first MVP (specifying the placeholder text to display, disabling the option to new clear button, and specifying the accessible clear button text -- being the others)
• Removed jQuery dependency
• Removed Bootstrap Typeahead and Bloodhound; replaced with React Autocomplete
• Refactored Sass to split out from original Typeahead styles (and overrides); updated to incorporate theming and layout config variations in one spot
• Swapped out the default search filtering with fuse.js for smarter fuzzy search
• Add clear button to easily start over
• Updated keyboard shortcut logic to now work with the intuitive command + f; key combo. fixed the code so this now works consistently both inside and outside the Pattern Lab iframe!

Bug Fixes

• Fixes several mobile, Safari and IE 11-specific issues encountered in local dev testing (like default browser-specific styles for buttons and input elements)
• Fixes major scrolling issues seen on mobile devices while still fixing the IE 11-specific issues that unintentionally caused the bugs in the first place
• Implements iframe resizer functionality to Pattern Lab to bring much more native-like scroll functionality + much better scrolling performance as a result
• Adds better mobile support for devices with curved / notched screens (iPhone X, iPhone XS and iPhone XS Max)
• Fixes a UI bug relating to missing background colors in the nested Pattern lab navigation

---

Before

Note the extra whitespace on the left and right sides when viewing on a notched device like the iPhone XS Max

Safari UI bug with the dropdown buttons + global UI bug with the background color

IE 11 rendering bug with the side nav layout

After

Full screen support + responsive UI layout via the new viewport-fit meta tag + CSS env constants: https://css-tricks.com/the-notch-and-css/

Fixed dropdowns + fixed default <button> styles in Safari

Fixed layout bugs in IE 11

Known Issues

Search-specific

• Selecting a search result on smaller screens doesn’t automatically close the main navigation
• On smaller screens the context menu on the right doesn’t properly overlap the <pl-search> component in the nav dropdown (fixed)
• Search font size on small-ish screens (iPhone XS Max in landscape) smaller than 16px — zooms in when focusing on search input (fixed)

General

• Need to add a visible border color to the context menu on smaller screens in light mode
• Need a visible border or shadow on the navigation dropdown on smaller screens

CC @pattern-lab/devs

[sghoweri]

@bmuenzenmeyer any ideas on why the [Travis build](url
https://travis-ci.org/pattern-lab/patternlab-node/builds/432204161?utm_source=github_status&utm_medium=notification) might be failing here?

I’m not seeing any errors per say here, just a timeout from Travis after not seeing any activity after 10 minutes... 🤔

[bmuenzenmeyer]

@sghoweri that is odd - I can take a look during my next session. Also just kicked it off again to see if that helps

[bmuenzenmeyer]

@sghoweri my first thought is that I do not see any output from uikit-workshop - I thought it was supposed to be attempting a build via npm test as of #933

[sghoweri]

@bmuenzenmeyer just a heads up that the original buggy behavior I mentioned in my original PR shouldn't be an issue anymore.

Ended up swapping out the original React Autocomplete library I had in here for the much better maintained / less buggy React Autosuggest library which did the trick.

This should all buttoned up now when you get a chance to review this!

[sghoweri]

@bradfrost @bmuenzenmeyer btw, we have the combined updates from #949 and #946 both up on our staging site here if you wanted to play around with these updates! https://feature-v2-upgrade-patternlab.boltdesignsystem.com/pattern-lab/?p=viewall-components-button

[sghoweri]

Hey @bmuenzenmeyer and @bradfrost — I’m getting kinda nervous about this + #946 waiting in limbo...

I’ve got a bunch of misc cross-browser fixes and tweaks after some deep Safari for Mac and Safari for iPhone XS Max testing yesterday (spoiler: mobile support in PL is about to get much, much more usable), however I’m kind of stuck on getting that + the already finished UIKit panel / modal refactor I’ve been sitting on for a month if these two PRs are dying on the vine 😢

Anything I can do to help?

[bmuenzenmeyer]

@sghoweri thanks for the poke.
I've been underwater the last couple weeks. I owe ya'll more than that. Sit tight and I promise we'll get into a better cadence.

What can you do to help? Check your slack DMs

[bradfrost]

@sghoweri I'm not totally sure what I can do to help, but if you have some things in mind just let me know!

[bmuenzenmeyer]

@sghoweri

#946 is merged! I am committed to getting the project into a healthier state, and you are integral part of that plan! Thanks so much for all of this. Does the PR need to get updated to be cleaner?

[sghoweri]

#946 is merged! I am committed to getting the project into a healthier state, and you are integral part of that plan! Thanks so much for all of this. Does the PR need to get updated to be cleaner?

@bmuenzenmeyer this PR should be good to review!

After pulling in the latest from dev and testing this out locally, I realized that I had to pull in some of the additional updates from #960 in order to make sure the bugs and over UI fixes I made it in here (updated both PR descriptions accordingly).

[bmuenzenmeyer]

This is another outstanding bit of work @sghoweri

Thank you so much for helping breathe new life into the UI.