[Masthead v2.0.0]: bugs identified in 2.0.0 (Phase 1)

[oliviaflory]

Engineering info:

• Innovation Team engineer: @jkaeser
• Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/ADCMS-2570

---

Description

List of bugs identified by design QA

Component(s) impacted

Masthead v2

Browser

Chrome

Carbon for IBM.com version

v2 feature branch

Application/website

Carbon for AEM

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/masthead-v2/web-components/?path=/story/components-masthead--default

Steps to reproduce the issue (if applicable)

reduce browser width to anything between 800–959px wide

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[proeung]

@oliviaflory Thanks for opening this issue. Is this the only feedback/bug that you've noticed as part of this design QA ticket (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9307) or are there more items that you've spotted? If it's the latter, can we capture everything into a single issue/ticket instead of individual ones?

[oliviaflory]

Hey @proeung definitely, I opened this one before we had talked on the slack thread. This one in particular is very broken so I opened as an individual issue, but we can close and move this over to the QA issue so you can see it all together.

There are quite a lot of style bugs that I saw and will find out who has time to add to the QA issue

[proeung]

@oliviaflory Got it and no worries!

Let's use this issue to capture all of the styling bugs that you and @JaniceChristineM discovered and leave this one (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9307) for the design QA task, which is assigned to you and Janice for this sprint. Sounds good?

[oliviaflory]

Style bugs L0

Menu item and caret are two different colors – they should be the same. See tokens listed in Spec sheet

• [x] enabled fixed
• [x] hover fixed

---

Chat and Login icons are a different color than the Search icon See tokens listed in Spec sheet

• [x] enabled fixed
• [x] hover fixed

---

Focus state for all menu items and menu icons should not have any background color See states and tokens listed in Spec sheet

• [x] menu items fixed
• [x] menu icons fixed
• [ ] IBM logo fixed

---

I don't see an option or knob for the Optional Cluster name Apologies I cannot remember if this was removed from the scope of the September launch See specs

---

Style bugs mega menu

H1 hover and active state text colors are incorrect (hover was mislabeled in spec sheet, but is now updated) See Spec sheet

• [x] hover fixed
• [x] active state fixed

---

H3 hover and active state text colors are incorrect See Spec sheet

• [x] hover fixed
• [x] active state fixed

---

Headings are styled differently between the Tiered vs default menu, but they should be following the same spec for this first phase. FYI they will different in phase 2 TBD exact differences, but the icon is definitely a different size See Spec sheet See Tiered mega menu See Default mega menu

• [x] Both tiered and default should use same styling
  • [x] icon size corrected
  • [x] hover state corrected (default still has background color, should not)

Looks like tiered menu might have a 16px height cap on the icon container, making it smaller?

---

Link items are incorrect type size – applies to Support and More menus Link items container size are 36px hight, should be 32px. This may get fixed with the type style fix? See Spec sheet

• [ ] link item fixed

---

H1 icon needs to top align when line wraps

• [x] icon top aligned

[oliviaflory]

Style bugs mobile

Focus state text colors are incorrect Menu items and caret are different colors, they should be the same See spec sheet

• [x] fix focus
• [ ] Fix menu items + caret

---

Last item has bolder colored divider at the bottom on the Products and Solutions menus, expecting the divider to match the other menu items

• [x] fix border color

Expecting

[oliviaflory]

Mega menu

Tiered menu tab order is horizontal, should be top to bottom See functional specs

• [ ] fixed

---

Mega menu should change to the hamburger menu at 956px browser width. Currently the mega menu is maintaining past 960px and appears broken with content falling below the tabbed section See 3.4 in the Functional spec

• [x] fixed

[jkaeser]

Hi, @oliviaflory, and thank you for the detailed feedback! I've addressed most of it over in #9324, but I'd argue that some of the changes are out of scope for this round of work.

1. No changes to the mobile navigation are in scope, though I did remove the extra dark border since it was a quick fix. I looked into updating the color tokens, but that part of the code needs a refactor to pay back some tech debt, which is enough work for a separate ticket.
2. There are some ramifications I'll need to bring up with the team before we can changing the tabbing order for the tabbed megamenu layout, specifically dealing with the source order of the nav items over in the translations repository.

I'm happy to discuss further if you'd like. Otherwise, let's capture these two pieces of feedback in separate tickets so we can address them in one of the next phases.