bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-15 07:54:55 +00:00
Code Issues Releases Wiki Activity

[CL-274] Update styling for radio button (#10333)

Browse Source
This commit is contained in:
Victoria League
2024-08-01 10:28:50 -04:00
committed by GitHub
parent e390c0612c
commit ac6d4f248b
3 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ let nextId = 0;
export class RadioButtonComponent {
@HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
@HostBinding("class") get classList() {
return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-2"];
return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1"];
}
@Input() value: unknown;

29
libs/components/src/radio-button/radio-button.stories.ts
View File

@@ -164,3 +164,32 @@ export const BlockHint: Story = {
`,
}),
};
export const Disabled: Story = {
render: () => ({
props: {
formObj: new FormGroup({
radio: new FormControl(0),
}),
},
template: /* HTML */ `
<form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group">
<bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" [value]="0" [disabled]="true">
<bit-label>First</bit-label>
</bit-radio-button>
<bit-radio-button id="radio-second" [value]="1" [disabled]="true">
<bit-label>Second</bit-label>
</bit-radio-button>
<bit-radio-button id="radio-third" [value]="2" [disabled]="true">
<bit-label>Third</bit-label>
</bit-radio-button>
</bit-radio-group>
</form>
`,
}),
};

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

@@ -25,8 +25,8 @@ export class RadioInputComponent implements BitFormControlAbstraction {
"tw-border",
"tw-border-solid",
"tw-border-secondary-600",
"tw-w-3.5",
"tw-h-3.5",
"tw-w-5",
"tw-h-5",
"tw-mr-1.5",
"tw-bottom-[-1px]", // Fix checkbox looking off-center
"tw-flex-none", // Flexbox fix for bit-form-control
@@ -34,6 +34,11 @@ export class RadioInputComponent implements BitFormControlAbstraction {
"hover:tw-border-2",
"[&>label:hover]: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-500",
"before:tw-content-['']",
"before:tw-transition",
"before:tw-block",
@@ -41,18 +46,15 @@ export class RadioInputComponent implements BitFormControlAbstraction {
"before:tw-rounded-full",
"before:tw-inset-[2px]",
"focus-visible:tw-ring-2",
"focus-visible:tw-ring-offset-2",
"focus-visible:tw-ring-primary-700",
"disabled:tw-cursor-auto",
"disabled:tw-border",
"disabled:tw-bg-secondary-100",
"disabled:hover:tw-border",
"checked:tw-bg-text-contrast",
"checked:tw-border-primary-600",
"checked:tw-border-2",
"checked:hover:tw-border",
"checked:hover:tw-border-2",
"checked:hover:tw-border-primary-700",
"checked:hover:before:tw-bg-primary-700",
"[&>label:hover]:checked:tw-bg-primary-700",
@@ -60,10 +62,13 @@ export class RadioInputComponent implements BitFormControlAbstraction {
"checked:before:tw-bg-primary-600",
"checked:disabled:tw-border-secondary-100",
"checked:disabled:tw-bg-secondary-100",
"checked:disabled:tw-border-secondary-600",
"checked:disabled:hover:tw-border-secondary-600",
"checked:disabled:hover:tw-border-2",
"checked:disabled:tw-bg-background",
"checked:disabled:before:tw-bg-text-muted",
"checked:disabled:hover:before:tw-bg-secondary-600",
"checked:disabled:before:tw-bg-secondary-600",
];
constructor(@Optional() @Self() private ngControl?: NgControl) {}