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

@@ -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 {

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} />

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}

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