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

@@ -293,7 +293,7 @@
       min-height: 0.75rem;
       height: 0.75rem;
     }
-  }  
+  }
 }
 .ac-column__list-item + .ac-column__list-item {
   margin-top: 0.75rem;
@@ -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;
+      }
     }
   }
 }
@@ -425,7 +464,7 @@
   &::-webkit-scrollbar-track { margin: 0.25rem; }
   &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); }
 
-  &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }  
+  &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }
   &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
   &.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
   &.mask-both {
@@ -475,7 +514,7 @@
       font-weight: 500;
       font-size: 0.8125rem;
       color: var(--theme-dark-color);
-      
+
       &.disabled { pointer-events: none; }
 
       &.selected {
@@ -598,7 +637,7 @@
       border: 1px dashed var(--theme-divider-color);
     }
   }
-  
+
 
   &.metaColumn {
     th, td {
@@ -693,7 +732,7 @@
   bottom: 0;
   height: 2.5rem;
   background-color: var(--theme-table-header-color);
-  
+
   tr {
     height: 2.5rem;
     box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
@@ -794,7 +833,7 @@
 
     &.circle { border-radius: 50%; }
     &.round-2 { border-radius: .5rem; }
-  
+
     & > .icon { color: var(--dark-color); }
     &.selected {
       background-color: var(--button-bg-color);
@@ -810,14 +849,14 @@
     border-color: var(--button-border-hover);
     & > .icon { color: var(--caption-color); }
   }
-  
+
   .label {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
 
-    min-width: 0;  
+    min-width: 0;
     font-size: .75rem;
     font-weight: 500;
     color: var(--accent-color);
@@ -845,9 +884,9 @@
   border-radius: .375rem;
   outline: none;
   z-index: 1;
-  
+
   .tools { opacity: 0; }
-  
+
   &.leftPadding { padding-left: 0.625rem; }
   &::before {
     position: absolute;
@@ -902,7 +941,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    min-width: 0;  
+    min-width: 0;
 
     &.selected { color: var(--caption-color); }
     &.not-selected { color: var(--dark-color); }
@@ -961,7 +1000,7 @@
       &:not(.shrink) { padding: 1rem 0; }
       // &.read {}
     }
-    
+
     .time { color: var(--theme-halfcontent-color); }
     .notify {
       position: absolute;
@@ -971,7 +1010,7 @@
       width: 0.5rem;
       background-color: var(--theme-inbox-notify);
       border-radius: 50%;
-      
+
       &.people {
         top: 1.5rem;
         background-color: var(--theme-inbox-people-notify);
@@ -1054,7 +1093,7 @@
 }
 .list-container .category-container .categoryHeader.closed:not(.subLevel) {
   border-radius: 0 0 0.25rem 0.25rem;
-  
+
   &::before,
   &::after {
     border-radius: 0.25rem;
@@ -1075,7 +1114,7 @@
     flex-grow: 1;
     border-radius: 1.625rem;
     transition: flex-shrink 0.25s cubic-bezier(0.38, 0.01, 0.33, 1) 0s;
-    
+
     &:hover {
       flex-shrink: .5;
       min-width: initial;

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>