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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87871de
chore(navigation): reorder lifecycle events for readability
Aug 24, 2022
fcbd0cd
fix(navigation): sync state with newly added nav items
Aug 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 20 additions & 16 deletions projects/core/custom-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49998,17 +49998,6 @@
"privacy": "protected",
"description": "query for all groups (including any nested groups), used ot pass state down"
},
{
"kind": "method",
"name": "toggle",
"privacy": "private"
},
{
"kind": "field",
"name": "currentActiveItem",
"privacy": "private",
"readonly": true
},
{
"kind": "field",
"name": "endTemplate",
Expand All @@ -50021,6 +50010,18 @@
"privacy": "protected",
"readonly": true
},
{
"kind": "method",
"name": "onStartItemSlotChange"
},
{
"kind": "method",
"name": "onItemSlotChange"
},
{
"kind": "method",
"name": "updateChildrenProps"
},
{
"kind": "field",
"name": "visibleChildren",
Expand All @@ -50032,7 +50033,14 @@
},
{
"kind": "method",
"name": "addStartEventListener"
"name": "toggle",
"privacy": "private"
},
{
"kind": "field",
"name": "currentActiveItem",
"privacy": "private",
"readonly": true
},
{
"kind": "method",
Expand Down Expand Up @@ -50085,10 +50093,6 @@
}
}
]
},
{
"kind": "method",
"name": "updateChildrenProps"
}
],
"events": [
Expand Down
38 changes: 38 additions & 0 deletions projects/core/src/navigation/navigation.element.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,12 @@ describe('cds-navigation', () => {
itemRefs.forEach(item => {
expect(item.expanded).toBe(component.expanded);
});

component.expanded = true;
await componentIsStable(component);
itemRefs.forEach(item => {
expect(item.expanded).toBe(component.expanded);
});
});

it('to navigationStartRefs', async () => {
Expand All @@ -133,12 +139,22 @@ describe('cds-navigation', () => {
startRefs.forEach(start => {
expect(start.expandedRoot).toBe(component.expandedRoot);
});

component.expanded = true;
await componentIsStable(component);
startRefs.forEach(start => {
expect(start.expandedRoot).toBe(component.expandedRoot);
});
});

it('to rootNavigationStart', async () => {
await componentIsStable(component);
const rootStart = component.querySelector<CdsNavigationStart>(':scope > cds-navigation-start');
expect(rootStart.expanded).toBe(component.expanded);

component.expanded = true;
await componentIsStable(component);
expect(rootStart.expanded).toBe(component.expanded);
});

it('to rootNavigationItems', async () => {
Expand All @@ -147,6 +163,28 @@ describe('cds-navigation', () => {
rootItems.forEach(item => {
expect(item.expanded).toBe(component.expanded);
});

component.expanded = true;
await componentIsStable(component);
rootItems.forEach(item => {
expect(item.expanded).toBe(component.expanded);
});
});

it('to new navigation items', async () => {
component.expanded = true;
await componentIsStable(component);

const navItem = document.createElement('cds-navigation-item');
navItem.id = 'my-new-nav-item';
navItem.innerHTML = '<a href="#">My New Nav Item</a>';

component.appendChild(navItem);

await componentIsStable(component);

expect(navItem.expanded).toBe(component.expanded);
expect(navItem.tabIndex).toBe(-1);
});
});
});
201 changes: 104 additions & 97 deletions projects/core/src/navigation/navigation.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,19 +173,15 @@ export class CdsNavigation extends LitElement {
@querySlotAll('cds-navigation-group')
protected navigationGroupRefs: NodeListOf<CdsNavigationGroup>;

private toggle() {
this.expandedChange.emit(!this.expanded);
}

private get currentActiveItem() {
return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);
static get styles() {
return [baseStyles, styles];
}

protected get endTemplate() {
return this.navigationEnd
? html`
<div class="navigation-end" cds-layout="vertical align:horizontal-stretch">
<slot name="cds-navigation-end"></slot>
<slot name="cds-navigation-end" @slotchange=${this.onItemSlotChange}></slot>
</div>
`
: '';
Expand All @@ -197,7 +193,7 @@ export class CdsNavigation extends LitElement {
this.rootNavigationStart
? (returnHTML = html`
<div class="navigation-start" cds-layout="vertical align:horizontal-stretch">
<slot @slotchange="${() => this.addStartEventListener()}" name="navigation-start"></slot>
<slot @slotchange="${() => this.onStartItemSlotChange()}" name="navigation-start"></slot>
<cds-divider class="start-divider"></cds-divider>
</div>
`)
Expand All @@ -206,29 +202,120 @@ export class CdsNavigation extends LitElement {
return returnHTML;
}

protected get visibleChildren(): FocusableElement[] {
return Array.from(this.allNavigationElements).filter(n => isVisible(n));
render() {
return html`<div class="private-host" aria-label="${this.i18n.navigationLabel}" cds-layout="vertical wrap:none">
${this.startTemplate}
<slot name="cds-navigation-substart"></slot>
<nav class="navigation-body-wrapper">
<div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex="0" id="item-container">
<div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch">
<slot @slotchange=${this.onItemSlotChange}></slot>
</div>
</div>
</nav>
${this.endTemplate}
</div>`;
}

connectedCallback() {
super.connectedCallback();
this.role = 'list';
this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this));
this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this));
this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this));
}

