fix(FormStatus): fix stretch when used in Dropdown and Autocomplete

dnbexperience · Oct 7, 2022 · 762c795 · 762c795
1 parent 26aaaa5
commit 762c795
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 5 deletions.
diff --git a/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -2380,7 +2380,6 @@ legend.dnb-form-label {
   .dnb-dropdown__inner {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;
@@ -2834,7 +2833,6 @@ legend.dnb-form-label {
   .dnb-autocomplete__inner {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;

diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss
@@ -25,7 +25,6 @@
   &__inner {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
 
     margin: 0;
     padding: 0;

diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.js b/packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.js
@@ -12,6 +12,7 @@ import {
   loadScss,
   attachToBody, // in order to use document.activeElement properly
 } from '../../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
 import Component from '../Dropdown'
 import {
   mockImplementationForDirectionObserver,
@@ -200,6 +201,29 @@ describe('Dropdown component', () => {
     ).toBe('true')
   })
 
+  it('shows form-status with correct classes', () => {
+    render(
+      <Component
+        skip_portal
+        no_animation
+        data={mockData}
+        status="status text"
+        status_state="warn"
+        status_props={{ stretch: true }}
+      />
+    )
+
+    expect(
+      Array.from(document.querySelector('.dnb-form-status').classList)
+    ).toEqual([
+      'dnb-form-status',
+      'dnb-form-status--warn',
+      'dnb-form-status__size--default',
+      'dnb-form-status--stretch',
+      'dnb-form-status--has-content',
+    ])
+  })
+
   it('will stay open when keep_open and a selection is made', () => {
     const on_change = jest.fn()
     const Comp = mount(

diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -2142,7 +2142,6 @@ legend.dnb-form-label {
   .dnb-dropdown__inner {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
     margin: 0;
     padding: 0;
     width: auto;

diff --git a/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss
@@ -25,7 +25,6 @@
   &__inner {
     display: inline-flex;
     flex-direction: column;
-    align-items: flex-start;
 
     margin: 0;
     padding: 0;

diff --git a/packages/dnb-eufemia/src/components/input/__tests__/Input.test.js b/packages/dnb-eufemia/src/components/input/__tests__/Input.test.js
@@ -11,6 +11,7 @@ import {
   axeComponent,
   loadScss,
 } from '../../../core/jest/jestSetup'
+import { render } from '@testing-library/react'
 import Component from '../Input'
 import { format } from '../../number-format/NumberUtils'
 
@@ -329,6 +330,27 @@ describe('Input component', () => {
     expect(Comp.find('.dnb-form-status__text').text()).toBe('status')
   })
 
+  it('shows form-status with correct classes', () => {
+    render(
+      <Component
+        value="value"
+        status="status text"
+        status_state="warn"
+        status_props={{ stretch: true }}
+      />
+    )
+
+    expect(
+      Array.from(document.querySelector('.dnb-form-status').classList)
+    ).toEqual([
+      'dnb-form-status',
+      'dnb-form-status--warn',
+      'dnb-form-status__size--default',
+      'dnb-form-status--stretch',
+      'dnb-form-status--has-content',
+    ])
+  })
+
   it('has a disabled attribute, once we set disabled to true', () => {
     const Comp = mount(<Component />)
     Comp.setProps({