Pattern parameters not working in conjunction with style modifiers.

[garrettc]

I am using Pattern Lab Node vv2.7.2 on Mac, with Node v7.5.0 (behaviour also seen on v6), using the Gulp Edition.

I have an atom

<button ng-click="{{ btnNgClick }}" ng-class="{{ btnNgClass }}" ng-repeat="{{ btnNgRepeat }}" ng-show="{{ btnNgShow }}" ng-hide="{{ btnNgHide }}" ng-disabled="{{ btnNgDisabled }}" class="btn btn-primary {{ styleModifier }}">{{ btnText }}</button>

And I'm calling it in a molecule template like so

{{> atoms-button-primary:pull-sm-left|course-mini-quiz__back-button|ng-hide(btnNgClick: "back()", btnText: "Back") }}

But the resulting HTML in PL is

<button ng-click="" ng-class="" ng-repeat="" ng-show="" ng-hide="" ng-disabled="" class="btn btn-primary ">Button</button>

Nothing is getting replaced, apart from btnText which is coming from data.json.

If I remove the patter parameters then the style modifiers come through ok.

{{> atoms-button-primary:pull-sm-left|course-mini-quiz__back-button|ng-hide }}

I see a lot of parameter issues in Github, but nothing that exactly matches this fairly simple case, I'm not nesting multiple levels or using any unquoted strings.

Happy to get stuck in to help debug this, or have it pointed out that I'm doing something exceedingly stupid 😉

[tomasszabo]

Same problem with Grunt edition and Pattern Lab v2.9.2.

[tomasszabo]

Just found out that additional styleModifiers (2nd and next) must not contain dash (-) in their names (first styleModifier may). Then it works as expected.

Also watch out for parentheses in parameter values - seems that Pattern Lab doesn't like it either.

[gael-boyenval]

quite similar problem here
atom :

{{> atoms-icon:ca-ico--premium-content|cm-short-view__icon(icotext:"premium content") }}

no pattern parameter is applied.

my problem come from the multiple styleModifiers, because if let only one styleModifier, the pattern parameter is included properly

{{> atoms-icon:ca-ico--premium-content(icotext:"premium content") }}

[bradfrost]

I'm not sure if this is the exact same issue, but it's close enough I think.

I'm including a pattern into a template and attaching a pattern parameter, like so:

{{> organisms-flex-slider(sliderID: "flex-slider1") }}

In my page JSON file, I'm then adjusting the number of items in my slider, like so:

"items" : [
            { 
                "heading" : "This is a heading"
            },
            {
                "heading" : "This is a heading"
            },
            { 
                "heading" : "This is a heading"
            },
            { 
                "heading" : "This is a heading"
            },
            { 
                "heading" : "This is a heading"
            }
]

Unfortunately the data changes I'm defining in JSON aren't being applied when the pattern parameter is in place. If I remove the pattern parameter, the JSON data gets applied properly.

The expected behavior would be to have both the pattern parameters and JSON data work in conjunction with one another.

[bmuenzenmeyer]

@bradfrost if you could give me a as best you can reduced reproduction of the issue - I'll get on it

[bmuenzenmeyer]

can you confirm the presence of the hyphen is what causes the problem? if so, it might be a simple regex issue

[bradfrost]

@bmuenzenmeyer hmm, I changed it to {{> organisms-flexslider(sliderID: "flexslider1") }} and it's still not inheriting the JSON data. Is that what you wanted me to do?

[bmuenzenmeyer]

@bradfrost yes thanks for checking. if you can provide as much of your pattern templates starting at organisms-flex-slider as possible, it helps me recreate your exact use case

(you can send this to me privately if you like too.)

[AnthonySGeorge]

I have a similar issue
paragraph-block.twig

<div class=" paragraph-block {% if styleModifier %} paragraph-block-{{styleModifier}}{% endif %}">
  <div class="container">
    <p>
      {{paragraph_block.short}}
    </p>
    <p>
      {{paragraph_block.medium}}
    </p>
  </div>
</div>

paragraph-block-isolate.twig
{% include "paragraph-block.twig" with {styleModifier: "isolate"} %}

paragraph-block.json

{
  "paragraph_block":
    {
      "short": "Short text here",
      "medium": "medium text here"
    }
}

paragraph-block~isolate.json

{
  "paragraph_block": {
    "short": "ISOLATED TEXT",
    "medium": "MORE ISOLATED TEXT",
    "styleModifier": "isolate"
  }
}

This is working when I look at the pattern at the molecule level however, as soon as I include the pattern at in a template or a page I get no data coming through even if I include a json file in the template or page folder.

template.twig

{% include "@organisms/site-header.twig" %}
<main class="site-content">
  {% block content %}
    {{ include('@molecules/paragraph-block.twig') }}
    {% include "@molecules/paragraph-block.twig" with {styleModifier: "isolate"} %}
  {% endblock %}
</main>
{% include "@organisms/site-footer.twig" %}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Roralee]

I'm experiencing a problem getting parameters to work at all. I'm working in the webpack version.
{{> atoms-buttons:btn-warning|btn-lg(key: "Submit", attribute1: value, attribute2: "value string") }}

I'm getting this result:

<button type="button" role="button" class="btn btn-warning btn-lg"></button>

If I remove the attribute parameters, I get the key value of "Submit" rendering in the button.

{{> 00-atoms/forms/buttons:btn-warning|btn-lg(key: "Submit") }}
<button type="button" role="button" class="btn btn-warning btn-lg">Submit</button>

If I remove the key reference in the (), I still don't get the parameters.

I've also tried different combinations of mustache reference vs short-hand and it doesn't seem to make a difference.
{{> 00-atoms/forms/buttons:btn-warning|btn-lg(key: "Submit", attribute1: value, attribute2: "value string") }}

Let me know if this question is more appropriate to log as an issue w/ the Comcast gang managing the webpack version.

[bradfrost]

@Roralee I'm not as in the weeds as @bmuenzenmeyer is, but we're in the process of deprecating pattern parameters and style modifiers in favor of moving to Handlebars' way of dealing with passing data into partials. Pattern parameters and style modifiers were customizations added to Mustache, and the strategy is to remove the custom pattern parameters syntax and rely on templating engines' built-in ways of passing in parameters.

What can you do in the meantime? You can accomplish passing the data in through JSON or YAML like so:

{
    "styleModifier": "btn-lg",
    "key": "Submit",
    "attribute1": value,
    "attribute2": "value string"
}

Or you can switch to the Handlebars templating engine to accomplish that in a way that's built into the templating engine:

{{> btn-warning styleModifier="btn-lg" key="Submit" attribute1="value" attribute2="value string"  }}

[bmuenzenmeyer]

Thanks for the callout, the tease, and the workaround @bradfrost

I agree with all of what you said, but wanted to add that it's very much my plan to support Mustache as part of the 3.X release cycle - and I think I fixed most of this stuff with a 3.X alpha. That being said, any moderate to heavy use of Pattern Parameters and StyleModifiers should make one pause and question if Mustache is the right tool to use - hence Handlebars.

see also #834

[tristanbailey]

Hi, can the docs get an update for this. Took me a while to figure in the hbs files to use not :string() but string=“”