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
268 stars 156 forks source link

[Masthead v2.0.0]: Apply the new design specs/token changes to header bar for all breakpoints #9210

Closed proeung closed 2 years ago

proeung commented 2 years ago

Description

Additional information

Design Specs

Desktop reusable pieces desktop@1x

Acceptance criteria

oliviaflory commented 2 years ago

@proeung The old Cloud specs that are located in this box folder, show a different type style than was actually implemented.

For this first round, we agreed to keep the L0 at body-short-02

I believe nothing has changed within the items outlined in this issue:

Edit

The only difference I have found is at the small breakpoint the Cluster name will be hidden in L0 and will only be present within the hamburger menu!

proeung commented 2 years ago

@oliviaflory Thanks for taking a look at this issue. There are a couple of things I want to confirm before we decide to close out this issue or adjust the description based on what needed to be changed. cc:

  1. Looking at the current specs, I see that the menu items should be set to body-short-01 (see link and attachment), however, the current Cloud Masthead is using body-short-02. We certainly adjust this to body-short-01 easily for this round, if this is something that you and the design team would like to have. It shouldn't be an issue at all to make this switch since we're working off from the <dds-cloud-masthead-container> component.

The only difference I have found is at the small breakpoint the Cluster name will be hidden in L0 and will only be present within the hamburger menu!

  1. Can you send me the link to the Figma layer with this change? Currently, for the Cloud Masthead, we have the Cluster name/Platform name visible on all breakpoints within the header bar.

  2. Looking at the current design for both the Masthead v2 and Cloud, the optional CTA will need to be adjusted to use the ghost button style (see link). I think this adjustment can be wrapped into this issue or this one (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9211).

JaniceChristineM commented 2 years ago

@proeung -

  1. The adjustment to body-short-01 is the future state with the update to the L1 so that everything is consistent.
  2. Based on my understanding, the cluster / ecosystem / platform name should be hidden within the header bar to make space for the optional items within the utility area of the navigation. Here is a link: https://www.figma.com/file/35JfN0Sg4ltIIjM7jBDKMk/Navigation?node-id=2522%3A147565 that illustrates this.
  3. Yes, the optional CTA will be updated to the ghost button style.

I am working on updates to the file in the background to use the new specs since most of the frames are imports from previous sketch files.

oliviaflory commented 2 years ago

@proeung One thing we need to take into consideration after the Navigation Stakeholder and Dev call today and hearing about the plan to have the masthead be v2 and use Carbon v11, is that all of the specs are aligned to the Carbon v10 color and type tokens.

There is documentation about how to map the color tokens and type tokens in the v11 documentation, but it would be helpful to know the developers timeline for moving from v10 to v11.

proeung commented 2 years ago

@oliviaflory Great point and thanks for bringing this up! For the October 10th launch date of the Masthead L0, we're not planning on pulling in the Carbon v11 upgrade, since this is a major release that requires a significant amount of updating/migration on the code level to align with the new tokens.

Based on my conversation with @kennylam we're going to be merging C4IBM v2 changes into the feat/masthead-v2 once we have resolved any bugs/issues and this work would mostly come during Q4 or early next year. Overall, it's still good for all of the devs to be aware of this imminent change.

@JaniceChristineM Thanks for getting back to me. We'll keep a note that the adjustment to use body-short-01 for the menu items will be part of the update/rollout of the L1 nav. I'll create a new issue for that so that we have something to track, but let me know if there are other treatments we need to account for as part of the secondary rollout/update.

cc: @kjwhitla @andy-blum @jkaeser