Comment on pattern

[alienlebarge]

The original patternlab by @bradfrost had a commenting system for the patterns.

Is it possible to have it again ? It would be nice ... and helpfull

[dmolsen]

It'll be in the next release which should be in the next week or so. I'll leave this issue open until that drops.

[dmolsen]

This feature is now available in the dev branch but it's very much a work in progress and I think it could see substantial changes in the very near future.

[heroheman]

a real nice addition would be a kind of "layer" over an element/template/page where a client/dev/pm could add directly a comment on it.
Maybe its too far off the original annotation concept - but could imagine it as additional plugin.
Example: Bughead http://bugherd.com/features/

[dmolsen]

@heroheman -

sorry, but i'm not sure we'll ever add that feature ourselves. if someone wants to tackle that as a plug-in for the community that'd be great. it'd have to be a third party service like the one you mentioned.

[alienlebarge]

I'm waiting on this feature and I'm already writting comments/doc on patterns

So just to be sure, it will hide/unhide any tag with class="sg-annotations" and his children.

[dmolsen]

It's going to be a bit more complicated than that. Depending on which view you're in things are going to work a little differently. This is essentially what's happening:

1. Click "Annotations On"
2. The selectors for the annotations listed in annotations.js are compared against the DOM. If found...
3. On the pattern-only view we add a class to those parts with annotations. Mouse over, click and they pop-up exactly like Brad's mobile first demo. On the style guide or view all view they'll fill in under the related pattern.

The following dev work is still needed:

1. Updated styles on the pattern-only view.
2. A working implementation on the style guide and view all views. That's something that I talked to Brad about at BD Conf.

We're not terribly far away on this. It's just that both of us have a few speaking engagements in the near future and that's limiting our progress.

[dmolsen]

This feature isn't styled correctly (see #26) but the updated guts of it are now in the dev branch. From your perspective this is how you'd use it:

1. Edit source/_data/annotations.js. Annotations are related to selectors in the DOM of a pattern and are NOT directly tied to a pattern. For example, the logo annotation is related to .logo. This way the annotation will show up on that pattern as well as any pattern that uses the "logo" pattern (e.g. organisms-header). The current example file.
2. Regenerate your site to copy annotations.js to public/.

I think that's it in terms of creating/editing annotations. For viewing them you'll need to click "annotations" under the "eye" icon in the toolbar and then...

On pattern-only views you should mouse over elements that have annotations, your cursor will turn to a question mark, click the element and the annotation should pop up. You can't see the question mark in this screenshot.

On style guide and view all views after clicking the "annotations" menu item the annotations should show up listed under the appropriate patterns.

[dmolsen]

This feature is live though it still needs good docs.