From 74140e99d911d32daf4f22a88ffe3d2ac6c6ab68 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Wed, 11 Jan 2023 07:35:52 +1000
Subject: [PATCH] Let a single radio button option be disabled (#4419)

---
 .../src/radio-button/radio-button.component.html      |  2 +-
 .../src/radio-button/radio-button.component.ts        |  3 ++-
 .../src/radio-button/radio-button.stories.ts          | 11 +++++++----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/libs/components/src/radio-button/radio-button.component.html b/libs/components/src/radio-button/radio-button.component.html
index 6ecbbff862d..2bcd4c0d5f1 100644
--- a/libs/components/src/radio-button/radio-button.component.html
+++ b/libs/components/src/radio-button/radio-button.component.html
@@ -4,7 +4,7 @@
     bitRadio
     [id]="inputId"
     [name]="name"
-    [disabled]="disabled"
+    [disabled]="groupDisabled || disabled"
     [value]="value"
     [checked]="selected"
     (change)="onInputChange()"
diff --git a/libs/components/src/radio-button/radio-button.component.ts b/libs/components/src/radio-button/radio-button.component.ts
index 32aa6e5577a..8da02488d47 100644
--- a/libs/components/src/radio-button/radio-button.component.ts
+++ b/libs/components/src/radio-button/radio-button.component.ts
@@ -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;
   }
 
diff --git a/libs/components/src/radio-button/radio-button.stories.ts b/libs/components/src/radio-button/radio-button.stories.ts
index d2689e84d2c..4990c6b6ce0 100644
--- a/libs/components/src/radio-button/radio-button.stories.ts
+++ b/libs/components/src/radio-button/radio-button.stories.ts
@@ -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({});