I may be misunderstanding the purpose of a component variant, but I have created a “button” component and added a “large” variant. I select the “large” variant when editing the component and proceed to add classes and change the size property of my button element to “large”. I save. I select “base” from the drop down (still editing the component) and my classes are still applied as is the size of button element. In fact, the variant drop down doesn’t seem to do anything?
I created the component from a button element, and when editing the component structure I noticed it’s not possible to wrap the element, delete it, replace it or add any other element.
I think you misunderstood it a bit. Component variants enable you to style the component differently, based on the variant, but not to add or remove the class per variant.
So for now, it’s only working if you change styling per variant on the ID level (not on class). However, changing classes based on variant is not something that is supported/supposed to work that way. If you want to change classes, you can use “classes” property.
You can create a feature request inside Feature Requests / Improvements about this one (changing styles per class on different component variations), as this is something that we could explore if there is enough support for this
I would move this post to the feature request, but I see that you added one issue below, so I can’t.
About this one, I can’t replicate it. Once you convert a Button element into a Component, you can still right-click it and access the context menu to perform actions such as wrapping it. This works as expected when you are interacting with a component instance.
However, the behavior changes when you are editing the component itself. In that context, the Button becomes the top-level element. Since Buttons in Bricks are not nestable, you cannot add elements inside it or wrap it with another element - because the button is already top-level item.
If you need to add nested elements or wrap the Button, you should first convert a Block or Div into a Component and then place the Button inside that container. The root element of the component must be something that supports nesting.
I hope I explained it well, but please let me know if something is not clear or if I did not understand it correctly.
Thanks for clarifying how the variants work. The proposed workaround using the classes property only solves some of it. I was trying to change the property of the button to “large” in a particular component variation but realised this is also not included in the variation.
If you need to add nested elements or wrap the Button, you should first convert a Block or Div into a Component and then place the Button inside that container. The root element of the component must be something that supports nesting.
I was editing the component instance and wanted to wrap the button and found that this was not possible. I guess the workaround works; seems a bit clumsy.
