Anchored region

[mollykreis]

Pull Request

🤨 Rationale

Create nimble-anchored-region component.

👩‍💻 Implementation

Created a light-weight wrapper around the FAST anchored-region.

🧪 Testing

• Added unit tests for the nimble-anchored-region being returned from tagFor(FoundationAnchoredRegion) and the element being able to be constructed
• Added matrix tests for the component
  • Note: for technical reasons and because nothing in the anchored region is theme aware, I did not create matrix stories for each theme
• Added storybook story for the component

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[rajsite]

Looks like the select and the drawer are also configuring z-index. Do we know how these are impacting eachother? https://cs.github.com/ni/nimble?q=z-index

[mollykreis]

I set this to 1 to match the select, and I tested that it worked correctly when put inside of a drawer. However, I just tested the menu button within a grid, and I realized that I need to increase the z-index because the header row in the grid has a z-index of 200.

[mollykreis]

I'm changing this to 1000. I tested that the menu button looked correct in SystemLink when it was in a grid's toolbar, in a grid's context menu, in the header, in a drawer, and on a generic page.

[rajsite]

Where is 1000 coming from? Is that because it's one more than the drawer? Or it's arbitrarily higher than the 200 z-index in the grid?

Unfortunately FAST doesn't have a system for managing z-index values we can copy.

Could we either in this PR or a follow-on (if a follow-on we should make an issue to track it) make a global enum of the different z-index states we use in our styles (like low, medium, high or something) and can include some docs on how the value is derived (ie we chose 1000 because it's larger than the external grid we have compatibility with)?

Maybe we can eventually have some tokens exported that external consumers can use to align z-indexes with nimble. (or even better longer term we can use the dialog element, etc to do the layering for us without the need for z-index)

[mollykreis]

I picked something that was arbitrarily higher than the 200 z-index in the grid. We don't need it to be higher than the 999 set on the drawer.

I'll create an issue for making a global enum of z-indexes and address it in separate PR. I'm not sure I see exactly what your vision is, so I'd rather have that discussion on a different PR and not delay this one being merged.

[mollykreis]

Created issue: #539