Patterns with Pattern Parameters Cannot Be Overwritten Downstream

[e2tha-e]

To replicate:

• Edit source/_patterns/04-pages/00-homepage.mustache
• Replace the content with this mustache code: {{> templates-homepage(emergency: true) }}
• This will render correctly in the Pattern Lab UI.
• Edit source/_patterns/03-templates/00-homepage.mustache
• Replace {{> molecules-alert }} with {{> molecules-alert(alertClass: 'error') }}
• This causes the emergency block to disappear instead of appearing with the correct alert class.

[bmuenzenmeyer]

To my knowledge, this is the expected behavior since pattern parameters were released - since encountering a pattern parameter causes immediate consumption of the data effectively closing off downstream changes. That said, I wouldn't call it perfect.

Does having a file like .source/_patterns/04-pages/00-homepage~emergency.json work for you?
Have you tried this in Pattern Lab PHP? I am going to install it fresh and try too.

[e2tha-e]

I remember doing recursive parameter submission all the time in Pattern Lab PHP, but wanted to be absolutely sure the latest version does it, and v1.0.0 definitely does it. Making the the exact code changes as in my first comment gets the alert class to show correctly.

Tilde-appended variants aren't the best option if you want to view components up and down the stream because you'll repeat definitions in multiple .json files, which goes against the DRY principle.

In any case, the emergency block shouldn't just disappear because of a downstream parameter submission.

[bmuenzenmeyer]

Hey @e2tha-e thanks for checking. I think I have a proposed solution that I might hack out and try as a branch. Welcome to suggestions for anyone too

[theorise]

I just wanted to say I came across this just yesterday and it is certainly something that would be great to have.

I may be abusing pattern parameters, but I am passing things such as data-attributes as JS hooks for components. In my use case:

We have a reusable icon atom, inside a reusable off-canvas organism. The icon acts as the close button:

{{> atoms-icon:icon--cross(iconDataAttributes:'data-off-canvas-toggle="toggle-target"') }

The molecule is included in certain templates, ideally as the following:

{{> organisms-off-canvas:off-canvas_small|off-canvas_right(offCanvasSelector:'toggle-target') }}

[bmuenzenmeyer]

Morning

The specifics of this issue seemed acceptable to me for a long time since only people using the more advanced features under certain scenarios would encounter this problem, and really one is left with many options as workarounds.

So I appreciate the additional information and 👍 - it's very valuable to me to see how people are using PL Node.

[e2tha-e]

@theorise That's exactly the sort of use-case which is not abuse, and would avoid the maintenance headache of making sure everything's up-to-date and correctly spelled in multiple places.