Checkbox updated rendering for vertical alignment

[TeyaVes]

As discussed at the FE and Design Sync we have all agreed on the alignment of the checkboxes in different scenarios (for more information open the notes from the meeting linked above).
E.g. - checkbox column in Grid ( the checkboxes are currently not vertically aligned in the middle in most of the suites) :

In order to achieve what we have agreed on with the Designers, we'll need to update the rendering of the checkboxes by adding an additional wrapper element around the k-checkbox input:

<span class="k-checkbox-wrap">
    <input class="k-checkbox" />
</span>

This discussion is for us to decide on how this should be implemented in the different suites- whether it should be added everywhere or wherever needed, whether it should be added as part of the component's rendering or the component will be wrapped in the above mentioned class and whether there are limitations/concerns to any of these approaches.

@telerik/kendo-front-end , @Raisolution , @tapopov , @Xizario , @nenchef , @VicTachev , @jivanova , @zdravkov , @ag-petrov

[tsvetomir]

Sorry for the stupid question, but don't we intentionally align the checkboxes in the Grid via this rule? Do we need a wrapper to change it?

We don't have a "checkbox component" right now, just a bunch of classes for <input type="checkbox">. Additional markup will require a proper component with custom rendering, and preferably a different name.

[joneff]

Sorry for the stupid question, but don't we intentionally align the checkboxes in the Grid via this rule? Do we need a wrapper to change it?

Content inside a table cell is aligned in two ways: cell alignment and own alignment.

In the case of the checkbox no matter how we try to align it, we can never get it to align correctly on the center line. The best possible outcome was with own alignment top.

Now, we can have a better alignment: by using and external box, which is flex, and as tall as a single text line; we then center the checkbox within that box, using flexbox and not own align; and finally we can align the box inside the cell.

Note: this alignment hell is not something specific to our checkbox and tables -- it applies to all native checkboxes and all native tables!

We are aware that there is no checkbox component in angular and probably other limitations in the other frameworks and this is why we are having this discussion.

For angular specifically, I am guessing that the checkbox column of the grid can be made to use the wrapping span element; the same goes for lists and where ever we need correct alignment of checkboxes. That's a guess -- I might be wrong.

As a final note: that wrapper will also allow us to correctly position the ripple for checkbox / radio, because we had less than ideal results previously.

[tsvetomir]

We do not ship a checkbox component in the themes, period. We ship a set of classes for styling native elements. See the the docs in jQuery for reference.

We can choose to change that and create a new component with custom markup, but its a fundamentally different approach. The most obvious implication is that the developer no longer has direct access to the input element. Any uses of the classes, as documented, must also be replaced with a component.

Since this is a significant change, we need to consider alternatives that do not additional markup.

Edit: A wrapper, specifically for the grid checkbox column, is definitely an option. The drawback is that it won't handle checkboxes added by the customer.

[joneff]

The wrapper is also needed for list elements, be it in dropdowns on checkbox list, so we can align the checkboxes correctly in the scenarios where we have them. Like I said -- anywhere and everywhere this specific alignment is needed.

Indeed, I prefer that we have everything covered from the components, so we don't miss even a single instance, but that's not a requirement -- the themes do not discriminate -- as long as there is wrapping element with the correct class name, the checkboxes will be aligned. I should clarify that in my previous reply, I was referring to the difference between angular component and angular directive, with kendo-angular-checkbox being the latter and not components in general.

I am not insinuating that we should in anyway remove / limit direct access to the input element. Instead, if there is no framework limitation, like in the case of kendo-react-checkbox and there is already an existing wrapping element, or adding one will not change the API of the component, like in telerik-blazor-checkbox, it can be built in. For the rest of the suites, obviously, we should handle the misalignment on case by case basis, like the grid, lists etc.

The same applies for our customers: noone is obliged to add the wrapping element. However, if proper / correct / pixel perfect is a requirement, then it can be achieved with said element.

A picture to make things a but more clear:

• first line is using wrapper
• second line is not

[tsvetomir]

That makes sense 👍🏽

Just to reiterate, using native elements / directives is a conscious decision on both the theme and component level. So it's a feature, not a bug 🤷🏽‍♂️

[tsvetomir]

Can we also consider a more meaningful name for the wrapper? If it's only doing vertical centering then the name can be more specific.