Merge pull request #207 from nais/style_actionmenu

Add onselect callback to ActionMenuRadioItem and update styles on ActionMenuRadioItem and ActionMenuCheckboxItem

Author: rbjornstad

.changeset/selfish-avocados-roll.md

@@ -0,0 +1,5 @@
+---
+"@nais/ds-svelte-community": patch
+---
+
+Style changes to ActionMenuRadioItem and ActionMenuCheckboxItem. Add onselect callback to ActionMenuRadioItem.

.tool-versions

@@ -1 +1,2 @@
 bun 1.2.0
+nodejs 22.6.0

bun.lock

@@ -91,6 +91,10 @@
 </button>
 
 <style>
+	button {
+		border: none;
+		background-color: transparent;
+	}
 	@media (hover: hover) {
 		.navds-action-menu__item:focus {
 			outline: none;

packages/ds-svelte-community/src/lib/components/ActionMenu/ActionMenuCheckboxItem.svelte

@@ -11,9 +11,13 @@
 		 * Content of the radio item.
 		 */
 		children: Snippet;
+		/**
+		 * Callback when the item is selected.
+		 */
+		onselect?: (value: unknown) => void;
 	}
 
-	let { value, children }: Props = $props();
+	let { value, children, onselect }: Props = $props();
 
 	const ctx = getRadioGroupContext();
 
@@ -26,9 +30,11 @@
 	tabindex="0"
 	aria-checked={checked}
 	class="navds-action-menu__item navds-action-menu__item--has-icon"
+	style="border: none;"
 	data-state={state}
 	onclick={() => {
 		ctx.setValue(value);
+		onselect?.(value);
 	}}
 >
 	{@render children()}
@@ -87,6 +93,7 @@
 	button {
 		width: 100%;
 		box-sizing: border-box;
+		background-color: transparent;
 	}
 
 	@media (hover: hover) {

packages/ds-svelte-community/src/lib/components/ActionMenu/ActionMenuRadioItem.svelte

@@ -65,6 +65,9 @@
 	const handleCheckboxChange = (checkboxId: string, checked: boolean) => {
 		console.log(checkboxId, checked);
 	};
+	const handleRadioButtonChange = (value: unknown) => {
+		console.log(value);
+	};
 </script>
 
 <Doc
@@ -250,17 +253,27 @@
 					</ActionMenuCheckboxItem>
 					<ActionMenuCheckboxItem
 						bind:checked={views.tags}
-						onchange={(checked) => handleCheckboxChange("tags", checked)}
+						onchange={(checked) => {
+							handleCheckboxChange("tags", checked);
+						}}
 					>
 						Tags
 					</ActionMenuCheckboxItem>
 				</ActionMenuGroup>
 				<ActionMenuDivider />
 				<ActionMenuRadioGroup bind:value={rows} label="Rows per page">
-					<ActionMenuRadioItem value="5">5</ActionMenuRadioItem>
-					<ActionMenuRadioItem value="10">10</ActionMenuRadioItem>
-					<ActionMenuRadioItem value="25">25</ActionMenuRadioItem>
-					<ActionMenuRadioItem value="50">50</ActionMenuRadioItem>
+					<ActionMenuRadioItem value="5" onselect={(value) => handleRadioButtonChange(value)}
+						>5</ActionMenuRadioItem
+					>
+					<ActionMenuRadioItem value="10" onselect={(value) => handleRadioButtonChange(value)}
+						>10</ActionMenuRadioItem
+					>
+					<ActionMenuRadioItem value="25" onselect={(value) => handleRadioButtonChange(value)}
+						>25</ActionMenuRadioItem
+					>
+					<ActionMenuRadioItem value="50" onselect={(value) => handleRadioButtonChange(value)}
+						>50</ActionMenuRadioItem
+					>
 				</ActionMenuRadioGroup>
 			</ActionMenu>