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

[Left Nav: Web Components]: L1 items are visible when on L2 menu items #6209

Closed
annawen1 opened this issue May 26, 2021 · 0 comments
Closed

[Left Nav: Web Components]: L1 items are visible when on L2 menu items #6209

annawen1 opened this issue May 26, 2021 · 0 comments
Assignees
@annawen1
Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Milestone
Sprint 21-13

Comments

@annawen1
Copy link
Member

annawen1 commented May 26, 2021 •
edited
Loading

Detailed description

Describe in detail the issue you're having.

This is currently visible in the Cloud Masthead, but I believe this issue is present in the global left nav as well. When there is a long list of L1 items, clicking into an L1 item into the L2 menu item panel, the previous panel menu items are visible.

Steps to reproduce the issue

  1. Go to experimental storybook web components Cloud Masthead component: https://ibmdotcom-web-components-experimental.mybluemix.net/?path=/story/components-cloud-masthead--default
  2. Open hamburger menu
  3. Click into one of the L0 items (ie. Products)
  4. Scroll down the list of L1 items and select an item below (ie. Network)

Additional information

left-nav-issue
@annawen1 annawen1 added the bug Something isn't working label May 26, 2021
@RobertaJHahn RobertaJHahn added dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround labels Jun 1, 2021
@RobertaJHahn RobertaJHahn added this to the Sprint 21-12 milestone Jun 1, 2021
@proeung proeung mentioned this issue Jun 2, 2021
Merged
7 tasks
@annawen1 annawen1 mentioned this issue Jun 16, 2021
Merged
@jeffchew jeffchew added this to the Sprint 21-18 milestone Jun 18, 2021
@annawen1 annawen1 self-assigned this Jun 22, 2021
@annawen1 annawen1 modified the milestones: Sprint 21-18, Sprint 21-13 Jun 29, 2021
kodiakhq bot pushed a commit that referenced this issue Jul 1, 2021
@annawen1
feat(left-nav): refactor into left-nav-sections and include animations (
17a70e4 
#6393)

### Related Ticket(s)

Web Component: Change Mega Menu to include animation (back button & forward motion) #4831
[Left Nav: Web Components]: L1 items are visible when on L2 menu items #6209
Web component: Masthead-With custom data - Hybrid cloud options are missing from the menu options. #5135

### Description

Refactor `left-nav` so all menu panels/sections are on the same level instead of nested. 

Align animations for forward and backward movement.

![Jun-16-2021 17-42-51](https://user-images.githubusercontent.com/54281166/122298092-5170e180-ceca-11eb-8c57-3f7d6123b514.gif)

### Changelog

**New**

- `left-nav-menu-section` component that handles all the focus of first element, back button functionality
- add L1 platform name to the left-nav

**Changed**

- set tabindex to -1 for `left-nav-menu` and `left-nav-menu-item`
- reduced logic of `left-nav-menu` to only render menu items that have a menu
- move cloud profile and cta menu items to within a menu section in `cloud-masthead-composite`
- add conditional to `focuswrap` utility when focus doesn't hit start or end sentinel which allows the first menu item to focus when left-nav is expanded

**Removed**

- styles that are no longer needed

<!-- 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
Assignees

@annawen1 annawen1

Labels
bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
Sprint 21-13
Development

No branches or pull requests
8 participants
@jeffchew @shixiedesign @ariellalgilmore @ljcarot @DragosRistici @RobertaJHahn @annawen1 @andysherman2121