Add FormLayout context awareness to Button

[adamkudrna]

Add FormLayout context awareness to Button:

Summary

• Button now detects FormLayoutContext and applies isRootInFormLayout
  (justify-self: start) to prevent full-width stretching in both vertical
  and horizontal layouts
• In horizontal FormLayout, isRootLayoutHorizontal places the button in
  the field column (grid-column-start: 2) above the md breakpoint,
  aligning it with adjacent form fields
• Adds ButtonForFormLayoutTests story component and formLayout visual
  test suite mirroring the pattern from TextField
• Updates FormLayout README to document Button as a supported component
  and moves the full-form example to a more prominent place near the top

[adamkudrna]

👉 Thorough test coverage of Button behavior in the FormLayout context added in #699.

[mbohal]

I think we should place two Buttons here, so that the snapshots would actually differ somehow.

See:

react-ui/src/components/TextField/__tests__/TextField.story.tsx

Line 61 in 3bec7f4

<TextField

[adamkudrna]

The snapshots will remain identical within FormLayoutContext, unless they are placed into a real <FormLayout> with CSS grid. This update only affects the placement of the Button within the grid, it does not alter the Button itself.

[mbohal]

The snapshots will remain identical within FormLayoutContext, unless they are placed into a real with CSS grid

I see.

My suggestion is wrong, but the problem is still there. We have a test that does not really test anything as the snapshots for horizontal and vertical layouts are the same.

I see as possible solutions:

1. Add other elements that will make the difference visible
2. Use non visual test to validate correct CSS classes
3. ???

I think I like 1) more then 2).

[adamkudrna]

OK, here it is.