search

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

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
269 stars 156 forks source link

[Masthead] Masthead L1: overlaps page content #6597

Closed igaldino closed 3 years ago

igaldino commented 3 years ago

Detailed description

Describe in detail the issue you're having.

DotCOM Shell or Masthead L1 overlaps page content.

This issue doesn't happen in mobile mode when the L1 options are hidden in the menu button.

Is this a feature request (new component, new icon), a bug, or a general issue?

This is a bug. The page content should shift down when it's displayed the L1 options.

Is this issue related to a specific component?

This is related to DotCOM Shell and Masthead L1 components.

What did you expect to happen? What happened instead? What would you like to see changed?

The page content should shift down when it's displayed the L1 options.

What browser are you working in?

Firefox and Chrome.

What version of Carbon for IBM.com are you using?

"@carbon/ibmdotcom-web-components": "^1.6.0",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

CIO eDelivery Team / WebUI squad / DSWDown application - download portal for internal "IBM Software Downloads" and external "IBM Partnerworld Software Access Catalog" offerings, among others. We're still in the early development stages.

Steps to reproduce the issue

I've created a little project to show the issue, so just clone my test repository and run it:

  1. git clone https://github.com/igaldino/carbon-test
  2. cd dotcom-shell
  3. npm install
  4. ng serve
  5. access http://localhost:4200 from your browser

Additional information

normal

mobile

These screenshots above are related to the actual application, not the one from the test application I created for this issue report.

Notice in the first screenshot it's missing the h2 tag with "Overview" text.

proeung commented 3 years ago

Looks like this text overlapping on page scroll up/down issue might be related to the overall structuring of the sticky behavior mentioned in these two issues (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6994 & https://github.com/carbon-design-system/carbon-for-ibm-dotcom-website/issues/971). Moving this back to the backlog until we have an implementation plan in place.

emyarod commented 3 years ago

given that the content styles seem to be contained at the app level (web components and React), I'm not sure if there's any more we should do at the library level.

I did notice that the main component doesn't seem have the .bx--content or .with-l1 classes in your Angular project though, not sure if that's intentional

image

vs

image

igaldino commented 3 years ago

Yeah, that fixed the l1 behavior. But this is not docummented anywhere so I think you need to fix the documentation about it. Thx.

emyarod commented 3 years ago

this should be resolved when https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6270 is closed so you will no longer need to add the styles on the application side