Fluentui: Callout's positioning logic to control some of its fluent styles

[Vitalius1]

Describe the feature that you would like added

As part of adding fluent styles to some of the components using Callout to render its content like Dropdown, ContextualMenu, ComboBox, Tooltip, I ran into some issues because of fluent styles changing the drop shadow around the edges and introducing rounded corners on the Callout.

The first issue I got is rendering with a beak. Before the box-shadow was equal on all 4 edges. It was easy to apply the same shadow on the beak by using inherit.
https://github.com/OfficeDev/office-ui-fabric-react/blob/1eb461a6c344e4f322c5d3f32ffe9a752399a91b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts#L55-L64

Now the shadow is different on all edges. Top being 'shortest', left and right are equal, and the bottom is now the 'longest'. According to design redlines, the beak should have on both it's visible edges a shadow equal to one of the edges it's rendered on, so the inherit pattern is not working with fluent styles because the beak is rotated 45deg and depending on where it's rendered it looks like it disrupts the shadow of the edge with an unequal shadow on its visible edges. It's very subtle and may never be noticed but still, an issue that sores my eyes :smile:.

Having some logic built into each component or the Callout (needs investigation where should the logic leave) that is passed to styles we could have some conditional styles that will give us the desired result every time. I already did something similar in Dropdown for controlling rounded corners (which is the second issue with fluent styles for components using Callout).
https://github.com/OfficeDev/office-ui-fabric-react/blob/1eb461a6c344e4f322c5d3f32ffe9a752399a91b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx#L587-L591

Callout already has the prop to allow this here, so I am assuming it's a matter of just using it where necessary. It should not affect the current default styles as we just provide the hooks to be used in the fluent theme. When fluent theme becomes the default then it would be nice to already have them available within the component.

What component or utility would this be added to
Callout or any other component using it. I believe it's from case to case, depending what issue are you trying to achieve. The beak shadow should probably leave in the Callout, but the rounded corners in each component as it's different for all of them.

Have you discussed this feature with our team, and if so, who
@mikewheaton and I had this issue with the beak while reviewing #7158 and decided to have an issue to track this.

Additional context/screenshots

[KevinTCoughlin]

@Vitalius1 excellent suggestion for Callout w/ detailed notes 👏 -- thank you!

@micahgodbolt this may be a larger task than Shield can tackle, mainly due to what should be tested with the change. Looking for advice on how to triage this.

[Vitalius1]

I agree that this is not a Shield issue as it would take some time in making sure each of the components, who would take advantage of this feature, is properly audited on what info it needs to know from the Callout for all its possible rendering scenarios. Maybe even split this for each component in part.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[Vitalius1]

Removing the label no-recent-activity to keep the issue open 😄

[micahgodbolt]

should we consider using something other than a rotated div as the beak? what about an inline SVG?

[Vitalius1]

Using an inline SVG will not solve the issue of the different drop-shadows in fluent theme. We would still need to know on what side the beak is attached to know with what box-shadow to style it.