Web Components: Cloud Masthead and Mega Menu design enhancement follow up fixes - DDS consulting support

proeung commented 3 years ago

Detailed description

Describe in detail the issue you're having.

This ticket is a follow-up to this PR (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/5922).

These are feedback from the design QA process which needs to be addressed after the early June release deadline.

Is this issue related to a specific component?

Cloud Masthead + Mega Menu

Pre-launch Must-haves

List of changes based on @ltitle design QA.

Height of the mega menu for Solutions is changing with each selected topic. It should maintain the height of the longest content set so it is not jumping up and down while using the menu.

120503833-9f95c900-c391-11eb-84d0-c8e0fde69752 120503863-a45a7d00-c391-11eb-8dd1-3e8a53f60c22

I also noticed that we are not breaking to the hamburger until around 800px. I think we should break at 959px instead since the menu items are unusable at that size.
The megamenu animation/transition is a bit choppy and not as smooth as the dotcom version.
On both Chrome 91.0.4472.124 and Firefox 89.0.2 on Windows 10, a small vertical bar on the right side appears and pushes everything, L0 included, to the left when 'Products' or 'Solutions' is selected from the L0 (see attached)

Post-launch

If the left side menu tabs do not fit vertically in the browser window I would expect that we have scrolling only for that side of the mega menu rather than making both sides scroll. Once the content does not fit I expect 2 scroll bars one for left and one for right side content as needed.

Additional information

HC JIRA ticket: https://jsw.ibm.com/browse/HC-1972
Hybrid Cloud Engineer: @proeung

RobertaJHahn commented 3 years ago

Lila to add severity as she knows best the impact of the issues.

ltitle commented 3 years ago

@shixiedesign We do not need to change to blue styling of link for View all products if we do nto think that is a scalable solution.

The following issue was also not addressed in the past PR: If the left side menu tabs do not fit vertically in the browser window I would expect that we have scrolling only for that side of the mega menu rather than making both sides scroll. Once the content does not fit I expect 2 scroll bars one for left and one for right side content as needed.

RobertaJHahn commented 3 years ago

@proeung We will move into the DDS backlog. Let us know when the work is scheduled and we will move the issue into a sprint on our side and assign a consulting engineer.

proeung commented 3 years ago

@RobertaJHahn This issue will be handled by our team. We'll most likely tackle the work in this week's sprint 06/08 - 06/15. Here's our JIRA ticket - https://jsw.ibm.com/browse/HC-1972.

proeung commented 3 years ago

@RobertaJHahn Just a heads up, @huntermacd has been assigned to this ticket and we're looking to get this ticket fixed up and slated for the v1.22.0 release (July 27, 2021: Full Release) - https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5888.

RobertaJHahn commented 3 years ago

@proeung Thanks for letting us know. Here is the schedule for the July 27 release. PR submission date is July 14.

cc: @ariellalgilmore

proeung commented 3 years ago

@RobertaJHahn It doesn't look like our engineer (@huntermacd) will be able to open a PR in time for the 07/14 PR submission deadline. Please move this issue to the v1.23.0 (former Sep release) release instead.

v1.23.0 (former Sep release)

June 28 - July 2, 2021: Component review
July 16, 2021: Design spec and Func spec due
Aug 4, 2021: Last day for Dev PR submitted
Aug 5 - 6, 2021: Finalize PR reviews for the release
Aug 6, 2021: Code freeze
Aug 9 - 13, 2021: Release Candidate(s) and testing
Aug 17, 2021: Full Release

RobertaJHahn commented 3 years ago

@ariellalgilmore I have updated the release. Moved this issue to DDS sprint 21-15.

cc: @proeung

proeung commented 3 years ago

@RobertaJHahn Sounds good! Also, I'll be the engineer that will be picking up this ticket for that sprint.

carbon-design-system / carbon-for-ibm-dotcom