What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

Hi I have a question about styling of components in the spryker frontend. Lets say I have a molecule

U012MFKV1D5
U012MFKV1D5 Posts: 13 🧑🏻‍🚀 - Cadet
in Help

Hi I have a question about styling of components in the spryker frontend. Lets say I have a molecule that exists in two variations (for simplicity lets a button that is white or black). My understanding is that modifiers ought to be used to realize that. Further, lets say the button is used in a molecule, the molecule is used in another molecule, and so on. How do I control the styling on the top level? What is the recommendation/ best practice? One way that solves this problem is to have a data variable 'buttonModifier' in each molecule that uses the button (directly or indirectly by using a molecule that uses the button) and pass this variable further down, until it eventually can be passed to the button modifiers. However, that seems like a suboptimal solution that quickly gets out of hand with growing number of components and styles. Another way is to pass modifiers to the 'top' molecule, and then pass them as modifiers to included molecules and eventually pass them to the button. However, here the question is how do we determine the relevant modifiers for the button molecule (and avoid that twig templates are now full of logic that extracts the correct modifiers). I'm happy for all input and experiences. Thanks, Tom.

Comments

  • U012PCVT2DB
    U012PCVT2DB Posts: 66 🧑🏻‍🚀 - Cadet

    This is one rabbit-hole to go, but you could also "redo" the modifier-styles from your top-molecule.
    To make it more usable, use the "@extend " (like @extend .vjs-icon-circle;) at the correct position in your top-molecule-scss

  • U012MFKV1D5
    U012MFKV1D5 Posts: 13 🧑🏻‍🚀 - Cadet
    edited April 2023

    Thanks, this was kinda in the back of my head as well, that this maybe can be solved via scss. Just so that I understand correctly, by using this approach I don't pass the modifiers to the button twig template, but instead just reuse the scss for the modifier in the top molecule? I like that approach, thank you :)

  • U012PCVT2DB
    U012PCVT2DB Posts: 66 🧑🏻‍🚀 - Cadet

    yep, that would be it.

Categories