From 78ae4521346d6c1f77929a455abf269caf5b82c9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 3 Jul 2024 11:49:36 +0300
Subject: [PATCH] Disabled checked token for radio button

---
 apps/showcase/doc/checkbox/DisabledDoc.vue     |  6 ++++--
 apps/showcase/doc/radiobutton/DisabledDoc.vue  | 18 +++++++++++-------
 apps/showcase/pages/checkbox/index.vue         | 10 +++++-----
 .../src/radiobutton/style/RadioButtonStyle.js  |  5 +++--
 .../src/presets/aura/radiobutton/index.js      |  1 +
 .../src/presets/lara/radiobutton/index.js      |  1 +
 .../src/presets/nora/radiobutton/index.js      |  1 +
 7 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/showcase/doc/checkbox/DisabledDoc.vue b/apps/showcase/doc/checkbox/DisabledDoc.vue
index 59fdf040f..40615d60f 100644
--- a/apps/showcase/doc/checkbox/DisabledDoc.vue
+++ b/apps/showcase/doc/checkbox/DisabledDoc.vue
@@ -32,7 +32,8 @@ export default {
 export default {
     data() {
         return {
-            checked: false
+            checked1: false,
+            checked2: true,
         };
     }
 };
@@ -49,7 +50,8 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const checked = ref(false);
+const checked1 = ref(false);
+const checked2 = ref(true);
 <\/script>
 `
             }
diff --git a/apps/showcase/doc/radiobutton/DisabledDoc.vue b/apps/showcase/doc/radiobutton/DisabledDoc.vue
index 77f57d0fc..93b47ccd7 100644
--- a/apps/showcase/doc/radiobutton/DisabledDoc.vue
+++ b/apps/showcase/doc/radiobutton/DisabledDoc.vue
@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,17 @@
 export default {
     data() {
         return {
-            value: null,
+            value: 2,
             code: {
                 basic: `
-<RadioButton v-model="value" :value="1" disabled  />
+<RadioButton v-model="value" :value="1" disabled />
+<RadioButton v-model="value" :value="2" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <RadioButton v-model="value" :value="1" disabled  />
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
     </div>
 </template>
 
@@ -28,7 +31,7 @@ export default {
 export default {
     data() {
         return {
-            value: null
+            value: 2
         }
     }
 }
@@ -37,14 +40,15 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <RadioButton v-model="value" :value="1" disabled  />
+        <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value = ref(null);
+const value = ref(2);
 <\/script>
 `
             }
diff --git a/apps/showcase/pages/checkbox/index.vue b/apps/showcase/pages/checkbox/index.vue
index 3f64404db..4206d8f5c 100755
--- a/apps/showcase/pages/checkbox/index.vue
+++ b/apps/showcase/pages/checkbox/index.vue
@@ -52,16 +52,16 @@ export default {
                     label: 'Dynamic',
                     component: DynamicDoc
                 },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
                 {
                     id: 'filled',
                     label: 'Filled',
                     component: FilledDoc
                 },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
                 {
                     id: 'disabled',
                     label: 'Disabled',
diff --git a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js
index f3b6084c7..6a0a1eb89 100644
--- a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js
+++ b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js
@@ -111,10 +111,11 @@ const theme = ({ dt }) => `
 
 .p-radiobutton.p-disabled .p-radiobutton-box {
     background: ${dt('radiobutton.disabled.background')};
+    border-color: ${dt('radiobutton.checked.disabled.border.color')};
 }
 
-.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
-    color: ${dt('radiobutton.icon.disabled.color')};
+.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+    background: ${dt('radiobutton.icon.disabled.color')};
 }
 `;
 
diff --git a/packages/themes/src/presets/aura/radiobutton/index.js b/packages/themes/src/presets/aura/radiobutton/index.js
index 535c17edc..b1b87c85f 100644
--- a/packages/themes/src/presets/aura/radiobutton/index.js
+++ b/packages/themes/src/presets/aura/radiobutton/index.js
@@ -13,6 +13,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {
diff --git a/packages/themes/src/presets/lara/radiobutton/index.js b/packages/themes/src/presets/lara/radiobutton/index.js
index bcb87fa9c..5adb6d6f5 100644
--- a/packages/themes/src/presets/lara/radiobutton/index.js
+++ b/packages/themes/src/presets/lara/radiobutton/index.js
@@ -13,6 +13,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {
diff --git a/packages/themes/src/presets/nora/radiobutton/index.js b/packages/themes/src/presets/nora/radiobutton/index.js
index 891dfba39..c897d78db 100644
--- a/packages/themes/src/presets/nora/radiobutton/index.js
+++ b/packages/themes/src/presets/nora/radiobutton/index.js
@@ -13,6 +13,7 @@ export default {
         checkedBorderColor: '{form.field.border.color}',
         checkedHoverBorderColor: '{form.field.hover.border.color}',
         checkedFocusBorderColor: '{form.field.focus.border.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {