diff --git a/.changeset/cuddly-moons-rule.md b/.changeset/cuddly-moons-rule.md new file mode 100644 index 0000000000..321153fb02 --- /dev/null +++ b/.changeset/cuddly-moons-rule.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-svelte": minor +--- + +Added linkClass css property to MenuItem diff --git a/README.md b/README.md index fd34690e09..956ed2d64a 100755 --- a/README.md +++ b/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). diff --git a/packages/stacks-svelte/src/components/Menu/Menu.test.ts b/packages/stacks-svelte/src/components/Menu/Menu.test.ts index d8c12d54db..3f1bf336b3 100644 --- a/packages/stacks-svelte/src/components/Menu/Menu.test.ts +++ b/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([ diff --git a/packages/stacks-svelte/src/components/Menu/MenuItem.svelte b/packages/stacks-svelte/src/components/Menu/MenuItem.svelte index 39bfc0856b..e10b10fe4a 100644 --- a/packages/stacks-svelte/src/components/Menu/MenuItem.svelte +++ b/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));