Clean-up Flex layout align configuration

[rajsite]

🧹 Tech Debt

We had found icons and controls were not aligning property. One workaround was to add the vertical-align: middle property on the button as show here:

nimble/packages/nimble-components/src/patterns/button/styles.ts

Line 37 in 47839b3

See: https://github.com/microsoft/fast/issues/5414

In the FAST issue they found an alternate pattern that just changes flex settings: microsoft/fast#5414 (comment)

We should verify that configuration works and propagate it to our controls where it makes sense. We should also add tests focused on validating inline behavior of the controls (ie inline with text and inline-block images, etc).

[m-akinc]

FAST's approach results in alignment that is inconsistent with native button elements.

FAST's approach (updated stackblitz to latest FAST packages):

Nimble's current approach (setting vertical-align: center on host):

Native button element:

I tried modifying FAST's approach by setting the inner, native button's align-items to something other than baseline, but that results in misaligned buttons (i.e. the original problem):

My conclusion is that we should keep our current approach. I will still create a new Chromatic test for button alignment, though.