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

[Masthead with L1] expose the L1 platform name on small and medium breakpoints #6418

Closed
oliviaflory opened this issue Jun 18, 2021 · 1 comment · Fixed by #6491
Closed

[Masthead with L1] expose the L1 platform name on small and medium breakpoints #6418

oliviaflory opened this issue Jun 18, 2021 · 1 comment · Fixed by #6491
Assignees
@kennylam
Labels
dev Needs some dev work Feature request A new adopter requested feature package: styles Work necessary for the Carbon for IBM.com styles package priority: medium
Milestone
Sprint 21-13

Comments

@oliviaflory
Copy link
Contributor

The problem

The L1 is hidden on medium and small breakpoints, hiding the platform/ecosystem name and the user may not have a sense of where they are within IBM.com.

L1-WC-Jun-18-2021 09-31-13.gif

The solution

Expose the L1 on medium and small breakpoints and only display the platform/ecosystem name. The Northstar L1 does this today.
Visual specs have been updated, link to Box folder

L1-analytics-Jun-18-2021 09-29-55.gif

Screen Shot 2021-06-18 at 9.34.45 AM.png

Additional information

Notes from #5985 masthead clean up:
Reviewed questions about L1 behavior with Shixie, Lila and James 5/25
Decisions:

  • L1 ecosystem name / topic should be visible on medium & small breakpoints
  • Keep options for selected state of ecosystem name on medium & small breakpoints
  • Within the hamburger menu, the ecosystem name will only be visible on the first level of navigation.
@oliviaflory oliviaflory added the Feature request A new adopter requested feature label Jun 18, 2021
@RobertaJHahn RobertaJHahn changed the title [Masthead with L1] expose L1 on small and medium breakpoints [Masthead with L1] expose the L1 platform name on small and medium breakpoints Jun 22, 2021
@RobertaJHahn RobertaJHahn added dev Needs some dev work priority: medium package: web components Work necessary for the IBM.com Library web components package package: styles Work necessary for the Carbon for IBM.com styles package and removed package: web components Work necessary for the IBM.com Library web components package labels Jun 22, 2021
@RobertaJHahn
Copy link

To be sized and implementation discussion in the engineering issues refinement.

@kennylam kennylam self-assigned this Jun 28, 2021
kennylam added a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 28, 2021
@kennylam
fix(masthead): fixes carbon-design-system#6398, fixes carbon-design-s…
de85222 
…ystem#6411, fixes carbon-design-system#6418, fixes carbon-design-system#6419
@kennylam kennylam mentioned this issue Jun 28, 2021
Merged
@kennylam kennylam linked a pull request Jun 28, 2021 that will close this issue
fix(masthead): fixes various masthead styles #6491
Merged
@kennylam kennylam added this to the Sprint 21-13 milestone Jun 30, 2021
@RobertaJHahn RobertaJHahn added this to the Sprint 21-13 milestone Jul 6, 2021
@kodiakhq kodiakhq bot closed this as completed in #6491 Jul 6, 2021
kodiakhq bot pushed a commit that referenced this issue Jul 6, 2021
@kennylam
fix(masthead): fixes various masthead styles (#6491)
560ba34 
### Related Ticket(s)

#6398 
#6399 
#6403 
#6404 
#6410 
#6411 
#6418 
#6419 


### Description

This fixes various styling issues for the `masthead` component in both React and web components.

### Changelog

**Changed**

- update search typeahead hover token to `$hover-ui` #6398
- update profile button width to `48px` #6399
- update left/right padding in masthead nav items to `16px` #6403
- update IBM logo focus #6404
- update masthead nav dropdown items background color to `$ui-background` #6410
- update `L1` platform name selected styles #6411
- `L1` platform name remains visible in all breakpoints #6418
- update spacing between `L1` platform name and navigation items #6419


<!-- 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: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "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

@kennylam kennylam

Labels
dev Needs some dev work Feature request A new adopter requested feature package: styles Work necessary for the Carbon for IBM.com styles package priority: medium
Projects
None yet
Milestone
Sprint 21-13
Development

Successfully merging a pull request may close this issue.

fix(masthead): fixes various masthead styles kennylam/carbon-for-ibm-dotcom
9 participants
@kennylam @jeffchew @shixiedesign @ljcarot @IgnacioBecerra @guilhermelMoraes @JennySanchez @oliviaflory @RobertaJHahn