feat(bal-field): Introduce 'horizontal' prop for aligning label and i…

…nput side by side in Field component, with message displayed below

.changeset/slow-parrots-argue.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': minor
+---
+
+Introduce 'horizontal' prop for aligning label and input side by side in Field component, with message displayed below.

packages/components/src/components.d.ts

@@ -969,7 +969,7 @@ export namespace Components {
         /**
           * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
          */
-        "horizontalAlignment"?: boolean;
+        "horizontal"?: boolean;
         /**
           * If `true` the component gets a invalid red style.
          */
@@ -6068,7 +6068,7 @@ declare namespace LocalJSX {
         /**
           * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
          */
-        "horizontalAlignment"?: boolean;
+        "horizontal"?: boolean;
         /**
           * If `true` the component gets a invalid red style.
          */

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

@@ -46,7 +46,7 @@ export class Field implements ComponentInterface, BalMutationObserver {
   /**
    * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
    */
-  @Prop() horizontalAlignment?: boolean = false
+  @Prop() horizontal?: boolean = false
 
   /**
    * If `true` the component gets a invalid red style.
@@ -201,7 +201,7 @@ export class Field implements ComponentInterface, BalMutationObserver {
           'bal-field': true,
           'field': true,
           'bal-field--invalid': this.invalid === true,
-          'bal-field--horizontal-aligned': this.horizontalAlignment === true,
+          'bal-field--horizontal-aligned': this.horizontal === true,
         }}
       >
         <slot></slot>

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

@@ -6,5 +6,5 @@
 :root
   //
   // label
-  --bal-field-label-horizontal-width: 33%
+  --bal-field-label-horizontal-width: 33.3333%
   --bal-field-label-column-gap: .5rem

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

@@ -81,8 +81,8 @@
             <bal-field-message color="hint">Field Message</bal-field-message>
           </bal-field>
         </section>
-        <section data-testid="horizontal-alignment">
-          <bal-field horizontal-alignment>
+        <section data-testid="horizontal">
+          <bal-field horizontal>
             <bal-field-label>Firstname</bal-field-label>
             <bal-field-control>
               <bal-input placeholder="Basic"></bal-input>
@@ -91,8 +91,18 @@
           </bal-field>
         </section>
         <br />
-        <section data-testid="horizontal-alignment-with-hint">
-          <bal-field expanded="true" class="mt-x-large" horizontal-alignment>
+        <section data-testid="horizontal-long-label">
+          <bal-field horizontal>
+            <bal-field-label>Firstname (The name given to you at birth or the name you commonly use in official documents, such as your legal first name. Please ensure accuracy for administrative purposes.)</bal-field-label>
+            <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>
+        <br />
+        <section data-testid="horizontal-with-hint">
+          <bal-field expanded="true" class="mt-x-large" horizontal>
             <bal-field-label>Firstname</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>

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

@@ -10,8 +10,9 @@ 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('horizontal-alignment').compareSnapshot('horizontal-alignment-desktop')
-    cy.getByTestId('horizontal-alignment-with-hint').compareSnapshot('horizontal-alignment-with-hint-desktop')
+    cy.getByTestId('horizontal').compareSnapshot('horizontal-desktop')
+    cy.getByTestId('horizontal-long-label').compareSnapshot('horizontal-long-label-desktop')
+    cy.getByTestId('horizontal-with-hint').compareSnapshot('horizontal-with-hint-desktop')
 
     cy.platform('tablet')
     cy.getByTestId('basic').compareSnapshot('field-basic-tablet')
@@ -21,8 +22,9 @@ 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('horizontal-alignment').compareSnapshot('horizontal-alignment-tablet')
-    cy.getByTestId('horizontal-alignment-with-hint').compareSnapshot('horizontal-alignment-with-hint-tablet')
+    cy.getByTestId('horizontal').compareSnapshot('horizontal-tablet')
+    cy.getByTestId('horizontal-long-label').compareSnapshot('horizontal-long-label-tablet')
+    cy.getByTestId('horizontal-with-hint').compareSnapshot('horizontal-with-hint-tablet')
 
     cy.platform('mobile')
     cy.getByTestId('basic').compareSnapshot('field-basic-mobile')
@@ -32,7 +34,8 @@ 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('horizontal-alignment').compareSnapshot('horizontal-alignment-mobile')
-    cy.getByTestId('horizontal-alignment-with-hint').compareSnapshot('horizontal-alignment-with-hint-mobile')
+    cy.getByTestId('horizontal').compareSnapshot('horizontal-mobile')
+    cy.getByTestId('horizontal-long-label').compareSnapshot('horizontal-long-label-mobile')
+    cy.getByTestId('horizontal-with-hint').compareSnapshot('horizontal-with-hint-mobile')
   })
 })