menu item doesn't show active state in hamburg menu in masthead #4971
Assignees
Labels
bug
Something isn't working
dev
Needs some dev work
package: react
Work necessary for the Carbon for IBM.com react components package
severity 2
Affects major functionality, has a workaround
Milestone
Comments
yellowdragonfly
assigned IgnacioBecerra, jeffchew, ljcarot, oliviaflory, RobertaJHahn and ghost
RobertaJHahn
added
package: react
RobertaJHahn
assigned annawen1 and unassigned jeffchew, ljcarot, IgnacioBecerra, ghost
, oliviaflory and RobertaJHahn
|
@annawen1 Issue is ready to finish the work. Airtable updated, labels and release added. |
kodiakhq bot
pushed a commit
that referenced
this issue
Jan 22, 2021
…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) -->
IgnacioBecerra
pushed a commit
to IgnacioBecerra/ibm-dotcom-library
that referenced
this issue
Feb 22, 2021
…in mobile nav (carbon-design-system#4973) ### Related Ticket(s) menu item doesn't show active state in hamburg menu in masthead carbon-design-system#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) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
talked with Anna Wen on this issue. She was able to reproduce it on current testing environment.
When setting the last menu item link in the masthead to be selected, the item does not have a selected state in the mobile nav, only desktop
DESKTOP:
MOBILE MENU: (You can see the selected menu item in desktop does not have selected state in mobile)
The text was updated successfully, but these errors were encountered: