search

RedHat-UX / red-hat-design-system

Red Hat's Design System
https://ux.redhat.com
MIT License
85 stars 18 forks source link

[feat] `<rh-breadcrumbs>` element #1458

Open markcaron opened 5 months ago

markcaron commented 5 months ago

We need a Breadcrumb component for use across applications and websites.

The good news is that it seems we have a very closely aligned pattern across PatternFly and our web properties already. We will need to have a design spec created for documentation and made available in Figma.

Steps

Resources

Breadcrumb best practice

From WAI's breadcrumb pattern:

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../../..">
        WAI-ARIA Authoring Practices Guide (APG)
      </a>
    </li>
    <li>
      <a href="../../../">
        Patterns
      </a>
    </li>
    <li>
      <a href="../../">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>
markcaron commented 5 months ago

Worth discussing: should we have a standard version and one with lighter gray chevrons (to lessen the visual noise on long form content)?

PF's design:

image

Use on the Portal:

image
adamjohnson commented 2 months ago

Figma Design Spec for <rh-breadcrumbs> is available.

wesleymiles commented 2 months ago

Wondering if this one will have guidance for mobile. For example, truncating works when there aren't too many levels like resource pages on WWW, but when there are more levels it would be useful to keep them and maybe have them wrap? (see screenshot) Screenshot 15

Or even if we should keep them on mobile or not. Customer portal drops theirs.

adamjohnson commented 2 months ago

@coreyvickery: do you have guidance for breadcrumbs on mobile?

Generally, I think having the text wrap is standard for most orgs.

coreyvickery commented 2 months ago

@coreyvickery: do you have guidance for breadcrumbs on mobile?

Generally, I think having the text wrap is standard for most orgs.

@adamjohnson I would expect the > icon and text to wrap. These templates truncate text which I do not think is helpful. I would prefer it looked like:

Large viewports:

Topics > Understanding cloud computing > What are cloud services?

Small viewports:

Topics > Understanding cloud computing >

What are cloud services?

Even smaller viewports:

Topics > Understanding cloud

computing > What are cloud

services?

I would avoid having the > icon at the beginning of a line if we can.

Let me know if you need further guidance like spacing!

coreyvickery commented 2 months ago

@adamjohnson Or we could try another approach similar to IBM Carbon where they are breaking each step at a given container size.

What do you think would be best?

adamjohnson commented 2 months ago

Or we could try another approach similar to IBM Carbon where they are breaking each step at a given container size.

Wrapping is fine.

I would avoid having the > icon at the beginning of a line if we can.

Can do.

Note: the design spec truncates the final breadcrumb item if it's over 27 characters.

Home > About > Longer Breadcrumb Item Righ...

Would you want "Home"/"About" to truncate if they are longer as well?

coreyvickery commented 2 months ago

@adamjohnson No, I think the previous steps should be visible.

I am fine with the last step being truncated because the headline is literally right below.

Screenshot 2024-04-19 at 10 10 01 AM

Instead of the above, I would think it would look like this:

Topics > Application modernization > What is Java application moderniz ...

Maybe two lines max and then truncation no matter what.

wesleymiles commented 2 months ago

Maybe two lines max and then truncation no matter what.

for longer paths, i wouldn't want to only limit them to two lines

also, if it hasn't been added yet... would be nice to have guidance around how far back to have the path go, for example all the way to "home," and placement / alignment of breadcrumbs on the page -- they're all over the place now

markcaron commented 2 months ago

We could approach it like Google Drive's breadcrumbs. They use text-overflow: ellipsis on the links to visually truncate rather than actually truncate:

image

And when it nests too deep, it uses a single ellipses to represent more than one level. Clicking the ellipses takes you to whichever "directory" / "link" is the deeper child.

image
adamjohnson commented 2 months ago

WIP Deploy Preview links:

I wanted to put these WIP Breadcrumb deploy preview links here so that people can see what this looks like now:

The only truncation happening at the moment is on the current page when it's below 992px. The breadcrumbs <ol> will wrap beyond two lines. Users can modify margin, padding, background colors etc. as needed since this component uses lightdom.

Other libraries:

Here's breadcrumb component examples from other WC libraries that don't truncate and just wrap text:

Looking at Mark's examples (above), that pattern is interesting from a design and engineering point of view; however, I'm not sure how useful that is to the user since, at smaller viewports, you only get 1-2 letters of a word/words.

Atlassian has an interesting take on breadcrumbs, which is somewhat similar to Patternfly. I personally like Atlassian's implementation better, but YMMV.

Proposed solutions

With this in mind, here's the solutions that have been proposed:

  1. Wrap, little/no truncation
  2. Wrap, truncate longer links (not just the last link)
  3. Limit breadcrumbs to two lines, fully truncate

My vote would be to go with option one or two, but am open to other ideas.

coreyvickery commented 2 months ago

@adamjohnson @wesleymiles Thanks for your input, we can show more lines on mobile.

Funny about that Atlassian link, I was typing this last night.

What is the longest path you have seen? Would we ever expect to see something like six links or something? Should we set a link number limit before truncation? Something like this:

Home > Link 1 > ... > Link 5 > Link 6

Or even truncate the Home link:

... > Link 4 > Link 5 > Link 6

wesleymiles commented 2 months ago

What is the longest path you have seen?

also like atlassian's solution. could we set auto-collapse based based on the # of lines? or maybe that's what you mean with your proposal #3 @adamjohnson.

coreyvickery commented 2 months ago

@adamjohnson @wesleymiles I'm going to start a separate Figma file to explore creating more design options. I'm really hoping this can be included in the Charmander release.

adamjohnson commented 2 months ago

I'm prototyping the Atlassian solution now. Would love to see what you come up with, Corey.

coreyvickery commented 1 month ago

@adamjohnson Here are some more explorations and specs.

https://www.figma.com/proto/FSkPCjWTWK63QfSnX8rChZ/rh-breadcrumb?page-id=1%3A3&type=design&node-id=1-218&viewport=122%2C139%2C1&t=AmmdkOlWBdRh2fWu-1&scaling=min-zoom

coreyvickery commented 1 month ago

@adamjohnson Very small updates.

Dev Mode link

Light theme

Default variant

Subtle variant

Dark theme

Default variant

Subtle variant

coreyvickery commented 1 month ago

@adamjohnson Hover colors in case you need them.

Light theme

Dark theme

markcaron commented 1 month ago

Looking at the Figma mockup, I'm thinking we should get out an MVP following the "Responsive approach 1".

If we can get "Responsive approach 2" working in the future with a container controller / query, that would be ideal, and we could upgrade to that in a future version.

coreyvickery commented 1 month ago

@adamjohnson How's it going with this?

adamjohnson commented 1 month ago

@adamjohnson How's it going with this?

Check out the DP at https://github.com/RedHat-UX/red-hat-design-system/pull/1535/ 👍

marionnegp commented 3 weeks ago

@coreyvickery (and @adamjohnson if you have time), here's a mock up of the breadcrumb docs. Let me know if you see anything that should be included, removed, or edited!