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

[TOC v2]: Table of contents in Dotcom shell is hidden behind masthead on less than lg breakpoint #11587

Closed
2 tasks done
m4olivei opened this issue Feb 27, 2024 · 0 comments · Fixed by #11589
Closed
2 tasks done

[TOC v2]: Table of contents in Dotcom shell is hidden behind masthead on less than lg breakpoint #11587

m4olivei opened this issue Feb 27, 2024 · 0 comments · Fixed by #11589
Assignees
@m4olivei
Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package v2

Comments

@m4olivei
Copy link
Contributor

Description

In the Dotcom Shell > Default story, when below the lg breakpoint the expectation is that the TOC will be sticky and the Masthead will scroll off the page as you scroll and encounter the TOC.

Monosnap.screencast.2024-02-27.09-53-30.mp4

Component(s) impacted

Dotcom Shell
Table of contents

Browser

Chrome

Carbon for IBM.com version

v2.4.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

https://ibm.com

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

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

Steps to reproduce the issue (if applicable)

  1. Browse to Dotcomshell > Default with your viewport width set to below the lg breakpoint (<= 1055px)
  2. Scroll the page past the TOC

Expected result
The masthead shoul scroll off the page, and the TOC should become sticky to the top.

Actual result
The masthead remains sticky at the top, and the TOC scrolls underneath it, sticky to the top, appearing as though it scolled off the page. TOC is not visible.

Release date (if applicable)

No response

Code of Conduct
@m4olivei m4olivei added bug Something isn't working dev Needs some dev work labels Feb 27, 2024
@m4olivei m4olivei added package: web components Work necessary for the IBM.com Library web components package owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants v2 labels Feb 27, 2024
@m4olivei m4olivei changed the title [TOC]: Table of contents in Dotcom shell is hidden behind masthead on less than lg breakpoint [TOC v2]: Table of contents in Dotcom shell is hidden behind masthead on less than lg breakpoint Feb 27, 2024
@m4olivei m4olivei mentioned this issue Feb 27, 2024
Merged
@m4olivei m4olivei self-assigned this Feb 27, 2024
@kennylam kennylam moved this to Backlog in Carbon for IBM.com Mar 4, 2024
@kodiakhq kodiakhq bot closed this as completed in #11589 Mar 12, 2024
kodiakhq bot pushed a commit that referenced this issue Mar 12, 2024
@m4olivei
fix(toc): adjust mobile selector, should always be navbar (#11589)
0393906 
### Related Ticket(s)

Closes #11587

### Description

Fixes sticky behavior issue with TOC Dotcom shell at less than lg breakpoint.

### Testing instructions

1. Open the Dotcom shell > Default
2. Scroll the page
3. The Masthead should be sticky until it reaches the TOC, then the masthead should scroll away, while the TOC becomes sticky to the top.
4. Repeat at both `lg` and less than `lg` breakpoints
5. Repeat 1-4 with the Dotcom shell > With ToC horizontal  story

### Changelog

**Changed**

- TOC dotcom shell sticky behavior fixed at less than lg breakpoint

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@github-project-automation github-project-automation bot moved this from Backlog to Done in Carbon for IBM.com Mar 12, 2024
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Mar 20, 2024
@m4olivei @kennylam
fix(toc): adjust mobile selector, should always be navbar (carbon-des…
e8bcc23 
…ign-system#11589)

### Related Ticket(s)

Closes carbon-design-system#11587

### Description

Fixes sticky behavior issue with TOC Dotcom shell at less than lg breakpoint.

### Testing instructions

1. Open the Dotcom shell > Default
2. Scroll the page
3. The Masthead should be sticky until it reaches the TOC, then the masthead should scroll away, while the TOC becomes sticky to the top.
4. Repeat at both `lg` and less than `lg` breakpoints
5. Repeat 1-4 with the Dotcom shell > With ToC horizontal  story

### Changelog

**Changed**

- TOC dotcom shell sticky behavior fixed at less than lg breakpoint

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "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

@m4olivei m4olivei

Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package v2
Projects
Carbon for IBM.com
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(toc): adjust mobile selector, should always be navbar m4olivei/carbon-for-ibm-dotcom
1 participant
@m4olivei