[CL-620] add padding to increase checkbox clickable area (#15331)

* add padding to increaase checkbox clickable area

* fix checkbox story imports

* enlarge click area of checkbox w/out label

* apply disabled states to before

* WIP

* revert experimental changes

* add negative margin to account for extra padding

* Remove margin from checkbox and apply in form control

* Remove margin from radio as it's applied in form control

* add back line height removed in error

libs/components/src/checkbox/checkbox.component.ts

@@ -20,64 +20,75 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-cursor-pointer",
     "tw-inline-block",
     "tw-align-sub",
-    "tw-rounded",
-    "tw-border",
-    "tw-border-solid",
-    "tw-border-secondary-500",
-    "tw-h-[1.12rem]",
-    "tw-w-[1.12rem]",
-    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
+    "!tw-p-1",
+    "after:tw-inset-1",
+    // negative margin to negate the positioning added by the padding
+    "!-tw-mt-1",
+    "!-tw-mb-1",
+    "!-tw-ms-1",
 
     "before:tw-content-['']",
     "before:tw-block",
-    "before:tw-absolute",
     "before:tw-inset-0",
+    "before:tw-h-[1.12rem]",
+    "before:tw-w-[1.12rem]",
+    "before:tw-rounded",
+    "before:tw-border",
+    "before:tw-border-solid",
+    "before:tw-border-secondary-500",
 
-    "hover:tw-border-2",
-    "[&>label]:tw-border-2",
+    "after:tw-content-['']",
+    "after:tw-block",
+    "after:tw-absolute",
+    "after:tw-inset-0",
+    "after:tw-h-[1.12rem]",
+    "after:tw-w-[1.12rem]",
+
+    "hover:before:tw-border-2",
+    "[&>label]:before:tw-border-2",
 
     // if it exists, the parent form control handles focus
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-2",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-offset-2",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-primary-600",
 
-    "disabled:tw-cursor-auto",
-    "disabled:tw-border",
-    "disabled:hover:tw-border",
-    "disabled:tw-bg-secondary-100",
-    "disabled:hover:tw-bg-secondary-100",
+    "disabled:before:tw-cursor-auto",
+    "disabled:before:tw-border",
+    "disabled:before:hover:tw-border",
+    "disabled:before:tw-bg-secondary-100",
+    "disabled:hover:before:tw-bg-secondary-100",
 
-    "checked:tw-bg-primary-600",
-    "checked:tw-border-primary-600",
-    "checked:hover:tw-bg-primary-700",
-    "checked:hover:tw-border-primary-700",
-    "[&>label:hover]:checked:tw-bg-primary-700",
-    "[&>label:hover]:checked:tw-border-primary-700",
-    "checked:before:tw-bg-text-contrast",
-    "checked:before:tw-mask-position-[center]",
-    "checked:before:tw-mask-repeat-[no-repeat]",
-    "checked:disabled:tw-border-secondary-100",
-    "checked:disabled:hover:tw-border-secondary-100",
-    "checked:disabled:tw-bg-secondary-100",
-    "checked:disabled:before:tw-bg-text-muted",
+    "checked:before:tw-bg-primary-600",
+    "checked:before:tw-border-primary-600",
+    "checked:before:hover:tw-bg-primary-700",
+    "checked:before:hover:tw-border-primary-700",
+    "[&>label:hover]:checked:before:tw-bg-primary-700",
+    "[&>label:hover]:checked:before:tw-border-primary-700",
+    "checked:after:tw-bg-text-contrast",
+    "checked:after:tw-mask-position-[center]",
+    "checked:after:tw-mask-repeat-[no-repeat]",
+    "checked:disabled:before:tw-border-secondary-100",
+    "checked:disabled:hover:before:tw-border-secondary-100",
+    "checked:disabled:before:tw-bg-secondary-100",
+    "checked:disabled:after:tw-bg-text-muted",
 
-    "[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]",
-    "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
+    "[&:not(:indeterminate)]:checked:after:tw-mask-image-[var(--mask-image)]",
+    "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
 
-    "indeterminate:tw-bg-primary-600",
-    "indeterminate:tw-border-primary-600",
-    "indeterminate:hover:tw-bg-primary-700",
-    "indeterminate:hover:tw-border-primary-700",
-    "[&>label:hover]:indeterminate:tw-bg-primary-700",
-    "[&>label:hover]:indeterminate:tw-border-primary-700",
-    "indeterminate:before:tw-bg-text-contrast",
-    "indeterminate:before:tw-mask-position-[center]",
-    "indeterminate:before:tw-mask-repeat-[no-repeat]",
-    "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
+    "indeterminate:before:tw-bg-primary-600",
+    "indeterminate:before:tw-border-primary-600",
+    "indeterminate:hover:before:tw-bg-primary-700",
+    "indeterminate:hover:before:tw-border-primary-700",
+    "[&>label:hover]:indeterminate:before:tw-bg-primary-700",
+    "[&>label:hover]:indeterminate:before:tw-border-primary-700",
+    "indeterminate:after:tw-bg-text-contrast",
+    "indeterminate:after:tw-mask-position-[center]",
+    "indeterminate:after:tw-mask-repeat-[no-repeat]",
+    "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
     "indeterminate:disabled:tw-border-secondary-100",
     "indeterminate:disabled:tw-bg-secondary-100",
-    "indeterminate:disabled:before:tw-bg-text-muted",
+    "indeterminate:disabled:after:tw-bg-text-muted",
   ];
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {}

libs/components/src/checkbox/checkbox.stories.ts

@@ -13,6 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 
 import { BadgeModule } from "../badge";
 import { FormControlModule } from "../form-control";
+import { FormFieldModule } from "../form-field";
 import { TableModule } from "../table";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -30,6 +31,7 @@ const template = /*html*/ `
 @Component({
   selector: "app-example",
   template,
+  imports: [CheckboxModule, FormFieldModule, ReactiveFormsModule],
 })
 class ExampleComponent {
   protected formObj = this.formBuilder.group({
@@ -55,8 +57,8 @@ export default {
   title: "Component Library/Form/Checkbox",
   decorators: [
     moduleMetadata({
-      declarations: [ExampleComponent],
       imports: [
+        ExampleComponent,
         FormsModule,
         ReactiveFormsModule,
         FormControlModule,
@@ -195,17 +197,17 @@ export const Custom: Story = {
     props: args,
     template: /*html*/ `
       <div class="tw-flex tw-flex-col tw-w-32">
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+        <label class="tw-text-main tw-gap-2 tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           A-Z
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+        <label class="tw-text-main tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           a-z
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+       <label class="tw-text-main tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           0-9
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
       </div>
     `,

libs/components/src/form-control/form-control.component.html

@@ -1,5 +1,5 @@
 <label
-  class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
+  class="tw-transition tw-items-start [&:has(input[type='checkbox'])]:tw-gap-[.25rem] [&:has(input[type='radio'])]:tw-gap-1.5 tw-select-none tw-mb-0 tw-inline-flex tw-rounded has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
   [ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
 >
   <ng-content></ng-content>

libs/components/src/radio-button/radio-input.component.ts

@@ -29,7 +29,6 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "tw-border-secondary-600",
     "tw-w-[1.12rem]",
     "tw-h-[1.12rem]",
-    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
 
     "hover:tw-border-2",