Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from Aug 24, 2022
Merged

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

merged 2 commits into from Aug 24, 2022

Conversation

ashleyryan
Copy link
Contributor

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:

  • 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?

  • 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
  • No

Other information

@github-actions
Copy link

github-actions bot commented Aug 23, 2022 •
edited

👋 @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

bbogdanov
bbogdanov approved these changes Aug 23, 2022
View reviewed changes
Copy link
Contributor

@bbogdanov bbogdanov left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Worth checking if cds-navigation-group could reuse
https://github.com/vmware-clarity/core/blob/main/projects/core/src/internal/controllers/key-navigation-list.controller.ts

@ashleyryan
Copy link
Contributor Author

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 ashleyryan self-assigned this Aug 23, 2022
@ashleyryan ashleyryan force-pushed the asryan/navigation-item-async branch 2 times, most recently from 7b81dbe to a316a59 Compare August 24, 2022 16:38
kevinbuhmann
kevinbuhmann approved these changes Aug 24, 2022
View reviewed changes
Copy link
Member

@kevinbuhmann kevinbuhmann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the chore commit message should be reworded for correctness, but this otherwise seems okay to me. I don't know web components well, but I don't see anything bad.

Ashley Ryan added 2 commits August 24, 2022 13:39
chore(navigation): reorder lifecycle events for readability
87871de
fix(navigation): sync state with newly added nav items
fcbd0cd 
fixes  vmware-clarity#155 vmware-clarity#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
- update unit tests to check syncing after component updates
@ashleyryan
Copy link
Contributor Author

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)

@ashleyryan ashleyryan merged commit 6c48eff into vmware-clarity:main Aug 24, 2022
@ashleyryan ashleyryan deleted the asryan/navigation-item-async branch August 24, 2022 18:24
@github-actions
Copy link

🎉 This PR is included in version 6.1.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@github-actions
Copy link

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.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@kevinbuhmann kevinbuhmann kevinbuhmann approved these changes

@bbogdanov bbogdanov bbogdanov approved these changes

Assignees

@ashleyryan ashleyryan

Labels
cla-not-required released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

cds-navigation: nav items added after initial render are visually hidden
4 participants
@ashleyryan @kevinbuhmann @bbogdanov @vmwclabot