wearewondrous / fractal-twig-drupal-adapter

Twig template adapter for Fractal with Drupal 8 directives.
http://fractal.build
MIT License
13 stars 13 forks source link

Subcomponent styles being applied to parent component #5

Open akempler opened 6 years ago

akempler commented 6 years ago

The problem, addClass() is adding the classes from the subcomponent instead of the specified classes.

Example: If I add a component to fractal like the following, which includes a subcomponent (see the include statement in the code below): Component: card

{%
  set card_classes = [
  'card'
]
%}
<div class="col-md-6">
  <div {{ attributes.addClass(card_classes) }}>
    <div class="card-body">
      {% block content %}
        {{ content }}
      {% endblock %}
      {% include "/fields/link_button.twig" %}
    </div>
  </div>
</div>

Subcomponent - Button (in a separate component file)

{%
  set button_classes = [
  'field',
  'btn',
  'btn-primary'
]
%}
<div {{ attributes.addClass(button_classes, 'field--item') }}>{{ link }}</div>

What happens is that the below div from the card component gets populated with the value of button_classes, and not card_classes. <div {{ attributes.addClass(card_classes) }}>

In other words, I end up with this generated html:

<div class="col-md-6">
    <div class="field field--label- btn btn-primary field--item">
        <div class="card-body">
            This is a vertical card.

            <div class="field field--label- btn btn-primary field--item"></div>
        </div>
    </div>
</div>

Is there a different approach I should be using?

Thanks.

tassilogroeper commented 6 years ago

thank you @akempler for pointing this out. we will have a look into that. ATM there is no work around, since this is pretty much related to the fractl rendering stack.