Option to not prefix config key names to class names

[JasonElkin]

Grid setting keys are prepended to class names.

This is OK if the CSS class names in use can correspond to key names e.g. background-white where background is the key and white is the value, but that's not always the case.

e.g. frameworks like Tailwind and Bootstrap use classes like text-white and text-right.

Because we need have unique keys for JS we end up with things like text-align-text-right or text-color-text-white which requires additional/different classes in the backoffice. This is not always straightforward to produce - especially when using frameworks like Bootstrap and Tailwind that auto-generate a lot of classes.

It would be really helpful to have an option to to not include the key in the CSS class name.

Alternatively, it might make sense to not include the key at all, and rely solely on the modifier value to prepend the classes when necessary.

[lars-erik]

Thanks, I'd say settings with an extra key (not in the Umbraco schema) would override the default behavior.
That will aid in not breaking backwards-compatibility.
So for example :

[
    {
        "label": "Untouched",
        "key": "untouched",
        "view": "textstring"
    },
    {
        "label": "Text Color",
        "key": "text-color",
        "sg-prefix": "text",
        "view": "radiobuttonlist",
        "config": {
            "prevalues": [
                {
                    "label": "White",
                    "value": "white"
                },
                {
                    "label": "Black",
                    "value": "black"
                }
            ]
        }
    },
    {
        "label": "Text Alignment",
        "key": "text-alignment",
        "sg-prefix": "text",
        "view": "radiobuttonlist",
        "config": {
            "prevalues": [
                {
                    "label": "Left",
                    "value": "left"
                },
                {
                    "label": "Right",
                    "value": "right"
                }
            ]
        }
    }
]

Untouched will get untouched-value while the two others get text-value.

Make sense?

[JasonElkin]

Yes, although the point is the prefix needs to be exactly the same in the backoffice and frontend.

If we've already got to configure it for the frontend, and Umbraco gives us a way to do that (that already works in the backoffice) then it makes sense to use that.

This would mean that with the override in place the most common use case will end up looking like this:

{
    "label": "Text Alignment",
    "key": "text-alignment",
    "sg-prefix": "",
    "modifier": "text-{0}",
    "view": "radiobuttonlist",
    "config": {
        "prevalues": [
            {
                "label": "Left",
                "value": "left"
            },
            {
                "label": "Right",
                "value": "right"
            }
        ]
    }
}