fix(ui-library): toggle switch label issues

[ashk1996]

closes #778 and closes #1158

[thrbnhrtmnn]

Hey @ashk1996 ,
here are my findings:

• it seems like the toggle has some space to the right, which is not needed:
  . I think we should remove this.
• Also, where does the width of the label of 180 px come from? [Bug]: ToggleSwitch - Label issus #1158 says it should come from the parent container. For me it seems to now be hardcoded into the component, which should not be the case. We should almost never use hardcoded values. All values should come from tokens.

The a11y issues have been solved, for this ticket I do not have any findings :-)

[thrbnhrtmnn]

Hey @ashk1996 ,

thanks for the changes, the space to the right of the toggle control is gone 😊

For the width of the label container I still have some findings:

• I see that in the toggle-content-col div there is a min and a max width defined. Are these tokens that we have in design as well? From my understanding these are not needed and actually cause some unwanted behaviour. In design the component width is defined by the parent container, so if I place the component in a div with 200 px width, the width of the toggle component should also be 200 px. Regardless how long the label is, the toggle control should then always be right aligned and the label should be left aligned. If the label gets too long for the available space, it should linebreak.

I think a short call would help to clarify the behaviour. Could you schedule something for next week?

[thrbnhrtmnn]

Hey @ashk1996 ,
thanks for the update. I found one small thing: when hasStateLabel=false, the Control Element should always be vertically center aligned. Currently, if we have a long label and thus the height of the component grows, the control stays top-aligned, which is not according to design.

Current behaviour:

Expected behaviour: