Changing the styling of form labels

[grahamford]

The default style for the <label> in a form is text-transform: capitalize !important;.

This works fine when the label is just a couple of words but looks wrong when the labels get a bit wordier. I'm a bit confused about the best way to style the core components that involve the shadow dom. Is there a way to turn off this capitalisation?

[bbogdanov]

Hi, @grahamford,

We are going to provide a CSS prop where you would be able to change the text transformation really soon. We will try to make it with the 5.0.4 release this week but if we don't we will definitely introduce it with 5.0.5 on 2nd of April

Meanwhile, there is a workaround with adding a <span> inside the label and adjust the span transformation to your needs.

[grahamford]

The span has worked. Thanks for the tip @bbogdanov.

Should I be importing the cores styles on a project with both @clr and @cds components? ie should I be adding these to my main stylesheet?

@import '~normalize.css/normalize.css'; // css reset
@import '~@cds/core/global.min'; // clarity global styles
@import '~@cds/core/styles/module.shims.min'; // non-evergreen browser shims
@import '~@cds/city/css/bundles/default.min'; // load base font

I've tried both with, and without but didn't see any change in appearance.

[bbogdanov]

Actually it might be a good thing that you doesn't see any visual changes. That's what we are aiming for - none or just light changes that we need to do in order to bring better a11y support(color, size, etc).

The css imports are needed so yea - you have to add them.

[bbogdanov]

@grahamford #5741 The PR went in. We are going to release it tomorrow.