App 6746 prime core toggle buttons (viamrobotics#591)

micheal-parks · Oct 31, 2024 · 47c3ef6 · 47c3ef6
1 parent a49b2bb
commit 47c3ef6
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/packages/blocks/src/lib/navigation-map/components/input/geometry.svelte b/packages/blocks/src/lib/navigation-map/components/input/geometry.svelte
@@ -93,7 +93,7 @@ const shapeMap = {
     selected={shapeMap[geometry.type]}
     on:input={handleShapeSelect}
   >
-    <svelte:fragment slot="legend">Shape</svelte:fragment>
+    <svelte:fragment slot="label">Shape</svelte:fragment>
   </ToggleButtons>
 
   {#if geometry.type === 'box'}

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.162",
+  "version": "0.0.163",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

diff --git a/packages/core/src/lib/__tests__/toggle-buttons.spec.svelte b/packages/core/src/lib/__tests__/toggle-buttons.spec.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-import ToggleButtons from '$lib/toggle-buttons.svelte';
+import ToggleButton from '$lib/toggle-button.svelte';
 
 export let options: string[];
 export let selected: string | undefined = undefined;
 export let disabled = false;
 </script>
 
-<ToggleButtons
+<ToggleButton
   {options}
   {selected}
   {disabled}
   on:input
 >
-  <svelte:fragment slot="legend">Test toggle buttons</svelte:fragment>
-</ToggleButtons>
+  <svelte:fragment slot="label">Test toggle buttons</svelte:fragment>
+</ToggleButton>
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -66,7 +66,7 @@ export { default as TableRow } from './table/table-row.svelte';
 export { default as TableCell } from './table/table-cell.svelte';
 export { default as TabsBar } from './tabs-bar.svelte';
 export { default as Tab } from './tab.svelte';
-export { default as ToggleButtons } from './toggle-buttons.svelte';
+export { default as ToggleButtons } from './toggle-button.svelte';
 
 export {
   Tooltip,

diff --git a/packages/core/src/lib/toggle-buttons.svelte → packages/core/src/lib/toggle-button.svelte b/packages/core/src/lib/toggle-buttons.svelte → packages/core/src/lib/toggle-button.svelte
@@ -55,32 +55,32 @@ const handleClick = (value: string) => {
 };
 </script>
 
-<fieldset
+<div
   aria-disabled={disabled ? true : undefined}
   class={cx('flex', extraClasses)}
   {...$$restProps}
 >
-  {#if $$slots.legend}
-    <legend
+  {#if $$slots.label}
+    <label
       class={cx(
         cx('mb-1 flex text-xs', {
           'text-subtle-1': !disabled,
           'cursor-not-allowed text-disabled-dark': disabled,
         })
       )}
     >
-      <slot name="legend" />
-    </legend>
+      <slot name="label" />
+    </label>
   {/if}
 
-  <div class="flex w-full flex-nowrap">
+  <div class="flex w-fit flex-nowrap">
     {#each options as option}
       <button
         type="button"
         aria-pressed={isSelected(option)}
         aria-disabled={disabled ? true : undefined}
         class={cx(
-          'h-7.5 w-full whitespace-nowrap border px-3 py-1.5 text-xs',
+          'h-7.5 whitespace-nowrap border px-3 py-1.5 text-xs',
           getButtonClasses(option)
         )}
         on:click={() => handleClick(option)}
@@ -90,4 +90,4 @@ const handleClick = (value: string) => {
       </button>
     {/each}
   </div>
-</fieldset>
+</div>
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1840,7 +1840,7 @@ const onHoverDelayMsInput = (event: Event) => {
       selected={toggleButtonSelecteds[1]}
       on:input={createHandleToggleButtons(1)}
     >
-      <svelte:fragment slot="legend">Preselected toggle</svelte:fragment>
+      <svelte:fragment slot="label">Preselected toggle</svelte:fragment>
     </ToggleButtons>
 
     <ToggleButtons
@@ -1849,7 +1849,7 @@ const onHoverDelayMsInput = (event: Event) => {
       selected={toggleButtonSelecteds[2]}
       on:input={createHandleToggleButtons(2)}
     >
-      <svelte:fragment slot="legend">Disabled toggle</svelte:fragment>
+      <svelte:fragment slot="label">Disabled toggle</svelte:fragment>
     </ToggleButtons>
 
     <ToggleButtons
@@ -1858,7 +1858,7 @@ const onHoverDelayMsInput = (event: Event) => {
       selected={toggleButtonSelecteds[3]}
       on:input={createHandleToggleButtons(3)}
     >
-      <svelte:fragment slot="legend">Full width</svelte:fragment>
+      <svelte:fragment slot="label">Full width</svelte:fragment>
     </ToggleButtons>
   </div>