Experiment: Add two-columns layout option for DataForm components - #74662

What?

This is a WIP experiment, not ready for review.

This PR adds a new two-columns layout option for DataForm components. The layout displays form field labels and descriptions on the left side, with form controls contained in a card on the right side.

Why?

The two-columns layout provides a more structured and visually organized way to display form fields, particularly useful for forms with longer labels or descriptions. This layout option gives developers more flexibility in how they present form data to users.

How?

The implementation consists of three main parts:

1. Type Definitions (packages/dataviews/src/types/dataform.ts):

   • Added 'two-columns' to the LayoutType union type
   • Created TwoColumnsLayout and NormalizedTwoColumnsLayout type definitions
   • Extended the Layout and NormalizedLayout union types to include the new layout

2. Component Implementation (packages/dataviews/src/components/dataform-layouts/two-columns/):

   • Created FormTwoColumnsField component that renders fields in a two-column layout
   • Left column displays the field label (as a heading) and description
   • Right column contains a Card component with the form controls
   • Supports both nested field children and individual field rendering
   • Added corresponding SCSS styles for layout and spacing

3. Integration:

   • Registered the new layout in packages/dataviews/src/components/dataform-layouts/index.tsx
   • Added normalization logic in packages/dataviews/src/components/dataform-layouts/normalize-form.ts
   • Created a Storybook story demonstrating the layout with various field types

Testing Instructions

1. Navigate to Storybook and open the DataForm stories
2. Find and open the DataForm > Layout Two Columns story
3. Verify that form fields are displayed in a two-column layout:
   • Left column shows field labels (as headings) and descriptions
   • Right column shows form controls within a card
4. Test with different field types (boolean, text, toggleGroup, radio) to ensure they render correctly
5. Verify that the layout is responsive and maintains proper spacing
6. Test form interactions (changing values, validation) to ensure functionality is preserved

Testing Instructions for Keyboard

1. Navigate to the Storybook story using keyboard navigation
2. Use Tab key to navigate through form fields
3. Verify that focus indicators are visible and properly positioned
4. Test that all form controls (checkboxes, radio buttons, toggle groups) are keyboard accessible
5. Ensure that screen readers can properly announce field labels and descriptions
6. Verify that the visual layout doesn't interfere with keyboard navigation flow

Screenshots or screencast