docs(spec): add breadcrumb spec

[khamudom]

Description

The file has specs for fast-breadcrumb and fast-breadcrumb-item

Motivation & context

Issue type checklist

• Chore: A change that does not impact distributed packages.
• Bug fix: A change that fixes an issue, link to the issue above.
• New feature: A change that adds functionality.

Is this a breaking change?

• This change causes current functionality to break.

Adding or modifying component(s) in @microsoft/fast-components checklist

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

Process & policy checklist

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

[chrisdholt]

I think we need to dig into the implementation a bit more and understand the value of breadcrumb item. Aside from being able to easily provide a separator within it, it seems to just wrap the anchor that would serve as the primary visual here. I'd like to see if we can simplify this API a bit.

[EisenbergEffect]

@khamudom and I worked through a lot of options and there was definitely a difficulty in dealing with getting to right structure and incorporating the separator. It seems like the only way to get the separator is to have a wrapper element to render it because there's no way to wrap individual slotted elements.

As I was reading the comments I did come up with a new idea though. Caveat: it's dependent on the new work in fast-element and the proposed new FoundationElement base class. With the new base class, all of our components would have a template property to allow for dynamically swapping the template of an element. With that in place, we could do something really interesting...we could have the breadcrumb component grab the template of each of its children, and then create a new template that wraps the current template so that it can apply the configured separator. It can then assign the new composed template back to the anchor instances. What do you all think of that idea?

[chrisdholt]

@EisenbergEffect I was rolling around something like that in my head but wasn’t sure how to reconcile with composability. I think that would be preferred here and a welcome addition. It’s worth waiting for that work in my opinion.

[EisenbergEffect]

There are a few more tricks to it since the child anchors would not be connected when the breadcrumbs connected callback fires. So, the child templates wouldn't be in place yet to wrap. I've got a couple of solutions in mind to it and will keep thinking about it a bit more. It might be worth introducing "template decorators" as an official concept for things like this and have some standard way of doing it. Need to think about it a bit more.

[radium-v]

Would css counter styles work for the separators?

[EisenbergEffect]

@radium-v I'm not sure. It probably depends on how flexible we want to make the separator. What if someone has a custom SVG, for example, do we want to support that or just a basic character?

[radium-v]

@EisenbergEffect my bad, I was thinking about list-style properties which do allow for images. Interestingly, the breadcrumb example linked in the README uses empty ::before pseudo-elements to avoid excessive verbosity with screen readers.

[EisenbergEffect]

Is it possible to apply a list style to something that isn't actually an li? If we give it an aria listitem role, would that styling work? I'd certainly prefer that type of solution if possible.

[khamudom]

Updated the fast-breadcrumb-item. instead of having an empty slot, added am anchor as a default control. This cleans up the html, it avoids having to add another control inside fast-breadcrumb-item.