From 5677222258ea4f813b7dd1188d3a67d34c5b79ac Mon Sep 17 00:00:00 2001
From: Woramat Ngamkham <woramat.ng@gmail.com>
Date: Sat, 29 Oct 2022 03:14:50 +0700
Subject: [PATCH] fix(form): asterisks on Label.astro (#160)

---
 packages/form/components/Label.astro | 41 +++++++++++++++-------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/form/components/Label.astro b/packages/form/components/Label.astro
index be6f703..1616e27 100644
--- a/packages/form/components/Label.astro
+++ b/packages/form/components/Label.astro
@@ -14,23 +14,26 @@ const { validators = [] } = control;
 const isRequired: boolean = showValidationHints && validators.includes('validator-required');
 ---
 
-	{
-		control.label && control.labelPosition === 'left' && (
-			<label for={control.name}>
-				{isRequired && <span>*</span>}
-				{control.label}
-			</label>
-		)
+{
+	control.label && control.labelPosition === 'left' && (
+		<label for={control.name} data-validation-required={isRequired ? "true" : null}>
+			{control.label}
+		</label>
+	)
+}
+
+<slot />
+
+{
+	control.label && control.labelPosition === 'right' && (
+		<label for={control.name} data-validation-required={isRequired ? "true" : null}>
+			{control.label}
+		</label>
+	)
+}
+
+<style>
+	label[data-validation-required="true"]::before {
+		content: "*";
 	}
-
-	<slot />
-
-	{
-		control.label && control.labelPosition === 'right' && (
-			<label for={control.name}>
-				{isRequired && <span>*</span>}
-				{control.label}
-			</label>
-		)
-	}
-
+</style>