Reduced ToggleSwitch's heights to 16px and 24px

[smmr-dn]

Changes

Originally, the ToggleSwitch checkmark icon of class iui-toggle-switch-icon had the margin setup of iui-size-m (16px; 8px each) with an additional of 1px on each side ($iui-toggle-switch-border-thickness).

On top of that, the content class iui-toggle-switch's block-size was specified by the addition of --_iui-toggle-switch-handle-size (16px) + --_iui-toggle-switch-handle-offset * 2 (8px) + $iui-toggle-switch-border-thickness * 2 (2px) which resulted in 26px.

Therefore, these $iui-toggle-switch-border-thickness values have been removed in this PR to reduce the height from 26px to 24px while maintaining the icons' size to be 16px for medium (default size). The small toggle was originally 18px in height, and now has been reduced to 16px.

Testing

Screenshots containing ToggleSwitch with this change have been approved.

Docs

Added two changesets.

[mayank99]

This has again changed the height of the regular size ToggleSwitch. Only the small one should be affected.

Edit: Actually it's the opposite: only the regular one should be affected. See later comment.

[smmr-dn]

This has again changed the height of the regular size ToggleSwitch. Only the small one should be affected.

I just double checked and realized that there are two sizes for ToggleSwitch: small 18px and medium (default) 26px, which have now been reduced to 16px and 24px. Were these supposed to be 16px and 24px instead of 18px and 26px? Most of the examples/stories use the default medium size, I believe that might be why it affects the other screenshots.

[mayank99]

I just double checked and realized that there are two sizes for ToggleSwitch: small 18px and medium (default) 26px, which have now been reduced to 16px and 24px. Were these supposed to be 16px and 24px instead of 18px and 26px?

Oh wow, I'm not sure how I missed this. I thought they were the same height as our other components (i.e. 24px and 36px).

Looking at our Figma library, the heights appear to be 18px and 24px, so let's go with that for now. More specifically, the dimensions are 46x24 and 32x18.

I personally think 24px is too short for the default toggle switch, but we can have that conversation in the future (outside this PR).

Misunderstanding.

[r100-stack]

Just left a small comment. Regarding the actual sizes, agreed with @mayank99's comments.

[r100-stack]

You might need to mention which size is now 24px, because there are multiple ToggleSwitch sizes.

Same for the other changeset.