Fix#4294/input required mark and switch left label (#4295)

* fix(switch): alignment with left positioned label * fix(input-label): required mark size
epicmaxco · Jun 3, 2024 · 5f6bda5 · 5f6bda5
1 parent 69a3202
commit 5f6bda5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/ui/src/components/va-input-wrapper/components/VaInputLabel.vue b/packages/ui/src/components/va-input-wrapper/components/VaInputLabel.vue
@@ -49,7 +49,7 @@ const { getColor } = useColors()
   &__required-mark {
     transform: translate(0, -2px);
     color: var(--va-danger);
-    font-size: 18px;
+    font-size: 1.2em;
     font-weight: var(--va-input-container-label-font-weight);
     vertical-align: middle;
   }

diff --git a/packages/ui/src/components/va-switch/VaSwitch.demo.vue b/packages/ui/src/components/va-switch/VaSwitch.demo.vue
@@ -73,12 +73,20 @@
         label="large"
       />
     </VbCard>
-    <VbCard title="Left label">
-      <va-switch
-        v-model="value"
-        label="left"
-        left-label
-      />
+    <VbCard title="Label Position" style="width: 300px;">
+      <div>
+        <va-switch
+          v-model="value"
+          label="right"
+        />
+      </div>
+      <div>
+        <va-switch
+          v-model="value"
+          label="left"
+          left-label
+        />
+      </div>
     </VbCard>
     <VbCard title="Custom labels">
       <div>

diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue
@@ -326,6 +326,7 @@ defineExpose({
   &--left-label {
     .va-switch__container {
       flex-direction: row-reverse;
+      justify-content: start;
     }
 
     .va-switch__label {