patternlab-node icon indicating copy to clipboard operation
patternlab-node copied to clipboard

Published 20 hours ago • verified publisher icon pattern-lab

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

Open sghoweri opened this issue 6 years ago • 21 comments

A continuation of some of the big ideas discussed here: https://github.com/pattern-lab/styleguidekit-assets-default/issues/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): image

  1. 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:

  • [x] Migrate away from Bower to NPM #915
  • [x] Remove jQuery dependency from existing components
    • [x] uikit-workshop/src/scripts/utils/data-saver.js #935
    • [x] uikit-workshop/src/scripts/components/typeahead.js #949
    • [x] uikit-workshop/src/scripts/components/pattern-finder.js #949
    • [x] uikit-workshop/src/scripts/components/modal-viewer.js (removed in upcoming PR)
    • [x] uikit-workshop/src/scripts/components/panels-viewer.js
    • [x] uikit-workshop/src/scripts/components/styleguide.js
  • [x] Refactor PL’s components to use proper dependency management (ie use ES Imports + Babel)
  • [x] 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)
  • [x] 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
  • [x] 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
  • [x] 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 #920

CC @pattern-lab/devs

sghoweri avatar Jul 23 '18 11:07 sghoweri

@bradfrost @bmuenzenmeyer checking off a bunch of these based on the work from https://github.com/pattern-lab/patternlab-node/pull/915 and https://github.com/pattern-lab/patternlab-node/pull/920! 🎉

sghoweri avatar Aug 14 '18 11:08 sghoweri

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

bmuenzenmeyer avatar Aug 24 '18 15:08 bmuenzenmeyer

@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 — https://github.com/pattern-lab/patternlab-node/compare/dev...sghoweri:feature/uikit-refactor-p3

sghoweri avatar Aug 24 '18 15:08 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 >_<

sghoweri avatar Aug 24 '18 15:08 sghoweri

Anything here I can help with?

ccharlton avatar Oct 11 '18 17:10 ccharlton

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[bot] avatar Dec 10 '18 20:12 stale[bot]

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

stale[bot] avatar Dec 25 '18 02:12 stale[bot]

+1 to the reopening! 🥇

ccharlton avatar Feb 13 '19 05:02 ccharlton

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[bot] avatar Apr 14 '19 06:04 stale[bot]

Bump

sghoweri avatar Apr 15 '19 17:04 sghoweri

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[bot] avatar Jun 14 '19 17:06 stale[bot]

Bump :)

tburny avatar Jun 14 '19 21:06 tburny

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[bot] avatar Aug 13 '19 21:08 stale[bot]

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

stale[bot] avatar Sep 12 '19 22:09 stale[bot]

Funny enough, @bmuenzenmeyer and I were JUST chatting about this one yesterday...

There’s still more exciting stuff to come however I just want to take a moment to appreciate just how much progress has been made — look at that checklist!!! 😳🎉😂

sghoweri avatar Oct 30 '19 11:10 sghoweri

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[bot] avatar Dec 29 '19 11:12 stale[bot]

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[bot] avatar Feb 27 '20 12:02 stale[bot]

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[bot] avatar Apr 28 '20 04:04 stale[bot]

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[bot] avatar Jun 28 '20 12:06 stale[bot]

This might qualify for a pinned issue.

mfranzke avatar Jun 28 '20 12:06 mfranzke

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[bot] avatar Aug 29 '20 11:08 stale[bot]