“Group” is a several elements combined visually into one. Such elements often go one after another without any gaps, like an input with button etc.
group kind does almost nothing except for the nonwrapping behaviour:
Elements of the group
Elements could be divided into two types: abstract
group-item and specific
group-item, are the shortcuts for the specific ones using the defaulted CSS-selectors
:last-child. They could be used if the content of the group is unified:
If the visual order would be different from their order and nesting in DOM, it would be better to use specific ones:
kind: group-start kind: group-middle kind: group-end
Those elements could be easily configured: by default those elements don't have border-radius between them and they're also overlap each other by one pixel. To disable the removal of radiuses you can use
no-radius param, to disable the overlap, you can use the
More that that, if the visual side of the element is actually inside it, you could use the specific selector to say where the radiuses should be removed (and you can mark this way more than one element):
kind: group-item '& > .complex-button-inner, & > .complex-button-inner:before'
Groups are treated as horizontal by default, so they would have the margins and border-radius resetted on the lefts and the rights. If you'd need to have the same effect, but on the tops and bottoms of the block, you could use the
kind: group-item vertical kind: group-start vertical kind: group-middle vertical kind: group-end vertical