Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-02 18:17:46 +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 bitRadio
[id]="inputId" [id]="inputId"
[name]="name" [name]="name"
[disabled]="disabled" [disabled]="groupDisabled || disabled"
[value]="value" [value]="value"
[checked]="selected" [checked]="selected"
(change)="onInputChange()" (change)="onInputChange()"

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

@ -11,6 +11,7 @@ let nextId = 0;
export class RadioButtonComponent { export class RadioButtonComponent {
@HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`; @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
@Input() value: unknown; @Input() value: unknown;
@Input() disabled = false;
constructor(private groupComponent: RadioGroupComponent) {} constructor(private groupComponent: RadioGroupComponent) {}
@ -26,7 +27,7 @@ export class RadioButtonComponent {
return this.groupComponent.selected === this.value; return this.groupComponent.selected === this.value;
} }
get disabled() { get groupDisabled() {
return this.groupComponent.disabled; 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-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.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.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> </bit-radio-group>
</form>`; </form>`;
@ -41,7 +41,7 @@ class ExampleComponent {
this.formObj.patchValue({ radio: value }); this.formObj.patchValue({ radio: value });
} }
@Input() set disabled(disable: boolean) { @Input() set groupDisabled(disable: boolean) {
if (disable) { if (disable) {
this.formObj.disable(); this.formObj.disable();
} else { } else {
@ -49,6 +49,8 @@ class ExampleComponent {
} }
} }
@Input() optionDisabled = false;
constructor(private formBuilder: FormBuilder) {} constructor(private formBuilder: FormBuilder) {}
} }
@ -81,7 +83,8 @@ export default {
}, },
args: { args: {
selected: TestValue.First, selected: TestValue.First,
disabled: false, groupDisabled: false,
optionDisabled: false,
label: true, label: true,
}, },
argTypes: { argTypes: {
@ -101,7 +104,7 @@ export default {
const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({ const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
props: args, 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({}); export const Default = DefaultTemplate.bind({});