Menu: fix typo slot => slotProps

This will have caused class as a function to not work correctly for Menu
This commit is contained in:
Ryan Gossiaux
2021-12-30 18:37:33 -10:00
parent 48f50d65d9
commit b5b6854d2d
2 changed files with 14 additions and 6 deletions

View File

@@ -58,6 +58,7 @@
export let use: HTMLActionArray = [];
export let as: SupportedAs = "div";
const forwardEvents = forwardEventsBuilder(get_current_component());
let menuState: StateDefinition["menuState"] = MenuStates.Closed;
let buttonStore: StateDefinition["buttonStore"] = writable(null);
let itemsStore: StateDefinition["itemsStore"] = writable(null);
@@ -163,7 +164,7 @@
[MenuStates.Closed]: State.Closed,
});
$: slot = { open: menuState === MenuStates.Open };
$: slotProps = { open: menuState === MenuStates.Open };
</script>
<svelte:window on:mousedown={handleWindowMousedown} />
@@ -171,8 +172,8 @@
{...$$restProps}
use={[...use, forwardEvents]}
{as}
{slot}
{slotProps}
name={"Menu"}
>
<slot {...slot} />
<slot {...slotProps} />
</Render>

View File

@@ -337,9 +337,9 @@ describe('Rendering composition', () => {
render(
TestRenderer, {
allProps: [
[Menu, {}, [
[MenuButton, {}, "Trigger"],
[MenuItems, {}, [
[Menu, { class: (bag: any) => JSON.stringify(bag), id: "menu" }, [
[MenuButton, { class: (bag: any) => JSON.stringify(bag) }, "Trigger"],
[MenuItems, { class: (bag: any) => JSON.stringify(bag) }, [
[MenuItem, { as: "a", class: (bag: any) => JSON.stringify(bag) }, "Item A"],
[MenuItem, { as: "a", disabled: true, class: (bag: any) => JSON.stringify(bag) }, "Item B"],
[MenuItem, { as: "a", class: "no-special-treatment" }, "Item C"],
@@ -354,12 +354,19 @@ describe('Rendering composition', () => {
})
assertMenu({ state: MenuState.InvisibleUnmounted })
// Verify correct classNames
expect("" + document.querySelector('[id="menu"]')?.classList).toEqual(JSON.stringify({ open: false }))
expect("" + getMenuButton()?.classList).toEqual(JSON.stringify({ open: false }))
// Open menu
await click(getMenuButton())
let items = getMenuItems()
// Verify correct classNames
expect("" + document.querySelector('[id="menu"]')?.classList).toEqual(JSON.stringify({ open: true }))
expect("" + getMenu()?.classList).toEqual(JSON.stringify({ open: true }))
expect("" + getMenuButton()?.classList).toEqual(JSON.stringify({ open: true }))
expect('' + items[0].classList).toEqual(JSON.stringify({ active: false, disabled: false }))
expect('' + items[1].classList).toEqual(JSON.stringify({ active: false, disabled: true }))
expect('' + items[2].classList).toEqual('no-special-treatment')