fix(#4011): checkbox Moved padding values from js to custom css varia…

…bles (#4013) Co-authored-by: Maksim Nedoshev <[email protected]>
epicmaxco · Nov 20, 2023 · 505996c · 505996c
1 parent 40cb0b8
commit 505996c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/packages/ui/src/components/va-checkbox/VaCheckbox.vue b/packages/ui/src/components/va-checkbox/VaCheckbox.vue
@@ -124,18 +124,25 @@ export default defineComponent({
       'va-checkbox--on-keyboard-focus': hasKeyboardFocus.value,
     }))
 
+    const getPaddingStyle = () => {
+      switch (true) {
+        case !props.label:
+          return ''
+        case props.vertical:
+          return 'var(--va-checkbox-vertical-padding)'
+        case Boolean(props.arrayValue):
+          return 'var(--va-checkbox-horizontal-padding)'
+        case props.leftLabel:
+          return 'var(--va-checkbox-right-padding)'
+        default:
+          return 'var(--va-checkbox-left-padding)'
+      }
+    }
+
     const labelStyle = computed(() => {
       return {
         color: computedError.value ? getColor('danger') : (props.success ? getColor('success') : ''),
-        padding: !props.label
-          ? ''
-          : props.vertical
-            ? '0.3rem 0 0.3rem 0.5rem'
-            : props.arrayValue
-              ? '0 0.5rem 0 0.5rem'
-              : props.leftLabel
-                ? '0 0.5rem 0 0'
-                : '0 0 0 0.5rem',
+        padding: getPaddingStyle(),
       }
     })
 

diff --git a/packages/ui/src/components/va-checkbox/_variables.scss b/packages/ui/src/components/va-checkbox/_variables.scss
@@ -17,4 +17,12 @@
   --va-checkbox-square-height: 1.25rem;
   --va-checkbox-square-border: solid var(--va-form-element-border-width) var(--va-background-border);
   --va-checkbox-square-border-radius: calc(var(--va-form-element-border-radius) / 2);
+
+  /* Padding */
+  --va-checkbox-horizontal-gap: 0.5em;
+  --va-checkbox-vertical-gap: 0.3em;
+  --va-checkbox-vertical-padding: var(--va-checkbox-vertical-gap) 0 var(--va-checkbox-vertical-gap) var(--va-checkbox-horizontal-gap);
+  --va-checkbox-horizontal-padding: 0 var(--va-checkbox-horizontal-gap);
+  --va-checkbox-right-padding: 0 var(--va-checkbox-horizontal-gap) 0 0;
+  --va-checkbox-left-padding: 0 0 0 var(--va-checkbox-horizontal-gap);
 }