Page Header enhancement request - no overflow and no current page

[strout18]

NOTE: The raised issues was resolved, there are outstanding enhancement requests to lose the overflow and disable the current page breadccrumb.

What package(s) are you using?

• [x] Cloud & Cognitive
• [ ] Legacy/CDAI
• [ ] Legacy/Security

Detailed description

Using the breadcrumbs property of the PageHeader component returns two lines of breadcrumbs and a back arrow.

Is this issue related to a specific component?

PageHeader

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

Expected one row of breadcrumbs, ideally without ellipsis and current page breadcrumbs. Got two rows, both with ellipsis and current page breadcrumbs.

What browser are you working in?

Chrome

What version of the @carbon/ibm-cloud-cognitive packge are you using?

0.62.0

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

IBM CloudPak for WAIOps

Steps to reproduce the issue

1. Create pageheader component with breadcrumb attribute.
2. Display on page.

Additional information

Code:

<PageHeader
          title={definitionName}
          breadcrumbs={[
            {href: `/aiops/${tenantid}/aimodels/training`, label: "Manage",
              key: 'bc1'}
          ]}
          breadcrumbOverflowAriaLabel='breadcrumb_overflow'></PageHeader>

Result:

It would also be great if the Manage breadcrumb were the only breadcrumb displayed, since that's the only one that was specified.

[dcwarwick]

@strout18 This sounds very much as though you don't have the CSS loaded. As well as importing and using the React component you need to ensure that the CSS is available and applied in your runtime environment. This will ensure that only the parts of the breadcrumb that you expect to see are visible.

There are several .css files built and included in the /css folder, and you can select the appropriate one according to whether you would like Carbon styles bundled or not, and whether you want minimised CSS. If you add one of these in to your deployed bundle it should provide all the styles necessary for any C&CS components you use. Alternatively, if you want to optimise the build you can import the relevant SCSS files into your own SCSS assembly: there are top-level index.scss files and there are also individual index.scss files in each component directory if you want to pull in just the styles you need. If you need any help or advice getting these working do let me know, here or on the cvs-pal-dev slack channel.

If you think the CSS is applied and you're still seeing rendering problems, it may be useful if you can set the code up somewhere where we can see it and take a look in order to figure out what is happening.

I hope this helps.

[strout18]

@dcwarwick Thank you! I loaded the CSS manually and the two rows went away. The breadcrumbs now look like this (with the same code as above)...

I was wondering if there was some way to not have the overflow button and just have the breadcrumbs listed out like on the examples for the component documentation. Also, is it possible to disable the default current page breadcrumb? Ideally I'd like the breadcrumbs to just look like this (without the overflow button and the current page breadcrumb).

[andrea-island]

@lee-chase does the design support that? ^

[lee-chase]

@lee-chase does the design support that? ^

The design does not currently support that behaviour. https://pages.github.ibm.com/cdai-design/pal/components/page-header/usage

The currently published design looks a little out of date to me. It does not appear to have been updated with decisions taken by Cameron and I took during implementation.

[dcwarwick]

@strout18 I'm glad that helped!

The overflow button is shown if there is insufficient space for the full breadcrumbs, so if you make your window a little wider you should see the breadcrumbs all listed out.

The page title moves up to become a current-page breadcrumb on scroll, and this is the specified behaviour for the design pattern as you can see at the link above. You could arrange that your page never scrolls, by having your content fill the remaining viewport height and any necessary scrolling occurring within your content, but be aware that if you do that then you will be deviating from the design pattern that is intended to be the common header behaviour for C&CS.

@lee-chase I notice that the breadcrumbs are restricted to 60% of the page header width, even if there is no action bar and no action items. Is that what the design calls for? Or could we allow the breadcrumbs to use the full width when there is no action bar and no action items and thus nothing that will ever need to share that top row with the breadcrumbs?

@andrea-gm Lee is right: there are a lot of details of the page header scrolling action, layout, and overflow behaviours that are not currently shown in the pattern document. It's quite hard to go and check these, as they are spread across various long github discussion threads. Could we ask Cameron to bring the pattern document up to date with those design additions and updates, so that the component we've delivered matches the published pattern?

[lee-chase]

@cameroncalder please review the questions above and indicate whether the design should support features suggested by @strout18

[cameroncalder]

@strout18 Can you post a full-page screenshot? I'd like to further understand the request for this functionality as it seems like a departure from the intended behavior. The purpose is to always provide a means for the user to observe what page they are currently on, whether that be the large page title in the unscrolled state or the appended page title at the end of the breadcrumb in the scrolled/condensed state

Also, is it possible to disable the default current page breadcrumb? Ideally I'd like the breadcrumbs to just look like this (without the overflow button and the current page breadcrumb).

[strout18]

@cameroncalder

Here's a screenshot from our master branch where we don't include a breadcrumb for the current page. I have no control over design, but this is the way we have it now.

[lee-chase]

@cameroncalder @strout18

Is there work likely to be raised as a result of the enhancement requests, or can this issue be marked as closed?

[lee-chase]

Closing as stale.