search

pattern-lab / styleguidekit-assets-default

The static assets for the default StyleguideKit for Pattern Lab. Contains styles and mark-up for Pattern Lab's front-end.
http://patternlab.io/
MIT License
35 stars 67 forks source link

Adding Customized States does not work #108

Open mooddesign opened 6 years ago

mooddesign commented 6 years ago

First of all, thanks for the great work, folks!

I'm currently evaluating Pattern Lab (Edition Node Gulp) for a use case at my current employer. Besides some other minor issues that I'm experiencing I'm trying to use customized states ("production" in the screenshots, green dot) for components as stated here: http://patternlab.io/docs/pattern-states.html. And they are not showing up.

Screens: Fails on the component's "page" bildschirmfoto 2018-01-29 um 17 24 36

Fails in the navigation bildschirmfoto 2018-01-29 um 17 24 02

Works in "View All" bildschirmfoto 2018-01-29 um 17 24 17

The root cause is that the custom styles (style.css or pattern-scaffolding.css) are not being included in index.html. So the custom format neither applies to navigation nor content. Whereas they are properly included in #sg-viewport-iframes.

Version information: Node: v6.11.3 NPM: 3.10.10 NVM: 0.33.0

Pattern Lab (Edition Node Gulp): 1.3.4 styleguidekit-assets-default: ^3.5.2 styleguidekit-mustache-default: ^3.0.0

Maybe I'm misunderstanding the docs. Can you please enlighten me?

mooddesign commented 6 years ago

But I could probably just rewrite some gulp tasks, right?

bradfrost commented 6 years ago

Hey @mooddesign! I'm not sure if the latest and greatest version of how we're handling pattern states has made it into master yet (@bmuenzenmeyer, did the latest UI changes make it in yet? I can't remember). Judging by the screenshots you shared, I don't know if it has been updated.

In any case, I think there's still a bit of work to be done to expose custom pattern states and control their style. I'm afraid this has to go on my to-do list for now.

bradfrost commented 6 years ago

I forgot to mention there are certainly ways to hack things to get custom values to show up in the interim!

mooddesign commented 6 years ago

Thanks for the reply @bradfrost: I think I'm trying out the gulp way then, taking https://medium.com/buildit/taking-patternlab-modularity-to-the-next-level-774b06c8bf6f as inspiration.

bradfrost commented 6 years ago

Thanks! Also worth pointing out that "complete" is essentially "production". Once again, we should be a bit better at exposing/customizing these labels. Thanks for the patience and lemme know how you get on!

bmuenzenmeyer commented 6 years ago

The official docs falter in this exact respect, but this might be of interest to you: https://github.com/bmuenzenmeyer/plugin-node-uiextension

One of the use cases of this plugin was supporting this very use case in a roundabout way, since as you mention, the pattern-scaffolding.css wasn't included directly in the outer most window of PL.

The UI is changing significantly in the next few months - and this will certainly be a use-case we aim to support better.

note I have yet to test this with Edition Node Gulp 2.X. https://github.com/pattern-lab/edition-node-gulp/releases/tag/v1.3.4 should work, however

mooddesign commented 6 years ago

Basically I now merge the styleguide.min.css with my custom styles and overwrite what's in the public/styleguide folder. That's of course far from perfect, but works for a simple showcase.

bradfrost commented 6 years ago

@mooddesign Glad you were able to get something operational, and thanks for flagging the issue. We'll smooth this out soon!