Material modifiers

[craigcoles]

Is it possible to allow modifiers to be passed into materials when being used in views? It would be pretty helpful, as currently I have the same material repeated 5 times just to show the variations of it.

Following on from this, it would be awesome if the styleguide actually showed {{modifier}} in the live preview, and below between the notes and live preview - listed the possible modifiers.

[LukeAskew]

The way I've done this in the past is by grouping components together in directories. For instance you could have

- components
  - buttons
    - 00-default.html
    - 01-secondary.html
    - 02-tertiary.html 

where the content of 01-secondary.html and 02-tertiary.html are something like this:

{{> buttons.default modifier="some-thing"}}

and the 00-default.html is something like

<a href="#" class="button {{modifier}}">{{modifier}}> button</a>

Open to suggestions on how to make this more useful.

[craigcoles]

Ah sweet! That will pretty much solve the issue that I was having! 💥

The only other thing that stems from this, is the styleguide doesn't actually show the {{modifier}} in the code preview. What I would like to / imagined to happen is (using your example):

• The material partial:

  ---
  notes: |
  
  This is a sample button
  
  modifiers: |
  
  * primary
  * secondary
  * tertiary
  
  ---
  
  <a href="#" class="button {{modifier}}">button</a>
  
  

• Then in the code preview it would show

  <a href="#" class="button {{modifier}}">button</a>
  

• In the live preview, it would loop over the modifiers and generate a preview for each material.

• Using the material in the view would be the exact same way as you mentioned

Not sure if I have explained that correctly, but I see that KSS does this but they also do it for pseudo-classes too. Here is a screenshot that might explain it better.

[craigcoles]

@LukeAskew Will there be any movement on this?

[LukeAskew]

Not sure I have enough time to implement this, but I'm working on a refactor that should make community contributions for stuff like this an easier process. I'll update this ticket whenever that happens. Thanks for patience 🙏