Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects Releases Wiki Activity

Let a single radio button option be disabled (#4419)

Browse Source
This commit is contained in:
Thomas Rittson 2023-01-11 07:35:52 +10:00 committed by GitHub
parent d08f93774b
commit 74140e99d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
bitRadio
[id]="inputId"
[name]="name"
[disabled]="disabled"
[disabled]="groupDisabled || disabled"
[value]="value"
[checked]="selected"
(change)="onInputChange()"

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

@ -11,6 +11,7 @@ let nextId = 0;
export class RadioButtonComponent {
@HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
@Input() value: unknown;
@Input() disabled = false;
constructor(private groupComponent: RadioGroupComponent) {}
@ -26,7 +27,7 @@ export class RadioButtonComponent {
return this.groupComponent.selected === this.value;
}
get disabled() {
get groupDisabled() {
return this.groupComponent.disabled;
}

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

@ -14,7 +14,7 @@ const template = `
<bit-label *ngIf="label">Group of radio buttons</bit-label>
<bit-radio-button [value]="TestValue.First" id="radio-first">First</bit-radio-button>
<bit-radio-button [value]="TestValue.Second" id="radio-second">Second</bit-radio-button>
<bit-radio-button [value]="TestValue.Third" id="radio-third">Third</bit-radio-button>
<bit-radio-button [value]="TestValue.Third" [disabled]="optionDisabled" id="radio-third">Third</bit-radio-button>
</bit-radio-group>
</form>`;
@ -41,7 +41,7 @@ class ExampleComponent {
this.formObj.patchValue({ radio: value });
}
@Input() set disabled(disable: boolean) {
@Input() set groupDisabled(disable: boolean) {
if (disable) {
this.formObj.disable();
} else {
@ -49,6 +49,8 @@ class ExampleComponent {
}
}
@Input() optionDisabled = false;
constructor(private formBuilder: FormBuilder) {}
}
@ -81,7 +83,8 @@ export default {
},
args: {
selected: TestValue.First,
disabled: false,
groupDisabled: false,
optionDisabled: false,
label: true,
},
argTypes: {
@ -101,7 +104,7 @@ export default {
const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
props: args,
template: `<app-example [selected]="selected" [disabled]="disabled" [label]="label"></app-example>`,
template: `<app-example [selected]="selected" [groupDisabled]="groupDisabled" [optionDisabled]="optionDisabled" [label]="label"></app-example>`,
});
export const Default = DefaultTemplate.bind({});