styleguidekit-assets-default
styleguidekit-assets-default copied to clipboard
pattern-lab
Adding Customized States does not work
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"
Fails in the navigation
Works in "View All"
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?
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.
I forgot to mention there are certainly ways to hack things to get custom values to show up in the interim!
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.
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!
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
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.
@mooddesign Glad you were able to get something operational, and thanks for flagging the issue. We'll smooth this out soon!