Row Cols Definition for Bootstrap 5

[agitator]

Related to #473

@balavec @petschki we have to rethink our row-cols-idea

the mosaic adds "mosaic-" to every row class, adding classes "row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2" won't work

  <records interface="plone.app.mosaic.interfaces.IFormat"
           prefix="plone.app.mosaic.formats.row_cols_2211">
    <value key="name">row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-2</value>
    <value key="category">row</value>
    <value key="label">Columns L2/M2/S1</value>
    <value key="action">row-toggle-class</value>
    <value key="icon">true</value>
    <value key="favorite">false</value>
    <value key="weight">130</value>
  </records>

Also the value of an available action

<element>row-cols-2211</element>

doesn't get picked up as identifier, the "name" is used

Questions:

• can we skip the mosaic-prefix for classes?
• would a name with spaces as above work?
• or shall we create our own styles for those rules with bs mixins?

[agitator]

after talking with @petschki we decided to revert #477 - adding "row" has too many side effects

and we have to come up with a solution for Columns "L2/M2/S1"

[mauritsvanrees]

This has not been solved yet, right? I see several Columns options in the Mosaic editor, but they are greyed out and nothing happens when I click on them.

[petschki]

Until we come up with a better solution for this I've removed the greyed formats ... the problem here is, that the format actions cannot assign multiple classes right now. The row-toggle-class action picks the <value key="name">xyz</value> as css class name and if you put in here multiple classes separated with spaces, this cannot be toggled anymore. I'm thinking of either support space separated class values in the name key or adding a new value key so that we could configure row formats like this:

<records interface="plone.app.mosaic.interfaces.IFormat" prefix="plone.app.mosaic.formats.grid_row_6421">
    <value key="name">grid-row-6421</value>
    <value key="value>row-cols-xl-6 row-cols-lg-4 row-cols-md-2 row-cols-1</value>
    <value key="category">row</value>
    <value key="label">Responsive Row Columns XL:6 LG:4 MD:2 SM:1</value>
    <value key="action">row-toggle-class</value>
    <value key="icon">true</value>
    <value key="favorite">false</value>
    <value key="weight">100</value>
</records>