Add a "@context-class" or whatever for the preview of elements

[pieplu]

It will be usefull to have a context option for atoms (and molecules, structures), to set a parent class around the markup for the preview mode.

Exemple:

• A white button, that only be displayed on a dark background
• Style for base text markup (a, ul/ol) on a specified context (blog article section)

/**
* @atom Button white
* @contextClass bkg--dark
* @markup
*  <button class="btn btn--light">Button</button>
*/
.btn--light{}

The preview html will be:

<div class="SG-gr-12 SG-component__preview bkg--dark">
    <button class="btn btn--light"> Button </button>
</div>

I'm not sure that @contextClass is the best name. This feature let us re-use a 'clean' markup atom on a molecules or structures with an include. And let "site-editor" use "copy markup" button with a clean markup, without not needed markup (like the Button atom on nucleus demo)

[ryanhyslop]

If there were some rather generic use cases for this could something like the @flag annotation work? ( https://holidaypirates.github.io/nucleus/substitutions-flags.html ). We have one for full-width, a light or dark context would perhaps be similar. Indeed I've come across cases where I need a relatively positioned container to hold an atom so @flag position:relative or something to that effect would have helped.

[pieplu]

Flag could be a good entry. And maybe add few common use-case can be good.

But:

• Flag is only for structures (at the moment)
• I think we can found multiple use-case for "context". You speak about position relative, but for an other use-case it could be an image on background, or a special background color, etc...

Use "css class" let anyone define each case he want for each website.

[ryanhyslop]

I generally agree, I'm a bit unsure of the original idea of @flag as one use changes the preview of the component ( could argue that is context ), the other is to annotate deprecated patterns.

I think having a css class to provide the context does give the most flexibility but means I have to write css in my application for the pattern library which seems at a bit of a crossed purpose.

I guess 'context' is quite broad, substitutions can be used to give an element context if that context is another molecule or structure. Perhaps the configuration of Nucleus could take a css partial with some classnames that can be used for context.

Main thing for me is I don't want to be writing styles that are only used to configure Nucleus previews within my applications styles.

This is a good discussion though as it's a shortcoming in a fair few pattern library / style guide generators

[pieplu]

• I agree, context is not the best name.

Main thing for me is I don't want to be writing styles that are only used to configure Nucleus previews within my applications styles

But on the nucleus config you can add multiples css files. Are you confortable to create a special file for the styleguide?