fix(navigation): sync state with newly added nav items

[ashleyryan]

fixes #155 #82

• previously only nav items in the initial render were synced with the top level expanded state
• add onslotchange to check for that
• move tabindex logic to slot change handler as well
• reorder component functions to match best practices
• update unit tests to check syncing after component updates

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)
• [ ] If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• [x] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] clarity.design website / infrastructure changes
• [ ] Other... Please describe:

What is the current behavior?

Previously, expanded state was only shared with nav items on the initial render, or when the parent navigation component had updates. Asynchronously added nav items were treated as collapses, instead of having their parent state synced

Issue Number: #155 #82

What is the new behavior?

the slotchange event was added to the slot to detect when new items are added

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

[github-actions[bot]]

👋 @ashleyryan,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, checkout out a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

[ashleyryan]

If you find time some parts of the code of the navigation could be moved to controllers.

Yeah I had the same thought when I was looking at the code. Might be a good exercise to get some more lit experience.

[ashleyryan]

Commit message fixed. The slotChange event notifies you if content has been added/removed from the slot. So instead of only syncing the props, and setting tabIndex on firstUpdate or when the component updates, it will do it everytime a new nav item is added (or removed, which is unnecessary, but not really a problem)

[github-actions[bot]]

:tada: This PR is included in version 6.1.2 :tada:

The release is available on:

• GitHub release
• v6.1.2

Your semantic-release bot :package::rocket:

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.