APP-6324: Make ToggleButtons purely presentational (#585)

viamrobotics · Oct 7, 2024 · 247338a · 247338a
1 parent 6b1c55d
commit 247338a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.157",
+  "version": "0.0.158",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

diff --git a/packages/core/src/lib/__tests__/toggle-button.spec.ts b/packages/core/src/lib/__tests__/toggle-button.spec.ts
@@ -44,8 +44,8 @@ describe('ToggleButtons', () => {
 
     await userEvent.click(button);
 
-    expect(onInput).toHaveBeenCalled();
-    expect(button).toHaveAttribute('aria-pressed', 'true');
+    expect(onInput).toHaveBeenCalledOnce();
+    expect(onInput).toHaveBeenCalledWith(new CustomEvent('input'));
   });
 
   it('Prevents option input if disabled', async () => {

diff --git a/packages/core/src/lib/toggle-buttons.svelte b/packages/core/src/lib/toggle-buttons.svelte
@@ -51,7 +51,6 @@ $: getButtonClasses = (option: string) => {
 };
 
 const handleClick = (value: string) => {
-  selected = value;
   dispatch('input', value);
 };
 </script>

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -451,6 +451,12 @@ const htmlSnippet = `
   <li>Ummm…to eBay?</li>
 </ul>`.trim();
 
+const toggleButtonSelecteds = [undefined, 'Opt 1', 'Opt 1', 'Opt 1'];
+const createHandleToggleButtons =
+  (index: number) => (event: CustomEvent<string>) => {
+    toggleButtonSelecteds[index] = event.detail;
+  };
+
 let hoverDelayMS = 1000;
 const onHoverDelayMsInput = (event: Event) => {
   hoverDelayMS = Number.parseInt((event.target as HTMLInputElement).value, 10);
@@ -1825,31 +1831,32 @@ const onHoverDelayMsInput = (event: Event) => {
   <div class="flex items-end gap-4">
     <ToggleButtons
       options={['Opt 1', 'Opt 2', 'Opt 3']}
-      on:input={(event) => {
-        // eslint-disable-next-line no-console
-        console.log('ToggleButtons input', event);
-      }}
+      selected={toggleButtonSelecteds[0]}
+      on:input={createHandleToggleButtons(0)}
     />
 
     <ToggleButtons
       options={['Opt 1', 'Opt 2']}
-      selected="Opt 1"
+      selected={toggleButtonSelecteds[1]}
+      on:input={createHandleToggleButtons(1)}
     >
       <svelte:fragment slot="legend">Preselected toggle</svelte:fragment>
     </ToggleButtons>
 
     <ToggleButtons
       options={['Opt 1', 'Opt 2', 'Opt 3']}
-      selected="Opt 1"
       disabled
+      selected={toggleButtonSelecteds[2]}
+      on:input={createHandleToggleButtons(2)}
     >
       <svelte:fragment slot="legend">Disabled toggle</svelte:fragment>
     </ToggleButtons>
 
     <ToggleButtons
       options={['Opt 1', 'Opt 2', 'Opt 3']}
-      selected="Opt 1"
       cx="w-full"
+      selected={toggleButtonSelecteds[3]}
+      on:input={createHandleToggleButtons(3)}
     >
       <svelte:fragment slot="legend">Full width</svelte:fragment>
     </ToggleButtons>

diff --git a/packages/storybook/src/stories/toggle-buttons.stories.svelte b/packages/storybook/src/stories/toggle-buttons.stories.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 import { Meta, Story } from '@storybook/addon-svelte-csf';
 import { Label, ToggleButtons } from '@viamrobotics/prime-core';
+
+let basicSelected = 'Fan lizard';
+const onBasicSelected = (event: CustomEvent<string>) => {
+  basicSelected = event.detail;
+};
 </script>
 
 <Meta title="Elements/ToggleButtons" />
@@ -14,7 +19,8 @@ import { Label, ToggleButtons } from '@viamrobotics/prime-core';
     >
       <ToggleButtons
         options={['Fan lizard', 'Mountain banshee', 'Buzzard wasp']}
-        selected="Fan lizard"
+        selected={basicSelected}
+        on:input={onBasicSelected}
       />
     </div>
   </Label>