bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 14:53:33 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Bryan Cunningham
2025-07-03 12:14:10 -04:00
committed by GitHub
parent d1c6b334b1
commit 913c3ddbec
4 changed files with 65 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
libs/components/src/checkbox/checkbox.component.ts
View File

@@ -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) {}