feat: make textarea ux team compliant

packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md

@@ -9,30 +9,22 @@ import ComponentBox from 'Tags/ComponentBox'
 
 <CodeBlock reactLive hideCode>
 {`
-<div className="dnb-form-group">
-  <label htmlFor="gravida">
+<div data-dnb-test="textarea-default" className="dnb-form-group dnb-form-group__position--vertical">
+  <label htmlFor="textarea-default">
     Label:
   </label>
-  <textarea id="gravida" rows="5" cols="33">
-    Nec litora inceptos vestibulum id interdum donec gravida nostra
-    lacinia bibendum hendrerit porttitor volutpat nam duis nisl
-    scelerisque sapien erat
-  </textarea>
+  <textarea id="textarea-default" rows="2" cols="20" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
 </div>
 `}
 </CodeBlock>
 
 <CodeBlock reactLive hideCode>
 {`
-<div className="dnb-form-group dnb-form-group__position--vertical">
+<div className="dnb-form-group">
   <label htmlFor="vestibulum">
     Label:
   </label>
-  <textarea id="vestibulum" rows="5" cols="33" disabled>
-    Nec litora inceptos vestibulum id interdum donec gravida nostra
-    lacinia bibendum hendrerit porttitor volutpat nam duis nisl
-    scelerisque sapien erat
-  </textarea>
+  <textarea id="vestibulum" rows="5" cols="33" disabled defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
 </div>
 `}
 </CodeBlock>
@@ -43,11 +35,7 @@ import ComponentBox from 'Tags/ComponentBox'
   <label htmlFor="vestibulum">
     Label:
   </label>
-  <textarea id="vestibulum" className="status--error" rows="5" cols="33">
-    Nec litora inceptos vestibulum id interdum donec gravida nostra
-    lacinia bibendum hendrerit porttitor volutpat nam duis nisl
-    scelerisque sapien erat
-  </textarea>
+  <textarea id="vestibulum" className="status--error" rows="5" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
   <FormStatus text="Message to the user" />
 </div>
 `}
@@ -59,12 +47,8 @@ import ComponentBox from 'Tags/ComponentBox'
   <label htmlFor="gravida">
     Label:
   </label>
-  <div className="dnb-form-group dnb-form-group__position--vertical">
-    <textarea id="gravida" rows="3" cols="33">
-      Nec litora inceptos vestibulum id interdum donec gravida nostra
-      lacinia bibendum hendrerit porttitor volutpat nam duis nisl
-      scelerisque sapien erat
-    </textarea>
+  <div className="dnb-form-group dnb-form-group__position--vertical" >
+    <textarea id="gravida" rows="3" cols="33" defaultValue="Nec litora inceptos vestibulum id interdum donec gravida nostra lacinia bibendum hendrerit porttitor volutpat nam duis nisl scelerisque sapien erat" />
     <FormStatus status="info" text="Message to the user" />
   </div>
 </div>

packages/dnb-ui-lib/src/style/core/helper-classes.scss

@@ -26,26 +26,30 @@
 .dnb-form-group {
   display: inline-flex;
   flex-direction: row;
-  // justify-content: space-between;
-  // align-items: center;
 
   width: 100%;
 
-  > textarea {
-    margin-right: 1rem;
-  }
-
   > .dnb-form-status {
     margin: 0.5rem 0;
   }
 
-  > label,
-  > .dnb-form-label {
-    margin: 0;
-    margin-top: 1rem;
-    margin-right: 1rem;
+  // for hoizontal labeling
+  &,
+  &__position--hoizontal {
+    > label,
+    > .dnb-form-label {
+      margin: 0;
+      margin-top: 1rem;
+      margin-right: 1rem;
+    }
+
+    // To fake, that the first line is aligned with the label
+    > textarea {
+      transform: translateY(4px);
+    }
   }
 
+  // for vertical labeling
   &__position--vertical {
     flex-direction: column;
 
@@ -56,6 +60,11 @@
       margin: 0;
       margin-bottom: 0.5rem;
     }
+
+    // To fake, that we actuallyhave 8px between
+    > textarea {
+      transform: translateY(2px);
+    }
   }
 }
 

packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js

@@ -0,0 +1,27 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import { testPageScreenshot } from '../../../core/jest/jestSetupScreenshots'
+
+describe('Textarea screenshot', () => {
+  const url = '/uilib/elements/textarea?fullscreen'
+  it('have to match the "default" textarea style', async () => {
+    const screenshot = await testPageScreenshot({
+      url,
+      selector: '[data-dnb-test="textarea-default"]',
+      padding: true
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match the "active" textarea style', async () => {
+    const screenshot = await testPageScreenshot({
+      url,
+      selector: '[data-dnb-test="textarea-default"]',
+      simulate: 'active',
+      padding: true
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-ui-lib/src/style/themes/theme-ui/textarea.scss

@@ -4,13 +4,21 @@
  */
 
 :root {
+  --textarea-vertical-correction: 4px; // for chromium browsers
   --textarea-border-width: 0.5rem;
   --textarea-border-inner: 0 0 0 var(--textarea-border-width)
     var(--color-white);
 }
 textarea {
+  display: block;
   padding: var(--textarea-border-width);
+  padding-top: calc(
+    var(--textarea-border-width) - var(--textarea-vertical-correction)
+  );
+  padding-bottom: 0;
+  margin: 0;
   margin: var(--textarea-border-width);
+
   border: none;
   border-radius: 1px;
 

packages/dnb-ui-lib/stories/elementsStories.js

@@ -25,6 +25,10 @@ const CustomStyles = styled.div`
     max-width: 220px;
   }
 
+  .dnb-form-group {
+    background-color: rgba(200, 0, 200, 0.15);
+  }
+
   ul,
   ol,
   dl {