fixup! fixup! fixup! Refactor(web): Remove label wrap from Checkbox, Radio, and Toggle

Author: pavelklibani

packages/web/src/scss/components/Checkbox/_Checkbox.scss

@@ -2,7 +2,7 @@
 //    and therefore bloating the CSS.
 // 2. We need to set the background-color of the non-disabled Checkbox input to initial color when it is hovered
 //    or active, because we need it contrasting with the background color.
-// 3. Make the text selectable
+// 3. Make the text selectable and allow links to be clickable in the helper text.
 
 @use 'theme';
 @use '../../theme/form-fields' as form-fields-theme;
@@ -21,6 +21,9 @@ $_field-name: 'Checkbox';
 
 .Checkbox__label {
     @include form-fields-tools.inline-field-label();
+    @include form-fields-tools.stretch(before, left);
+
+    position: relative;
 }
 
 .Checkbox__label--hidden {

packages/web/src/scss/components/Radio/_Radio.scss

@@ -1,6 +1,6 @@
 // 1. We need to set the background-color of the non-disabled Radio input to initial color when it is hovered
 //    or active, because we need it contrasting with the background color.
-// 2. Make the text selectable
+// 2. Make the text selectable and allow links to be clickable in the helper text.
 
 @use 'sass:map';
 @use '../../theme/form-fields' as form-fields-theme;

packages/web/src/scss/components/Toggle/_Toggle.scss

@@ -25,6 +25,7 @@ $_field-name: 'Toggle';
 
 .Toggle__label {
     @include form-fields-tools.inline-field-label();
+    @include form-fields-tools.stretch(before, right);
 
     position: relative;
 }

packages/web/src/scss/theme/_form-fields.scss

@@ -33,6 +33,7 @@ $helper-text-color-state-disabled: tokens.$disabled-content;
 // Inline field form components – Checkbox, Radio, etc.
 $inline-field-gap: tokens.$space-500;
 $inline-field-margin-y: tokens.$space-500;
+$inline-field-margin-x: tokens.$space-600;
 $inline-field-input-border-color-checked: tokens.$form-field-filled-border-state-selected;
 $inline-field-input-border-color-checked-disabled: tokens.$disabled-background;
 $inline-field-input-border-width: tokens.$border-width-200;

packages/web/src/scss/tools/_form-fields.scss

@@ -272,11 +272,17 @@
     @include typography.generate(form-fields-theme.$item-helper-text-typography);
 }
 
-@mixin stretch($pseudo-element: before) {
+@mixin stretch($pseudo-element: before, $expand: left) {
     &::#{$pseudo-element} {
         content: '';
         position: absolute;
         inset: 0;
         z-index: 0;
+
+        @if $expand == 'left' {
+            left: -#{form-fields-theme.$inline-field-margin-x};
+        } @else {
+            right: -#{form-fields-theme.$inline-field-margin-x};
+        }
     }
 }