disconnectedCallback() {
super.disconnectedCallback();
if (this.rootNavigationStart) {
this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));
}
}

firstUpdated(props: PropertyValues<this>) {
super.firstUpdated(props);

const itemWrapper = this.shadowRoot?.querySelector('#item-container');
itemWrapper?.addEventListener('focus', this.initItemKeys.bind(this));
itemWrapper?.addEventListener('keydown', this.handleItemKeys.bind(this));
itemWrapper?.addEventListener('blur', this.blurItemKeys.bind(this));
}

updated(props: PropertyValues<this>) {
super.updated(props);

if (props.has('expanded')) {
this.expandedRoot = this.expanded;
}

this.updateChildrenProps();
}

addStartEventListener() {
kevinbuhmann marked this conversation as resolved.
Show resolved Hide resolved
onStartItemSlotChange() {
this.onItemSlotChange();

// This is controlled by the slotchange event on the navigation-start slot
// Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)
if (this.rootNavigationStart) {
this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));
}
}

firstUpdated(props: PropertyValues<this>) {
super.firstUpdated(props);
onItemSlotChange() {
this.updateChildrenProps();

// set all visible navigation elements to tabindex = -1
this.allNavigationElements.forEach(item => {
setAttributes(item, ['tabindex', '-1']);
});
}

const itemWrapper = this.shadowRoot?.querySelector('#item-container');
itemWrapper?.addEventListener('focus', this.initItemKeys.bind(this));
itemWrapper?.addEventListener('keydown', this.handleItemKeys.bind(this));
itemWrapper?.addEventListener('blur', this.blurItemKeys.bind(this));
updateChildrenProps() {
if (this.navigationGroupItems) {
syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });
}

if (this.navigationItemRefs) {
syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {
expanded: true,
});
}

if (this.navigationStartRefs) {
syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {
expandedRoot: true,
});
}

if (this.rootNavigationStart) {
syncProps(this.rootNavigationStart, this, {
expanded: this.expanded,
});
}

if (this.rootNavigationItems.length > 0) {
syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {
expanded: this.expanded,
});
}

if (this.navigationGroupRefs.length > 0) {
syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {
layout: true,
});
}
}

protected get visibleChildren(): FocusableElement[] {
return Array.from(this.allNavigationElements).filter(n => isVisible(n));
}

private toggle() {
this.expandedChange.emit(!this.expanded);
}

private get currentActiveItem() {
return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);
}

private blurItemKeys() {
Expand Down Expand Up @@ -359,84 +446,4 @@ export class CdsNavigation extends LitElement {
}
});
}

connectedCallback() {
super.connectedCallback();
this.role = 'list';
this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this));
this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this));
this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this));
}

disconnectedCallback() {
super.disconnectedCallback();
if (this.rootNavigationStart) {
this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));
}
}

render() {
return html`<div class="private-host" aria-label="${this.i18n.navigationLabel}" cds-layout="vertical wrap:none">
${this.startTemplate}
<slot name="cds-navigation-substart"></slot>
<nav class="navigation-body-wrapper">
<div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex="0" id="item-container">
<div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch">
<slot></slot>
</div>
</div>
</nav>
${this.endTemplate}
</div>`;
}

updated(props: PropertyValues<this>) {
super.updated(props);

if (props.has('expanded')) {
this.expandedRoot = this.expanded;
}

this.updateChildrenProps();
}

updateChildrenProps() {
if (this.navigationGroupItems) {
syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });
}

if (this.navigationItemRefs) {
syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {
expanded: true,
});
}

if (this.navigationStartRefs) {
syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {
expandedRoot: true,
});
}

if (this.rootNavigationStart) {
syncProps(this.rootNavigationStart, this, {
expanded: this.expanded,
});
}

if (this.rootNavigationItems.length > 0) {
syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {
expanded: this.expanded,
});
}

if (this.navigationGroupRefs.length > 0) {
syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {
layout: true,
});
}
}

static get styles() {
return [baseStyles, styles];
}
}