From 762c795dce56db5a89725e0350b44ec03c0048fc Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Fri, 7 Oct 2022 15:51:58 +0200
Subject: [PATCH] fix(FormStatus): fix stretch when used in Dropdown and
 Autocomplete

---
 .../__snapshots__/Autocomplete.test.js.snap   |  2 --
 .../autocomplete/style/_autocomplete.scss     |  1 -
 .../dropdown/__tests__/Dropdown.test.js       | 24 +++++++++++++++++++
 .../__snapshots__/Dropdown.test.js.snap       |  1 -
 .../components/dropdown/style/_dropdown.scss  |  1 -
 .../components/input/__tests__/Input.test.js  | 22 +++++++++++++++++
 6 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
index f89cf535046..1ee3f0b6158 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
+++ b/packages/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
index 22b71ef09c1..ee6b3368efd 100644
--- 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
index c0d043d0786..9974c3b1750 100644
--- 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
index 0c175c2407a..a18122cc86d 100644
--- 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
index b0f1647f86a..c0ec5ca8dcc 100644
--- 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
index 891dbd4cee8..8100ea07aab 100644
--- 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({