What’s Next for Pattern Lab’s UI? Epic Brainstorming + Next Steps

[sghoweri]

A continuation of some of the big ideas discussed here:
pattern-lab/styleguidekit-assets-default#92

In a nutshell, three big goals here:

1. How can we make Pattern Lab’s UI so polished and performant that folks like me aren’t constantly tempted to DIY our own fork of Pattern Lab to better integrate into our own design system
2. Move PL’s UI to a pick and choose model — when PL’s UI doesn’t work or doesn’t look EXACTLY how someone needs it to, figure out a model where someone could, say, custom render how the Header / Viewport controls look without having to completely fork Pattern Lab if 80% of everything is working fine. Think React render props but more design system-friendly (and ideally be more tech agnostic — example via Custom Elements)

To put it another way, how the hell would someone make their PL UI look like this without completely going off the deep end (and still using most of the under the hood logic and upstream changes and improvements):

3. Fix a ton of UI issues (dropdown menu height on mobile, dropdown menu scrolling on mobile, replace existing search with something a lot more forgiving — aka fuzzy search)

I know a handful of these have open tickets but just to lay everything out in one place, here’s a quick punch list of some of the next steps that come to mind for me to move us towards these 3 overarching goals:

• Migrate away from Bower to NPM UIKit Refactor: Bower to NPM Migration, Partial JS Refactor, and New JS Build Pipeline #915
• Remove jQuery dependency from existing components
  • uikit-workshop/src/scripts/utils/data-saver.js UIKit Refactor Part 4: JavaScript Cleanup, Consolidation and Refactoring  #935
  • uikit-workshop/src/scripts/components/typeahead.js UIKit Refactor Part 6: Refactor Search / Typeahead Component, Bug Fixes, and Improved Scrolling #949
  • uikit-workshop/src/scripts/components/pattern-finder.js UIKit Refactor Part 6: Refactor Search / Typeahead Component, Bug Fixes, and Improved Scrolling #949
  • uikit-workshop/src/scripts/components/modal-viewer.js (removed in upcoming PR)
  • uikit-workshop/src/scripts/components/panels-viewer.js
  • uikit-workshop/src/scripts/components/styleguide.js
• Refactor PL’s components to use proper dependency management (ie use ES Imports + Babel)
• Add proper JavaScript bundling to the build process (Webpack or Rollup — ideally Webpack so we can take advantage of the massive number of plugins and libraries already available)
• Reorganize Pattern Lab’s Components to tie all related assets (JS, Sass and template) into one folder per thing — basically start us off with this setup with bundling our JS, then start further breaking apart into component-specific Sass (and probably rename some things)
  • https://github.com/bolt-design-system/bolt/blob/epic/v2/packages/styleguidekit-assets-bolt/src/patternlab-pattern.js
  • https://github.com/bolt-design-system/bolt/blob/epic/v2/packages/styleguidekit-assets-bolt/src/patternlab-viewer.js
  • https://github.com/bolt-design-system/bolt/tree/epic/v2/packages/styleguidekit-assets-bolt/src/components
• Refactor PL’s UI theming approach to use CSS Custom Properties; allows for better customization downstream + in-browser theme controls
• Stop commiting the dist folder to Github — at a minimum we should compile the dist folder when publishing to NPM via Lerna so downstream consumers who aren’t customizing anything can still have everything compiled and all ready to go
• Set up Travis CI to continuously stage preview branches of PRs, branches and tags (via Netlify or Now.sh)
• Wire up PL’s UI to be more progressive web app (PWA) like: faster rendering, smaller download size, add service worker to build process, less janky animations, etc UIKit Refactor Part 2: Migrate Remaining Gulp Tasks Over to Webpack #920

CC @pattern-lab/devs

[sghoweri]

@bradfrost @bmuenzenmeyer checking off a bunch of these based on the work from
#915 and #920! 🎉

[bmuenzenmeyer]

@sghoweri tagging this here as a quick means to talk to you. Does the panel viewer open consistently for you?

[sghoweri]

@bmuenzenmeyer you mean does the panel viewer open up, is draggable, etc?

No, at least not with the latest code on dev (before and after the first two of these two UIkit refactor PRs went FWIW; I don’t believe it was working as expected).

I do have some updates pending that fix it, however those are tied in with the POC I’ve been working on —
dev...sghoweri:feature/uikit-refactor-p3

[sghoweri]

^ I would have posted this up for some initial feedback however the whitespace diffs aren’t making this easy to show just what’s changed >_<

[ccharlton]

Anything here I can help with?

[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!

[stale]

Issue closed after going stale. It can be re-opened if still relevant.

[ccharlton]

+1 to the reopening! 🥇

[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!