Adjust breadcrumb appearance

[raimund-schluessler]

First step to fix #2410.
The breadcrumb now uses ChevronRight as a separator and has a background as hover feedback.

For a live example, please have a look at the docs:
https://deploy-preview-2411--nextcloud-vue-components.netlify.app/#/Components/Breadcrumbs?id=breadcrumbs-1

I had to rename the component class to vue-crumb since the server CSS kept interfering. If we want to use crumb instead, we will have to explicitly overwrite all interfering server rules.

Still todo see #2410 (comment)

[skjnldsv]

Looks great!! 🚀

[nimishavijay]

Looks so much better! Only 2 tiny suggestions regarding colour:

• in the normal state instead of --color-main-text with 0.7 opacity for the text we could use --color-text-maxcontrast with opacity 1
• in hovered state we could use --color-main-text for the text with opacity 1 so that there is more difference between the normal and hovered state

What do you think?

[raimund-schluessler]

I don't mind. I just tried to resemble the text color currently used in the breadcrumbs, where we have three states: normal, hovered and focused.

• in the normal state instead of --color-main-text with 0.7 opacity for the text we could use --color-text-maxcontrast with opacity 1

The normal (not hovered, not focuses) uses opacity 0.5 with --color-main-text at the moment. Opacity 0.7 is for hover.

• in hovered state we could use --color-main-text for the text with opacity 1 so that there is more difference between the normal and hovered state

Hovered is opacity 0.7. Focused uses opacity 1.

So if we use opacity 1 for hovering, we need another way to indicate focus, or make focus and hover look the same. What do you prefer?

[raimund-schluessler]

@nimishavijay I hope you don't mind that I merge this now, but it makes it a lot easier to implement the other improvements. I would propose that you do a follow-up PR with your design adjustments. I am fine with whatever @nextcloud/designers agree on.

[jancborchardt]

So if we use opacity 1 for hovering, we need another way to indicate focus, or make focus and hover look the same. What do you prefer?

Yup, would be best if focus and hover look the same. :) And then as @nimishavijay described, not using opacity as modifier for the text color but --color-text-maxcontrast and --color-main-text.

And hey, looks very nice, thank you so much! :)

[marcoambrosini]

Could we use the button component in the mid run? If we'd do that we'd get the outline focus from it only when navigating with the keyboard and no changes with the mouse.

[raimund-schluessler]

Could we use the button component in the mid run? If we'd do that we'd get the outline focus from it only when navigating with the keyboard and no changes with the mouse.

I would strongly advise against that.

• it would add a lot of complexity, because we would need to include the Button in the Breadcrumb component and have an Actions menu inside. I don't even know if that would work.
• it is syntactically the wrong element. The breadcrumbs are for navigation, so they need to be links/as. Wrapping the button in a link would work, but doesn't make sense, in my opinion.
• the button component would need adjustment, since the icon is on the wrong side (left for the button, needs to be right here)

I would propose to adjust the Breadcrumb instead to show the desired design. Should be a lot simpler than using Button for it.