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

React: Add the overflow feature to the Masthead #3875

Closed
7 tasks
RobertaJHahn opened this issue Sep 8, 2020 · 0 comments
Closed
7 tasks

React: Add the overflow feature to the Masthead #3875

RobertaJHahn opened this issue Sep 8, 2020 · 0 comments
Assignees
@ariellalgilmore
Labels
dev Needs some dev work Feature request A new adopter requested feature package: react Work necessary for the Carbon for IBM.com react components package Sprint Must Have
Milestone
Sprint 20-20

Comments

@RobertaJHahn
Copy link

RobertaJHahn commented Sep 8, 2020 •
edited
Loading

User Story

As a [user role below]:
IBM.com Library developer

I need to:
create/change the Masthead

so that I can:
provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

Acceptance criteria

  • Built as a pure React component/variant
  • Include README for the react component and corresponding styles
  • Add any necessary stable selectors
  • Create codesandbox example under /packages/react/examples/codesandbox and include in README
  • Minimum 80% unit test coverage
  • The Storybook link is added to the Design QA issue for their testing
  • A comment is posted in the Prod QA issue, tagging Praveen, when development is finished
@RobertaJHahn RobertaJHahn added adopter: reboot dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package labels Sep 8, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-19 milestone Sep 8, 2020
@RobertaJHahn RobertaJHahn mentioned this issue Sep 8, 2020
Closed
5 tasks
@RobertaJHahn RobertaJHahn mentioned this issue Sep 8, 2020
Closed
5 tasks
@annawen1 annawen1 mentioned this issue Sep 22, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Sep 22, 2020
@annawen1
feat(MegaMenu): layout iteration in breakpoint between 800 - 1055px (#…
9066015 
…4021)

### Related Ticket(s)

React: MegaMenu iteration 1 breakpoint and layout updates #3948

### Description

New layout for Megamenu at 800px - 1055px.

NOTE: The L0 nav items will appear squished in the lower breakpoints (~800px). We will need the new overflow feature to the Masthead (React: Add the overflow feature to the Masthead #3875) for this to be fixed.

EXPECTED:
<img width="501" alt="Screen Shot 2020-09-22 at 9 22 42 AM" src="https://user-images.githubusercontent.com/54281166/93888069-82aedf00-fcb5-11ea-850f-07a343e4bc33.png">

### Changelog

**Changed**

- added styling for breakpoints in between 800 - 1055px

**Removed**

- stale styling for code used to hide masthead

<!-- 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: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@jeffchew jeffchew mentioned this issue Sep 24, 2020
Closed
@ariellalgilmore ariellalgilmore mentioned this issue Sep 25, 2020
Closed
@ariellalgilmore ariellalgilmore mentioned this issue Oct 2, 2020
Merged
@asudoh asudoh mentioned this issue Oct 5, 2020
Closed
kodiakhq bot pushed a commit that referenced this issue Oct 6, 2020
@ariellalgilmore
feat(masthead): create overflow navigation (#4119)
1776991 
### Related Ticket(s)

#3875 #4131

### Description

Add overflow feature for L0 and L1. Consolidate code into one component.

### Changelog

**New**

- resizeObserver for window resize
- onClick functions for scrolling left or right
- styling for carets

<img width="1072" alt="Screen Shot 2020-10-02 at 11 30 00 AM" src="https://user-images.githubusercontent.com/20210594/94957454-9f5fc980-04a2-11eb-82f5-0b3df076df7b.png">
<img width="1061" alt="Screen Shot 2020-10-02 at 11 28 44 AM" src="https://user-images.githubusercontent.com/20210594/94957478-aab2f500-04a2-11eb-8f75-106e47cedfb1.png">



<!-- 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: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@RobertaJHahn RobertaJHahn added the Feature request A new adopter requested feature label Oct 7, 2020
@RobertaJHahn RobertaJHahn mentioned this issue Dec 10, 2020
Closed
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ariellalgilmore ariellalgilmore

Labels
dev Needs some dev work Feature request A new adopter requested feature package: react Work necessary for the Carbon for IBM.com react components package Sprint Must Have
Projects
None yet
Milestone
Sprint 20-20
Development

No branches or pull requests
2 participants
@ariellalgilmore @RobertaJHahn