EZQMS-529: Added support for primary/positive/negative kinds for CheckBox and RadioButton (#4384)

Signed-off-by: Petr Vyazovetskiy <develop.pit@gmail.com>

packages/theme/styles/components.scss

@@ -69,7 +69,7 @@
   &__navHeader {
     flex-direction: column;
     flex-shrink: 0;
-    
+
     &.divide {
       border-bottom: 1px solid var(--theme-navpanel-divider);
     }
@@ -171,11 +171,11 @@
 .hulyModal-container {
   height: 100%;
   border-top: 1px solid transparent;
-  
+
   .hulyModal-content {
     padding: var(--spacing-2) var(--spacing-1_5);
     height: 100%;
-    
+
     &__titleGroup {
       flex-shrink: 0;
       padding: var(--spacing-2) var(--spacing-0_5) 0;
@@ -186,7 +186,7 @@
     }
     &__settingsSet {
       flex-shrink: 0;
-      
+
       &:not(.table) {
         padding: var(--spacing-4) var(--spacing-2_5) 0;
       }
@@ -203,7 +203,7 @@
         min-width: 0;
         min-height: var(--global-max-Size);
         border-bottom: 1px solid var(--global-subtle-ui-BorderColor);
-        
+
         &:first-child {
           border-top: 1px solid var(--global-subtle-ui-BorderColor);
         }
@@ -672,14 +672,14 @@
       &:active {
         .marker {
           background-color: var(--primary-button-pressed);
-        } 
+        }
       }
 
       .marker::after {
         opacity: 1;
       }
     }
-    
+
     label {
       color: var(--theme-caption-color);
     }
@@ -726,6 +726,15 @@
       }
     }
   }
+  &.kind-primary .marker {
+    border-color: var(--primary-button-default);
+  }
+  &.kind-positive .marker {
+    border-color: var(--positive-button-default);
+  }
+  &.kind-negative .marker {
+    border-color: var(--negative-button-default);
+  }
 }
 
 /* StatesBar */

packages/ui/src/components/CheckBox.svelte

@@ -19,14 +19,14 @@
   export let symbol: 'check' | 'minus' = 'check'
   export let size: 'small' | 'medium' | 'large' = 'small'
   export let circle: boolean = false
-  export let kind: 'default' | 'primary' | 'positive' = 'default'
+  export let kind: 'default' | 'primary' | 'positive' | 'negative' = 'default'
   export let readonly = false
 
   const dispatch = createEventDispatcher()
 
   let oldChecked = checked
 
-  const handleValueChanged = (event: Event) => {
+  const handleValueChanged = (event: Event): void => {
     if (readonly) {
       return
     }
@@ -47,6 +47,7 @@
   class:circle
   class:primary={kind === 'primary'}
   class:positive={kind === 'positive'}
+  class:negative={kind === 'negative'}
   class:readonly
   class:checked
   on:click|stopPropagation
@@ -59,6 +60,7 @@
           class="check"
           class:primary={kind === 'primary'}
           class:positive={kind === 'positive'}
+          class:negative={kind === 'negative'}
           x="4"
           y="7.4"
           width="8"
@@ -69,6 +71,7 @@
           class="check"
           class:primary={kind === 'primary'}
           class:positive={kind === 'positive'}
+          class:negative={kind === 'negative'}
           points="7.3,11.5 4,8.3 5,7.4 7.3,9.7 11.8,5.1 12.7,6.1 "
         />
       {/if}
@@ -103,20 +106,32 @@
       height: 1rem;
       border-radius: 50%;
     }
-    &.checked {
-      background-color: var(--theme-checkbox-bg-color);
+    & {
+      &.checked {
+        background-color: var(--theme-checkbox-bg-color);
+      }
     }
-    &.primary.checked {
-      background-color: var(--primary-button-default);
-      border-color: transparent;
-    }
-    &.positive.checked {
-      background-color: var(--positive-button-default);
-      border-color: transparent;
-    }
-    &.readonly.checked {
+    &.readonly {
       background-color: var(--theme-checkbox-disabled);
     }
+    &.primary {
+      border-color: var(--primary-button-default);
+      &:not(.readonly).checked {
+        background-color: var(--primary-button-default);
+      }
+    }
+    &.positive {
+      border-color: var(--positive-button-default);
+      &:not(.readonly).checked {
+        background-color: var(--positive-button-default);
+      }
+    }
+    &.negative {
+      border-color: var(--negative-button-default);
+      &:not(.readonly).checked {
+        background-color: var(--negative-button-default);
+      }
+    }
 
     .chBox {
       position: absolute;
@@ -132,10 +147,10 @@
         & .check {
           visibility: visible;
           fill: var(--theme-checkbox-color);
-          &.primary {
-            fill: var(--primary-button-color);
-          }
-          &.positive {
+
+          &.primary,
+          &.positive,
+          &.negative {
             fill: var(--primary-button-color);
           }
         }
@@ -144,7 +159,7 @@
         cursor: pointer;
       }
       &:disabled + .checkSVG .check {
-        fill: var(--theme-checkbox-disabled);
+        fill: var(--primary-button-color);
       }
     }
     .checkSVG {

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 kind: 'primary' | 'positive' | 'negative' | 'default' = 'default'
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -37,6 +38,9 @@
   class="antiRadio gap-{gap}"
   class:disabled
   class:checked={group === value}
+  class:kind-primary={kind === 'primary'}
+  class:kind-positive={kind === 'positive'}
+  class:kind-negative={kind === 'negative'}
   tabindex="-1"
   on:click={() => {
     if (!disabled && group !== value) action()