Skip to content

Commit

Permalink
fix(Masthead): make sure last selected menu item has selected styles …
Browse files Browse the repository at this point in the history 
…in mobile nav (#4973)

### Related Ticket(s)

menu item doesn't show active state in hamburg menu in masthead #4971

### Description

If selected menu item is a link (not a dropdown or has megamenu panel) and is the last menu item in the nav, it currently does not get the selected styles applied on the mobile nav.

Compare correctly the titleEnglish and selected prop from adopter and set classname.

### Changelog

**Changed**

- create a `selected` const so we don't have the same comparison statement in multiple places
- add `titleEnglish` field to last menu item in the custom nav data json file so we can test on storybook

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
  • Loading branch information
@annawen1
annawen1 authored Jan 22, 2021
1 parent 0499e44 commit c52aff6
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 9 deletions.
13 changes: 13 additions & 0 deletions packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56874,6 +56874,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -57245,6 +57246,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -57568,6 +57570,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -57886,6 +57889,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -58549,6 +58553,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
]
Expand Down Expand Up @@ -114443,6 +114448,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -114811,6 +114817,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -115132,6 +115139,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
]
Expand Down Expand Up @@ -115565,6 +115573,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
]
Expand Down Expand Up @@ -117554,6 +117563,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -117923,6 +117933,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -118244,6 +118255,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
],
Expand Down Expand Up @@ -118907,6 +118919,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
"hasMenu": false,
"menuSections": Array [],
"title": "Sed cursus ante dapibus diam",
"titleEnglish": "Sed cursus ante dapibus diam",
"url": "https://www.ibm.com/support/home/?lnk=msu_usen",
},
]
Expand Down
13 changes: 6 additions & 7 deletions packages/react/src/components/Masthead/MastheadLeftNav.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Copyright IBM Corp. 2016, 2020
* Copyright IBM Corp. 2016, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand Down Expand Up @@ -37,6 +37,7 @@ const MastheadLeftNav = ({
* @returns {*} Left side navigation
*/
const sideNav = navigation.map((link, i) => {
const selected = rest.selectedMenuItem === link.titleEnglish;
if (link.hasMenu || link.hasMegaPanel) {
const autoid = `${stablePrefix}--masthead-${rest.navType}-sidenav__l0-nav${i}`;
const dataTitle = link.titleEnglish
Expand All @@ -54,7 +55,7 @@ const MastheadLeftNav = ({
backButtonText={backButtonText}
key={i}
autoid={autoid}
selected={rest.selectedMenuItem === link.titleEnglish}
selected={selected}
navType={rest.navType}
dataTitle={dataTitle}>
{renderNavSections(
Expand Down Expand Up @@ -84,7 +85,7 @@ const MastheadLeftNav = ({
backButtonText={backButtonText}
key={i}
autoid={autoid}
selected={rest.selectedMenuItem === link.titleEnglish}
selected={selected}
navType={rest.navType}
dataTitle={dataTitle}>
{renderNavSections(
Expand All @@ -102,8 +103,7 @@ const MastheadLeftNav = ({
<SideNavLink
href={link.url}
className={
rest.selected &&
`${prefix}--masthead__side-nav--submemu--selected`
selected && `${prefix}--masthead__side-nav--submemu--selected`
}
data-autoid={`${stablePrefix}--masthead-${rest.navType}-sidenav__l0-nav${i}`}
key={i}>
Expand All @@ -127,8 +127,7 @@ const MastheadLeftNav = ({
<SideNavLink
href={link.url}
className={
rest.selectedMenuItem === link.titleEnglish &&
`${prefix}--masthead__side-nav--submemu--selected`
selected && `${prefix}--masthead__side-nav--submemu--selected`
}
data-autoid={`${stablePrefix}--masthead-${rest.navType}-sidenav__l0-nav${i}`}
key={i}>
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Copyright IBM Corp. 2020
* Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand Down Expand Up @@ -344,6 +344,7 @@ const mastheadLinks = [
},
{
title: 'Sed cursus ante dapibus diam',
titleEnglish: 'Sed cursus ante dapibus diam',
url: 'https://www.ibm.com/support/home/?lnk=msu_usen',
hasMenu: false,
hasMegapanel: false,
Expand Down
3 changes: 2 additions & 1 deletion packages/styles/scss/components/masthead/_masthead-leftnav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,8 @@
.#{$prefix}--masthead__side-nav--submemu--selected {
border-left: 3px solid $interactive-01;

.#{$prefix}--side-nav__submenu-title {
.#{$prefix}--side-nav__submenu-title,
&.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
font-weight: carbon--font-weight('semibold');
}
}
Expand Down

0 comments on commit c52aff6

Please sign in to comment.