From 8e059919b18350d02529ad9a0faacda6c80d0e58 Mon Sep 17 00:00:00 2001
From: Alexey Zinoviev <alexey.zinoviev@xored.com>
Date: Mon, 30 Oct 2023 19:43:28 +0000
Subject: [PATCH] ezqms-334: more configurations for radio button and radio
 group (#3917)

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>
---
 packages/theme/styles/components.scss         | 19 +++++++++++++++++--
 packages/ui/src/components/RadioButton.svelte |  6 ++++--
 packages/ui/src/components/RadioGroup.svelte  |  3 ++-
 packages/ui/src/types.ts                      |  2 ++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index ec8a7c653d..9cdb8c9ea3 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -322,12 +322,27 @@
   &.gap-none { margin-bottom: 0; }
   &.gap-small { margin-bottom: .25rem; }
   &.gap-medium { margin-bottom: .5rem; }
+  &.gap-large { margin-bottom: 1rem; }
 
   label {
     flex: 1 1 auto;
-    padding-left: 0.375rem;
-    font-size: 0.8125rem;
     color: var(--theme-content-color);
+
+    &.medium {
+      font-size: 0.8125rem;
+    }
+
+    &.large {
+      font-size: 0.875rem;
+    }
+
+    &.gap-medium {
+      padding-left: 0.375rem;
+    }
+
+    &.gap-large {
+      padding-left: 0.5rem;
+    }
   }
 
   .marker {
diff --git a/packages/ui/src/components/RadioButton.svelte b/packages/ui/src/components/RadioButton.svelte
index 0d2e62b627..ff4c4e855c 100644
--- a/packages/ui/src/components/RadioButton.svelte
+++ b/packages/ui/src/components/RadioButton.svelte
@@ -23,10 +23,12 @@
   export let disabled: boolean = false
   export let labelOverflow: boolean = false
   export let label: string | undefined = undefined
+  export let labelSize: 'medium' | 'large' = 'medium'
   export let labelIntl: IntlString | undefined = undefined
   export let labelParams: Record<string, any> | undefined = undefined
   export let action: () => void = () => {}
-  export let gap: 'small' | 'medium' | 'none' = 'none'
+  export let gap: 'large' | 'small' | 'medium' | 'none' = 'none'
+  export let labelGap: 'large' | 'medium' = 'medium'
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -50,7 +52,7 @@
     }}
   />
   <div class="marker" />
-  <label for={id} class:overflow-label={labelOverflow}>
+  <label for={id} class="{labelSize} gap-{labelGap}" class:overflow-label={labelOverflow}>
     <slot>
       {#if labelIntl}
         <Label label={labelIntl} params={labelParams} />
diff --git a/packages/ui/src/components/RadioGroup.svelte b/packages/ui/src/components/RadioGroup.svelte
index 301bc8dad3..cf8e8e46f6 100644
--- a/packages/ui/src/components/RadioGroup.svelte
+++ b/packages/ui/src/components/RadioGroup.svelte
@@ -19,7 +19,7 @@
   export let items: RadioItem[]
   export let selected: any | undefined = undefined
   export let disabled: boolean = false
-  export let gap: 'small' | 'medium' | 'none' = 'small'
+  export let gap: 'large' | 'small' | 'medium' | 'none' = 'small'
 </script>
 
 {#if items && items.length > 0}
@@ -29,6 +29,7 @@
         bind:group={selected}
         id={item.id}
         label={item.label}
+        labelGap={item.labelGap}
         labelIntl={item.labelIntl}
         labelParams={item.labelParams}
         value={item.value}
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index cbce9f906f..4ed4070057 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -125,6 +125,8 @@ export interface TabItem {
 export interface RadioItem {
   id?: string
   label?: string
+  labelGap?: 'large' | 'medium'
+  labelSize?: 'medium' | 'large'
   labelIntl?: IntlString
   labelParams?: Record<string, any>
   value: any