fix: form grid aligns items vertically to the top

[sKudum]

Related Issue

Closes #2262

Description

BREAKING CHANGE:
Added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.

Form Grid aligns items vertically to the center when according to the guideline it should align to the top.

When you have more than one column and the number of the fields is not equal for each column fields are aligned to the middle instead of to the top:

According to the guideline it should be aligned to the top:

Screenshots

Before:

After:

Please check whether the PR fulfills the following requirements

1. The output matches the design specs

• All values are in rem
• Text elements follow the truncation rules
• hover state of the element follow design spec
• focus state of the element follow design spec
• active state of the element follow design spec
• selected state of the element follow design spec
• selected hover state of the element follow design spec
• pressed state of the element follow design spec
• Responsiveness rules - the component has modifier classes for all breakpoints
• Includes Compact/Cosy/Tablet design
• RTL support

2. The code follows fundamental-styles code standards and style

• only one top level fd-* class is used in the file
• BEM naming convention is used
• Mixins are used for repeatable code (fd-rtl, fd-ellipsis, fd-flex, fd-selected, fd-focus, ect.)
• A11y support - keyboard support, screenreader support, proper ARIA attributes, etc.
• fd-reset() mixin is applied to all elements
• Variables are used, if some value is used more than twice.
• Checked if current components can be reused, instead of having new code.

3. Testing

• tested Storybook examples with "CSS Resources" normalize option
• tested Storybook examples with "CSS Resources" unnormalize option
• Verified all styles in IE11
• Updated tests
• last commit message should have [ci visual] so it can trigger chromatic visual regression (e.g. test: run chromatic visual regression [ci visual])

4. Documentation

• Storybook documentation has been created/updated
• Breaking Changes wiki has been updated in case of breaking changes.

[netlify]

✔️ Deploy Preview for fundamental-styles ready!

🔨 Explore the source changes: 1991ceb

🔍 Inspect the deploy log: https://app.netlify.com/sites/fundamental-styles/deploys/60bf3a1c2881c60007c4ffe1

😎 Browse the preview: https://deploy-preview-2371--fundamental-styles.netlify.app/iframe

[InnaAtanasova]

@sKudum this change is introducing another bug. Now the label and the input are not aligned vertically.
Before:

Now:

[InnaAtanasova]

baseline is not centering vertically the label and the input field:

[sKudum]

baseline is not centering vertically the label and the input field:

Hi @InnaAtanasova ,
When explored came to know that for horizontal and compact line-hight are causing issues with alignment of label with elements, To overcome it created a modifiers for both of them with basic heights.
Class and examples are updated accordingly with details.

Please let me know if this approach is acceptable or not, If not then please let me know the suggested approach.

Thank You

[InnaAtanasova]

@sKudum I think you need to update the images for the tests. Some of them show the label not aligned in the middle. I think it's from the prev commit. You can see the screenshots I denied.

[sKudum]

@sKudum I think you need to update the images for the tests. Some of them show the label not aligned in the middle. I think it's from the prev commit. You can see the screenshots I denied.

Hi @InnaAtanasova ,

As per observation and doing reliazed we don't need to add form-label--horizontal or form-label--compact classes instead added fd-row--top class to fix this issue by which we can avoid breaking any changes. We can remove breaking change from this PR.

Please let me know your view on it.Will update accordingly.

[InnaAtanasova]

@sKudum I think you need to update the images for the tests. Some of them show the label not aligned in the middle. I think it's from the prev commit. You can see the screenshots I denied.

Hi @InnaAtanasova ,

As per observation and doing reliazed we don't need to add form-label--horizontal or form-label--compact classes instead added fd-row--top class to fix this issue by which we can avoid breaking any changes. We can remove breaking change from this PR.

Please let me know your view on it.Will update accordingly.

It's def a better solution. Thanks for digging more. You still need to add the Breaking changes, tho. It's a new modifier class that needs to be reflected in the implementation libraries.

[sKudum]

@sKudum I think you need to update the images for the tests. Some of them show the label not aligned in the middle. I think it's from the prev commit. You can see the screenshots I denied.

Hi @InnaAtanasova ,
As per observation and doing reliazed we don't need to add form-label--horizontal or form-label--compact classes instead added fd-row--top class to fix this issue by which we can avoid breaking any changes. We can remove breaking change from this PR.
Please let me know your view on it.Will update accordingly.

It's def a better solution. Thanks for digging more. You still need to add the Breaking changes, tho. It's a new modifier class that needs to be reflected in the implementation libraries.

Hi @InnaAtanasova , Updated breaking change information.