fix(bal-field, bal-hint): ensure proper alignment of field hint by ad… (

#1229)

* fix(bal-field, bal-hint): ensure proper alignment of field hint by adjusting its position to the end of the label text

* chore(): format

* chore(): refactor

* chore(): fix field label margin bottom

* chore(): fix control margin on horizontal field

* chore(): update base images

* chore(): refactor

* chore(): refactor

---------

Co-authored-by: Mladen Planinicic <mladen.planinicic@baloise.ch>
Co-authored-by: mladenplaninicic <mladenplaninicic@users.noreply.github.com>

.changeset/curly-pots-drop.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Ensure proper alignment of field hint by adjusting its position to the end of the label text.

packages/components/src/components/bal-field/bal-field.sass

@@ -7,8 +7,10 @@
   font-family: var(--bal-font-family-text)
 
 +block(field-label)
-  display: inline-block
-  margin-bottom: .25rem
+  display: inline
+
+.bal-field-label ~ .bal-field-control
+  margin-top: .25rem
 
 +block(field-hint)
   display: inline-block
@@ -79,5 +81,8 @@
     .bal-hint
       top: 0
 
-  .bal-field-hint ~ .bal-field-message
+  .bal-field-hint ~ .bal-field-message 
     margin-left: calc(var(--bal-field-label-horizontal-width) + (var(--bal-field-label-column-gap) * 2) + 1.125rem)
+
+  .bal-field-label ~ .bal-field-control
+    margin-top: 0

packages/components/src/components/bal-field/test/bal-field.visual.html

@@ -119,6 +119,21 @@
             <bal-field-message color="danger">Required Field</bal-field-message>
           </bal-field>
         </section>
+        <section data-testid="label-long-with-hint" style="width: 200px">
+          <bal-field>
+            <bal-field-label
+              >This is a very long label to test if the hint will be at the end of the text when it
+              breaks</bal-field-label
+            >
+            <bal-field-hint subject="Spider-Man">
+              Spider-Man is a fictional superhero created by writer-editor Stan Lee and writer-artist Steve Ditko.
+            </bal-field-hint>
+            <bal-field-control>
+              <bal-input placeholder="Basic"></bal-input>
+            </bal-field-control>
+            <bal-field-message color="hint">Field Message</bal-field-message>
+          </bal-field>
+        </section>
       </main>
     </bal-doc-app>
   </body>

test/cypress/e2e/visual/bal-field.visual.cy.ts

@@ -10,6 +10,7 @@ describe('bal-field', () => {
     cy.getByTestId('required').compareSnapshot('field-required-desktop')
     cy.getByTestId('valid').compareSnapshot('field-valid-desktop')
     cy.getByTestId('label-long').compareSnapshot('label-long-desktop')
+    cy.getByTestId('label-long-with-hint').compareSnapshot('label-long-with-hint-desktop')
 
     cy.platform('tablet')
     cy.getByTestId('basic').compareSnapshot('field-basic-tablet')
@@ -19,6 +20,7 @@ describe('bal-field', () => {
     cy.getByTestId('required').compareSnapshot('field-required-tablet')
     cy.getByTestId('valid').compareSnapshot('field-valid-tablet')
     cy.getByTestId('label-long').compareSnapshot('label-long-tablet')
+    cy.getByTestId('label-long-with-hint').compareSnapshot('label-long-with-hint-tablet')
 
     cy.platform('mobile')
     cy.getByTestId('basic').compareSnapshot('field-basic-mobile')
@@ -28,6 +30,7 @@ describe('bal-field', () => {
     cy.getByTestId('required').compareSnapshot('field-required-mobile')
     cy.getByTestId('valid').compareSnapshot('field-valid-mobile')
     cy.getByTestId('label-long').compareSnapshot('label-long-mobile')
+    cy.getByTestId('label-long-with-hint').compareSnapshot('label-long-with-hint-mobile')
   })
 })