bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 05:13:29 +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-cursor-pointer",
"tw-inline-block", "tw-inline-block",
"tw-align-sub", "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-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-content-['']",
"before:tw-block", "before:tw-block",
"before:tw-absolute",
"before:tw-inset-0", "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", "after:tw-content-['']",
"[&>label]:tw-border-2", "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 // if it exists, the parent form control handles focus
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-2", "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-2",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2", "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-offset-2",
"[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600", "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-primary-600",
"disabled:tw-cursor-auto", "disabled:before:tw-cursor-auto",
"disabled:tw-border", "disabled:before:tw-border",
"disabled:hover:tw-border", "disabled:before:hover:tw-border",
"disabled:tw-bg-secondary-100", "disabled:before:tw-bg-secondary-100",
"disabled:hover:tw-bg-secondary-100", "disabled:hover:before:tw-bg-secondary-100",
"checked:tw-bg-primary-600", "checked:before:tw-bg-primary-600",
"checked:tw-border-primary-600", "checked:before:tw-border-primary-600",
"checked:hover:tw-bg-primary-700", "checked:before:hover:tw-bg-primary-700",
"checked:hover:tw-border-primary-700", "checked:before:hover:tw-border-primary-700",
"[&>label:hover]:checked:tw-bg-primary-700", "[&>label:hover]:checked:before:tw-bg-primary-700",
"[&>label:hover]:checked:tw-border-primary-700", "[&>label:hover]:checked:before:tw-border-primary-700",
"checked:before:tw-bg-text-contrast", "checked:after:tw-bg-text-contrast",
"checked:before:tw-mask-position-[center]", "checked:after:tw-mask-position-[center]",
"checked:before:tw-mask-repeat-[no-repeat]", "checked:after:tw-mask-repeat-[no-repeat]",
"checked:disabled:tw-border-secondary-100", "checked:disabled:before:tw-border-secondary-100",
"checked:disabled:hover:tw-border-secondary-100", "checked:disabled:hover:before:tw-border-secondary-100",
"checked:disabled:tw-bg-secondary-100", "checked:disabled:before:tw-bg-secondary-100",
"checked:disabled:before:tw-bg-text-muted", "checked:disabled:after:tw-bg-text-muted",
"[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]", "[&:not(:indeterminate)]:checked:after:tw-mask-image-[var(--mask-image)]",
"indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]", "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
"indeterminate:tw-bg-primary-600", "indeterminate:before:tw-bg-primary-600",
"indeterminate:tw-border-primary-600", "indeterminate:before:tw-border-primary-600",
"indeterminate:hover:tw-bg-primary-700", "indeterminate:hover:before:tw-bg-primary-700",
"indeterminate:hover:tw-border-primary-700", "indeterminate:hover:before:tw-border-primary-700",
"[&>label:hover]:indeterminate:tw-bg-primary-700", "[&>label:hover]:indeterminate:before:tw-bg-primary-700",
"[&>label:hover]:indeterminate:tw-border-primary-700", "[&>label:hover]:indeterminate:before:tw-border-primary-700",
"indeterminate:before:tw-bg-text-contrast", "indeterminate:after:tw-bg-text-contrast",
"indeterminate:before:tw-mask-position-[center]", "indeterminate:after:tw-mask-position-[center]",
"indeterminate:before:tw-mask-repeat-[no-repeat]", "indeterminate:after:tw-mask-repeat-[no-repeat]",
"indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]", "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
"indeterminate:disabled:tw-border-secondary-100", "indeterminate:disabled:tw-border-secondary-100",
"indeterminate:disabled:tw-bg-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) {} constructor(@Optional() @Self() private ngControl?: NgControl) {}

16
libs/components/src/checkbox/checkbox.stories.ts
View File

@@ -13,6 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
import { BadgeModule } from "../badge"; import { BadgeModule } from "../badge";
import { FormControlModule } from "../form-control"; import { FormControlModule } from "../form-control";
import { FormFieldModule } from "../form-field";
import { TableModule } from "../table"; import { TableModule } from "../table";
import { I18nMockService } from "../utils/i18n-mock.service"; import { I18nMockService } from "../utils/i18n-mock.service";
@@ -30,6 +31,7 @@ const template = /*html*/ `
@Component({ @Component({
selector: "app-example", selector: "app-example",
template, template,
imports: [CheckboxModule, FormFieldModule, ReactiveFormsModule],
}) })
class ExampleComponent { class ExampleComponent {
protected formObj = this.formBuilder.group({ protected formObj = this.formBuilder.group({
@@ -55,8 +57,8 @@ export default {
title: "Component Library/Form/Checkbox", title: "Component Library/Form/Checkbox",
decorators: [ decorators: [
moduleMetadata({ moduleMetadata({
declarations: [ExampleComponent],
imports: [ imports: [
ExampleComponent,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
FormControlModule, FormControlModule,
@@ -195,17 +197,17 @@ export const Custom: Story = {
props: args, props: args,
template: /*html*/ ` template: /*html*/ `
<div class="tw-flex tw-flex-col tw-w-32"> <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 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>
<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 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>
<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 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> </label>
</div> </div>
`, `,

2
libs/components/src/form-control/form-control.component.html
View File

@@ -1,5 +1,5 @@
<label <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']" [ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
> >
<ng-content></ng-content> <ng-content></ng-content>

1
libs/components/src/radio-button/radio-input.component.ts
View File

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