Add linkClass property to MenuItem component

.changeset/cuddly-moons-rule.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": minor
+---
+
+Added linkClass css property to MenuItem

README.md

@@ -179,7 +179,7 @@ This repo uses [Semantic Versioning](https://semver.org/) to distribute Stacks C
 
 We use [changesets](https://github.com/changesets/changesets) to automatize the steps necessary to publish to NPM, create GH releases and a changelog.
 
-- Every time you do work that requires a new release to be published, [add a changesets entry](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) by running `npx chageset` and follow the instructions on screen. (changes that do not require a new release - e.g. changing a test file - don’t need a changeset).
+- Every time you do work that requires a new release to be published, [add a changesets entry](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) by running `npx changeset` and follow the instructions on screen. (changes that do not require a new release - e.g. changing a test file - don’t need a changeset).
     - When opening a PR without a corresponding changeset the [changesets-bot](https://github.com/apps/changeset-bot) will remind you to do so. It generally makes sense to have one changeset for PR (if the PR changes do not require a new release to be published the bot message can be safely ignored)
 - The [release github workflow](.github/workflows/release.yml) continuosly check if there are new pending changesets in the main branch, if there are it creates a GH PR (`chore(release)` [see example](https://github.com/StackExchange/apca-check/pull/2)) and continue updating it as more changesets are potentially pushed/merged to the main branch.
 - When we are ready to cut a release we need to simply merge the `chore(release)` PR back to main and the release github workflow will take care of publishing the changes to NPM and create a GH release for us. The `chore(release)` PR also give us an opportunity to adjust the automatically generated changelog when necessary (the entry in the changelog file is also what will end up in the GH release notes).

packages/stacks-svelte/src/components/Menu/Menu.test.ts

@@ -125,6 +125,21 @@ describe("Menu", () => {
         expect(link).to.have.class("s-menu--action__danger");
     });
 
+    it("should render with arbitrary link classes", () => {
+        const menuItems = createSvelteComponentsSnippet([
+            createMenuItem({
+                href: "#",
+                linkClass: "custom-link-class",
+                children: children("Delete"),
+            }),
+        ]);
+
+        render(Menu, { children: menuItems });
+
+        const link = screen.getByRole("menuitem").querySelector("a");
+        expect(link).to.have.class("custom-link-class");
+    });
+
     // Menu Check Item
     it("should render menu check item with required props", () => {
         const menuCheckItems = createSvelteComponentsSnippet([

packages/stacks-svelte/src/components/Menu/MenuItem.svelte

@@ -39,6 +39,11 @@
          */
         class?: string;
 
+        /**
+         * Additional CSS classes added to the link element
+         */
+        linkClass?: string;
+
         /**
          * Snippet for the menu item content
          */
@@ -51,6 +56,7 @@
         icon,
         selected = false,
         class: className = "",
+        linkClass = "",
         onclick,
         children,
         ...restProps
@@ -84,7 +90,7 @@
     };
 
     const itemClasses = $derived(getItemClasses(className));
-    const linkClasses = $derived(getLinkClasses("", danger, selected));
+    const linkClasses = $derived(getLinkClasses(linkClass, danger, selected));
 </script>
 
 <li class={itemClasses} role="menuitem">