feat: add flyout wc spec

[SethDonohue]

Description

Adds Flyout Web Component Spec

Motivation & context

FAST needs an Popover component as the Dialog does not currently cover cases where positioning is needed of a focusable floating container to display UI related to what the user is doing.

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]

This will close #3752

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SethDonohue]

Anchored region can do "absolute" or "fixed" positioning. I think we can elaborate on whether we want to present that choice in the api after we get an initial version in, but what do you see the default being? "fixed" breaks out of parent containers more easily but absolute doesn't detach from the anchor as often.

I am still not totally clear on the difference here. What do you think would be better to start with?
I fee like absolute is a good start because a flyout generally is expected to stay next to it's target. Like a tooltip in that way. Thoughts?

After our discussion elsewhere let's go with fixed for now, since it will break out of its parent containers more easily and act more like a document level popup/flyout.

@scomea does this satisfy your question and hold on this PR?

[scomea]

@SethDonohue Yeah, the only thing I'm not clear about is how a user might configure the component to position itself based on available space (ie. below, but if if doesn't fit above)

[SethDonohue]

@SethDonohue Yeah, the only thing I'm not clear about is how a user might configure the component to position itself based on available space (ie. below, but if if doesn't fit above)

@scomea I actually forgot I already added a responsive attribute back in to the Attributes section:
- 'responsive' - boolean, whether or not the positioning is responsive based on available space, defaults to true

To me this says that unless they set responsive to false, the flyout will update it's position based on available space, but that does not mean the user can chose where it goes based on available space, i.e. to the bottom only instead of left or right as well. Is that something we can do with anchored region?

Currently if I set position to top, and have responsive to true (default) then if there is not enough space on top it will move down, but it could also move left or right depending on available space. Do you think this is good enough for the initial version or should we set something up where the user can decide where it may go if it needs to move?

[EisenbergEffect]

This PR is very old now. What is our plan? We should close, move to draft, or get this in soon.

[EisenbergEffect]

One year old this week. /cc @chrisdholt

[chrisdholt]

One year old this week. /cc @chrisdholt

This should be updated to align and leverage the Popover specification from Open-UI: openui/open-ui#355

Lots of research has now been gathered there and there is an editors draft available. We should update our spec accordingly from a naming standpoint as well as look to align the API to the current guidance there. At that point I think we can move ahead with implementation. Ideally, we should ensure we spell out in the spec that our preference is to use Popover when available in browser and fall back to our code implementation when not.

@SethDonohue do you want to rework this based on the above or close and we can look to kick off a new one given the deltas?

[SethDonohue]

Let's have a new one kicked off when ready!