From d9d3a46d0af118b2c2f67e0c746d6e5ce464d1ec Mon Sep 17 00:00:00 2001
From: Oleg Solodkov <94829167+sol-0@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:32:17 +0400
Subject: [PATCH] Added radio btn marker visibility customization in disabled
 state (#4151)

Signed-off-by: Oleg Solodkov <oleg.solodkov@xored.com>
---
 packages/theme/styles/components.scss         | 9 +++++++++
 packages/ui/src/components/RadioButton.svelte | 2 ++
 2 files changed, 11 insertions(+)

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index aad085c539..51f5fbf52b 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -431,6 +431,15 @@
       }
     }
   }
+  &.marker-visible.checked {
+    .marker {
+      background-color: var(--primary-button-disabled);
+
+      &::after {
+        content: '';
+      }
+    }
+  }
   &.disabled {
     cursor: not-allowed;
 
diff --git a/packages/ui/src/components/RadioButton.svelte b/packages/ui/src/components/RadioButton.svelte
index 5fbe1fe429..bc72f71c96 100644
--- a/packages/ui/src/components/RadioButton.svelte
+++ b/packages/ui/src/components/RadioButton.svelte
@@ -29,6 +29,7 @@
   export let action: () => void = () => {}
   export let gap: 'large' | 'small' | 'medium' | 'none' = 'none'
   export let labelGap: 'large' | 'medium' = 'medium'
+  export let isMarkerVisible: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -38,6 +39,7 @@
   class:disabled
   class:checked={group === value}
   tabindex="-1"
+  class:marker-visible={isMarkerVisible}
   on:click={() => {
     if (!disabled && group !== value) action()
   }}