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.

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

Web component: Masthead-With custom data - Hybrid cloud options are missing from the menu options. #5135

Closed
Praveen-sr opened this issue Feb 10, 2021 · 5 comments
Assignees
Labels
adopter: Innovation Team used when component or pattern will be used by this adopter adopter support bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed storybook
Milestone

Comments

@Praveen-sr
Copy link

Detailed description

Issue:
Masthead-With custom data - Hybrid cloud menu options are not displayed for the user.

Steps to Reproduce:
Step1: Click on the Hamburger menu
Step2: Click on the Products & Services Menu
Step3: Click on any sub-menu
Step4: Click on the link present within the sub menu
Step5: Once IBM.com page got loaded, Click on the browser back button and come back to the parent page and click on the Hamburger menu

Additional information

Mast-Cust11.gif

@Praveen-sr Praveen-sr added bug Something isn't working severity 2 Affects major functionality, has a workaround labels Feb 10, 2021
@RobertaJHahn RobertaJHahn added Airtable Done dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package Sprint Must Have labels Feb 10, 2021
@RobertaJHahn RobertaJHahn added this to the Sprint 21-03 milestone Feb 10, 2021
@ariellalgilmore
Copy link
Member

Tested this on my actual IPhone X on 14.4 and was not able to replicate. This might something just in browserstack.

@annawen1
Copy link
Member

@Praveen-sr I also tested this on my iphone 8 on 14.3 and don't see this happening.

@Praveen-sr
Copy link
Author

@annawen1 @ariellalgilmore I tested this scenario on actual iPhone 11 with iOS 14.4, I was able to reproduce it.

https://images.zenhubusercontent.com/193129061/7b157895-a2ae-447b-b144-08aa2eb48472/img_0960.mp4

@annawen1
Copy link
Member

annawen1 commented Mar 9, 2021

One thing to note, I do not see this bug happening in the https://www.ibm.com/partners/ page which is using the web components masthead so it may be only occurring in storybook

@RobertaJHahn RobertaJHahn added storybook severity 4 Affects minor functionality, no workaround needed and removed severity 2 Affects major functionality, has a workaround labels Mar 11, 2021
@annawen1
Copy link
Member

@Praveen-sr can you test on www.ibm.com/partners and https://ibmdotcom-web-components-html-test.mybluemix.net and see if the bug is reproducible there? I think this may be specific to storybook.

@jeffchew jeffchew modified the milestones: Sprint 21-13, Sprint 21-14 Jun 9, 2021
@RobertaJHahn RobertaJHahn added adopter support adopter: Innovation Team used when component or pattern will be used by this adopter labels Jun 23, 2021
@annawen1 annawen1 modified the milestones: Sprint 21-15, Sprint 21-13 Jun 30, 2021
kodiakhq bot pushed a commit that referenced this issue Jul 1, 2021
#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
Labels
adopter: Innovation Team used when component or pattern will be used by this adopter adopter support bug Something isn't working dev Needs some dev work package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed storybook
Projects
None yet
Development

No branches or pull requests

7 participants