Implement text transformation (uppercase, lowercase)

[passiomatic]

CSS has the ability to do text transformations: (uppercase, lowercase, etc). Does Elm UI has it? It seems not the case.

Generated Elm code

So, how do you translate lower case, uppercase in the generated Elm code? Should we pass the typed string value in the editor thru String.toUpper before rendering or CodeGen it?

Or maybe we leave the typed value untouched and we generate code that calls String.toUpper?

The UI

I guess this is best done via a pill selector Aa | AA | aa similar to Sketch (see below), mapped to a Elm type:

type FontTransform
    = Uppercase
    | Lowercase
    | None

A little digression about Small-caps

On related topic: should stuff like “small-caps”, which in Elm UI is a font feature, be in the same group of the text transformation functions? Perhaps it makes sense to a have a different place in the UI for the OpenType features.

If I look at Sketch it has a little Text Options panel (first), while Figma group everything into a Type details panel (second).