diff --git a/packages/core/package.json b/packages/core/package.json index 86260dd4..2574a9da 100644 --- 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 index 4a315854..a8e94610 100644 --- 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 index 0ae49c64..bd01ed99 100644 --- 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); }; diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte index a7d55ab8..4c7dbdcf 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -451,6 +451,12 @@ const htmlSnippet = `
  • Ummm…to eBay?
  • `.trim(); +const toggleButtonSelecteds = [undefined, 'Opt 1', 'Opt 1', 'Opt 1']; +const createHandleToggleButtons = + (index: number) => (event: CustomEvent) => { + 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) => {
    { - // eslint-disable-next-line no-console - console.log('ToggleButtons input', event); - }} + selected={toggleButtonSelecteds[0]} + on:input={createHandleToggleButtons(0)} /> Preselected toggle Disabled toggle Full width diff --git a/packages/storybook/src/stories/toggle-buttons.stories.svelte b/packages/storybook/src/stories/toggle-buttons.stories.svelte index 96dc5a65..1f021582 100644 --- a/packages/storybook/src/stories/toggle-buttons.stories.svelte +++ b/packages/storybook/src/stories/toggle-buttons.stories.svelte @@ -1,6 +1,11 @@ @@ -14,7 +19,8 @@ import { Label, ToggleButtons } from '@viamrobotics/prime-core'; >