EZQMS-333: Customizable RadioButton label (#3900)

* ezqms-333: update RadioButton structure

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

* ezqms-333: fix formatting

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

* ezqms-333: fix formatting

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

* ezqms-333: fix radio styles

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

---------

Signed-off-by: Alexey Zinoviev <alexey.zinoviev@xored.com>

packages/theme/styles/components.scss

@@ -302,7 +302,6 @@
 
 /* Radio Button */
 .antiRadio {
-  position: relative;
   display: inline-flex;
   align-items: center;
   height: min-content;
@@ -325,90 +324,130 @@
   &.gap-medium { margin-bottom: .5rem; }
 
   label {
-    padding-left: 1.375rem;
+    flex: 1 1 auto;
-    font-size: .8125rem;
+    padding-left: 0.375rem;
+    font-size: 0.8125rem;
     color: var(--theme-content-color);
+  }
+
+  .marker {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-divider-color);
+
+    &::before {
+      position: absolute;
+      border-radius: 50%;
+      top: calc(-0.1875rem - 1px);
+      left: calc(-0.1875rem - 1px);
+      width: 1.375rem;
+      height: 1.375rem;
+      border: 1px solid var(--primary-button-default);
+    }
 
     &::after {
       position: absolute;
-      top: .25rem;
+      top: calc(0.25rem - 1px);
-      left: .25rem;
+      left: calc(0.25rem - 1px);
-      width: .5rem;
+      width: 0.5rem;
-      height: .5rem;
+      height: 0.5rem;
       background-color: var(--primary-button-color);
       border-radius: 50%;
-      opacity: .8;
+      opacity: 0.8;
       z-index: 1;
     }
   }
 
-  &::before,
-  &::after {
-    position: absolute;
-    border-radius: 50%;
-  }
-  &::before {
-    top: -.1875rem;
-    left: -.1875rem;
-    width: 1.375rem;
-    height: 1.375rem;
-    border: 1px solid var(--primary-button-default);
-  }
-  &::after {
-    content: '';
-    top: 0rem;
-    left: 0rem;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--theme-button-default);
-    border: 1px solid var(--theme-divider-color);
-  }
   &:not(.disabled, .checked):hover {
-    &::after { background-color: var(--theme-button-hovered); }
+    .marker {
-    label { color: var(--theme-caption-color); }
+      background-color: var(--theme-button-hovered);
-  }
+    }
-  &.checked:not(.disabled):hover {
+
-    &::after { background-color: var(--primary-button-hovered); }
+    label {
+      color: var(--theme-caption-color);
+    }
+  }
+  &.checked:not(.disabled):hover {
+    .marker {
+      background-color: var(--primary-button-hovered);
+
+      &::after {
+        opacity: 1;
+      }
+    }
+
     label {
       color: var(--theme-caption-color);
-      &::after { opacity: 1; }
     }
   }
   &:focus-within:not(.disabled) {
-    &::before { content: ''; }
+    .marker {
-    label { color: var(--theme-caption-color); }
+      &::before {
+        content: '';
+      }
+    }
+
     &.checked {
-      label::after { opacity: 1; }
+      &:active {
-      &:active::after { background-color: var(--primary-button-pressed); }
+        .marker {
+          background-color: var(--primary-button-pressed);
+        } 
+      }
+
+      .marker::after {
+        opacity: 1;
+      }
+    }
+    
+    label {
+      color: var(--theme-caption-color);
     }
   }
   &.checked:not(.disabled) {
-    &::after { background-color: var(--primary-button-default); }
+    .marker {
-    label::after { content: ''; }
+      background-color: var(--primary-button-default);
+
+      &::after {
+        content: '';
+      }
+    }
   }
   &.disabled {
     cursor: not-allowed;
 
-    &::after {
+    .marker {
       background-color: var(--primary-button-disabled);
       border-color: transparent;
     }
+
+    &.checked {
+      marker::after {
+        content: '';
+        opacity: 0.4;
+      }
+    }
+
     label {
       color: var(--theme-darker-color);
       cursor: not-allowed;
     }
-    &.checked label::after {
-      content: '';
-      opacity: .4;
-    }
   }
   &:not(.disabled),
-  &:not(.disabled) label { cursor: pointer; }
+  &:not(.disabled) label {
+    cursor: pointer;
+  }
   &:not(.disabled):active {
-    &::after { background-color: var(--primary-button-pressed); }
+    .marker {
-    label::after {
+      background-color: var(--primary-button-pressed);
-      content: '';
+
-      opacity: 1;
+      &::after {
+        content: '';
+        opacity: 1;
+      }
     }
   }
 }

packages/ui/src/components/RadioButton.svelte

@@ -49,12 +49,14 @@
       if (!disabled && group !== value) action()
     }}
   />
+  <div class="marker" />
   <label for={id} class:overflow-label={labelOverflow}>
-    <slot />
+    <slot>
-    {#if labelIntl}
+      {#if labelIntl}
-      <Label label={labelIntl} params={labelParams} />
+        <Label label={labelIntl} params={labelParams} />
-    {:else}
+      {:else}
-      {label}
+        {label}
-    {/if}
+      {/if}
+    </slot>
   </label>
 </div>