Clarity: Directive clrLabelSize doesn't work

[realmfoo]

Describe the bug

I've tried to use clrLabelSize="6" but it doesn't change a label class from clr-col-md-2 to clr-col-md-6

How to reproduce

https://stackblitz.com/edit/angular-zxgdaa?file=src/app/app.component.html

A label tag has class clr-col-md-2.

Expected behavior

A label tag should have class clr-col-md-4.

Versions

App

• Angular: 8.2.14
• Clarity: 3.0.1

Device:

• Type: PC
• OS: Ubuntu 19.10
• Browser Google Chrome
• Version 80.0.3987.162

[hippee-lee]

clr-input-container provides both ControlClassService && ControlIdService.

The issue seems to be in the ClrLabel directive ngOnInit routine around here: https://github.com/vmware/clarity/blob/master/src/clr-angular/forms/common/label.ts#L34

Labeled and added to backlog.

[realmfoo]

I've found the problem. If I use an attribute clrLabelSize then a string value "6" is passed to method labelSize:

https://github.com/vmware/clarity/blob/5eefffd0b8b3db54747f8cf420acfd064e6d11a9/src/clr-angular/forms/common/form.ts#L36-L39

It doesn't pass a validation here: https://github.com/vmware/clarity/blob/5eefffd0b8b3db54747f8cf420acfd064e6d11a9/src/clr-angular/forms/common/providers/layout.service.ts#L27-L31
https://github.com/vmware/clarity/blob/5eefffd0b8b3db54747f8cf420acfd064e6d11a9/src/clr-angular/forms/common/providers/layout.service.ts#L57-L59

to be a number and doesn't change a value.

[tolgaurhan]

I've had the same problem. Using input brackets for angular property solved the problem

Instead of this:
<form clrForm clrLayout="horizontal" clrLabelSize="6">

try this:
<form clrForm clrLayout="horizontal" [clrLabelSize]="6">

[realmfoo]

I've found this workaround but a framework shouldn't swallow an error. Indeed it must either log it in the dev console or throw an exception.

And before creating an issue I've checked a documentation and it states that:

For example if you pass clrLabelSize="4" it will size the controls to use 8 grid columns for a total of 12 columns.

[gnomeontherun]

Thanks for the debugging @realmfoo! Yes it should handle numbers without [] and the workaround is to use a binding for now. We'll have to investigate the reason this is broken for a fix.

[sis0k0]

@gnomeontherun, do you think we should accept numbers without [] or instead throw an exception / show a warning?

[gnomeontherun]

Generally, it seems helpful to accept it instead of throwing exceptions. We should just coerce the value as it comes in, as that is best for us anyways to ensure typing.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.