add optional for attribute to Label component (viamrobotics#522)

micheal-parks · May 31, 2024 · 3c3f2fc · 3c3f2fc
1 parent 08addf6
commit 3c3f2fc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.119",
+  "version": "0.0.120",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/label.svelte b/packages/core/src/lib/label.svelte
@@ -31,6 +31,10 @@ export let required = false;
 /** Whether or not the label should render as disabled */
 export let disabled = false;
 
+/** The input the label describes */
+let htmlFor: string | undefined = undefined;
+export { htmlFor as for };
+
 /** Additional detail text to render after the default slot. */
 export let detail = '';
 
@@ -48,6 +52,7 @@ export { extraClasses as cx };
     },
     extraClasses
   )}
+  for={htmlFor}
 >
   <span
     class={cx('flex text-xs', {

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1064,6 +1064,20 @@ const onHoverDelayMsInput = (event: Event) => {
         name="name"
       />
     </Label>
+
+    <div>
+      <Label
+        for="targetID"
+        cx="whitespace-nowrap"
+      >
+        For attribute example
+      </Label>
+      <Input
+        cx="max-w-[70px]"
+        id="targetID"
+        name="name"
+      />
+    </div>
   </div>
 
   <!-- Notify -->