feat(): add vertical divider line feature to input-group component fo…

…r clearer element separation
baloise · Dec 6, 2023 · 8adc064 · 8adc064
1 parent 78ce6ed
commit 8adc064
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 0 deletions.
diff --git a/.changeset/hungry-kings-rescue.md b/.changeset/hungry-kings-rescue.md
@@ -0,0 +1,19 @@
+---
+'@baloise/design-system-components': minor
+---
+
+Add vertical divider line feature to input-group component for clearer element separation.
+
+```html
+<bal-input-group>
+  <bal-icon name="call"></bal-icon>
+  <bal-divider layout="vertical"></bal-divider>
+  <bal-select style="max-width: 106px" value="DE">
+    <bal-select-option label="DE" value="DE">DE</bal-select-option>
+    <bal-select-option label="FR" value="FR">FR</bal-select-option>
+    <bal-select-option label="IT" value="IT">IT</bal-select-option>
+  </bal-select>
+  <bal-divider layout="vertical"></bal-divider>
+  <bal-input placeholder="Placeholder"></bal-input>
+</bal-input-group>
+```
diff --git a/docs/stories/components/bal-input-group/bal-input-group.stories.ts b/docs/stories/components/bal-input-group/bal-input-group.stories.ts
@@ -25,11 +25,13 @@ const meta: Meta<Args> = {
 
 <bal-input-group class="mb-normal">
   <bal-icon name="call"></bal-icon>
+  <bal-divider layout="vertical"></bal-divider>
   <bal-select style="max-width: 106px" value="DE">
     <bal-select-option label="DE" value="DE">DE</bal-select-option>
     <bal-select-option label="FR" value="FR">FR</bal-select-option>
     <bal-select-option label="IT" value="IT">IT</bal-select-option>
   </bal-select>
+  <bal-divider layout="vertical"></bal-divider>
   <bal-input placeholder="79 123 45 67"></bal-input>
 </bal-input-group>
 

diff --git a/packages/components/src/components/bal-input-group/bal-input-group.sass b/packages/components/src/components/bal-input-group/bal-input-group.sass
@@ -27,6 +27,7 @@
   .bal-select__control
     border: none
     min-height: 2.75rem
+    padding-right: 0
 
   .bal-select__control__input
     padding-left: 0 !important

diff --git a/packages/components/src/components/bal-input-group/test/bal-input-group.visual.html b/packages/components/src/components/bal-input-group/test/bal-input-group.visual.html
@@ -94,6 +94,20 @@
           </bal-input-group>
         </section>
 
+        <section data-testid="divider">
+          <bal-input-group>
+            <bal-icon name="call"></bal-icon>
+            <bal-divider layout="vertical"></bal-divider>
+            <bal-select style="max-width: 106px" value="DE">
+              <bal-select-option label="DE" value="DE">DE</bal-select-option>
+              <bal-select-option label="FR" value="FR">FR</bal-select-option>
+              <bal-select-option label="IT" value="IT">IT</bal-select-option>
+            </bal-select>
+            <bal-divider layout="vertical"></bal-divider>
+            <bal-input placeholder="Placeholder"></bal-input>
+          </bal-input-group>
+        </section>
+
         <section data-testid="tags">
           <bal-input-group>
             <bal-tag closable>Tag</bal-tag>

diff --git a/test/cypress/e2e/visual/bal-input-group.visual.cy.ts b/test/cypress/e2e/visual/bal-input-group.visual.cy.ts
@@ -30,11 +30,13 @@ describe('bal-input-group', () => {
     cy.getByTestId('phone').compareSnapshot('input-group-phone')
     cy.getByTestId('phone-disabled').compareSnapshot('input-group-phone-disabled')
     cy.getByTestId('phone-invalid').compareSnapshot('input-group-phone-invalid')
+    cy.getByTestId('divider').compareSnapshot('input-group-divider')
 
     cy.platform('mobile')
     cy.getByTestId('phone').compareSnapshot('input-group-phone-mobile')
     cy.getByTestId('phone-disabled').compareSnapshot('input-group-phone-disabled-mobile')
     cy.getByTestId('phone-invalid').compareSnapshot('input-group-phone-invalid-mobile')
+    cy.getByTestId('divider').compareSnapshot('input-group-divider-mobile')
   })
 
   it('tags component', () => {