From 47fb90f2c0fd8ac07ccb454403d18ceac2d81491 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Mon, 11 Feb 2019 16:44:28 +0100
Subject: [PATCH] feat: make textarea ux team compliant

---
 .../src/pages/uilib/elements/textarea.md      |  32 +++++-------------
 .../src/style/core/helper-classes.scss        |  31 +++++++++++------
 .../__tests__/Textarea.screenshot.test.js     |  27 +++++++++++++++
 ...the-active-textarea-style-1-79d70.snap.png | Bin 0 -> 7654 bytes
 ...he-default-textarea-style-1-2ef6c.snap.png | Bin 0 -> 7492 bytes
 .../src/style/themes/theme-ui/textarea.scss   |   8 +++++
 .../dnb-ui-lib/stories/elementsStories.js     |   4 +++
 7 files changed, 67 insertions(+), 35 deletions(-)
 create mode 100644 packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js
 create mode 100644 packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-active-textarea-style-1-79d70.snap.png
 create mode 100644 packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md
index fe3e91e716c..583b51ae721 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/elements/textarea.md
+++ b/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>
diff --git a/packages/dnb-ui-lib/src/style/core/helper-classes.scss b/packages/dnb-ui-lib/src/style/core/helper-classes.scss
index d43a380d307..9611bb066bd 100644
--- a/packages/dnb-ui-lib/src/style/core/helper-classes.scss
+++ b/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);
+    }
   }
 }
 
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js b/packages/dnb-ui-lib/src/style/elements/__tests__/Textarea.screenshot.test.js
new file mode 100644
index 00000000000..0bdf48244e2
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-active-textarea-style-1-79d70.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-active-textarea-style-1-79d70.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..18ad1f92aae7b6c3bd3e28f78d7d5fa2f8aaee06
GIT binary patch
literal 7654
zcmaiZ1yodFxa}Y)NP|d<sDLOaNT+~^lr)HRBMs6yf{GwgD%}ktEu8~`v~;&1Ika@X
zZ|-~VuJ`V`YhBiwVCI}N|M_Bnd+$F`Sy7q@pB5j1KoH5wNUFl?7Cij$uE2A_V%9Tw
z!E#cSmOvDA-&jE)=u>1RpQyVhtS5TuM!Yz0oxyf@yVoaPRrTpz^v`5|3Kd=MU(d(v
z*uH9K`KJZix%Syv<>(Zc6<Fj{71$b=vw8#(Hqprx)3Sam!o%ude#DOd5g&W$0QYw@
zqG`74R&c@rn%75U=@?1u{VHiGVd?0`GdsHi<$Dy%5_oUBqK~*xmWw*~DexoYGP^Ii
zZBA#t$kiZ<GEi4%I*C5(JSWPtPvw@r^M%JF!<U(yTMA$E4yVa~ecK|3*Em(<=0d5Q
zqwd0IXj8vtu+MSAU+cs6K|*Co=vr^eQD$c551%pA+Dyao4!QP!bB+J^$_3b+=VlkL
zCQ-V$QLu*Jl|CL<AAX79RFG=8diAPqo#)W9EBUo+vWkj)PbA4@2U?jfDay#q4k(E&
zbSDa5so3ro-rQ<uNv5XnTph|iT22oOwv)cYi7S6+_IWgWvD1>`r%#{c`w}GY<gh3#
z!g9V$3LiXcm_Z)UbJXpUhl!mFGzE~f&dek~4Im!U-VfraH|&bx45s4`9ntp+nVi(k
zKW%Q7)OY`L*`I`=yX_032Rgsv9y|N+*ujW_Pe^hyLrzZ4-N!6}8TSppx){2|_V@SG
z+UBUUc64^GOjdC-N{33ODwEREcHlC2H_SG^w;U;;hu}ZMd*b0CSm(Jnw-9Y`S4b#s
zYwI<;Ze_z;Y+Q@Jw96v}dM1lqu>t}DTgT|a@Q4UW85z9JXpW`#B%%n`ks(%ARvrfm
zDys10<eo%fH><}=P6oIUXZ)Mz3O|T#%*-x}cSb$5ekklPCwW&f;hW(8)|TPwV2-4u
z<Rhb>IND`aA0$#6`uoXANJtbCZ$I_lsz9BETw_t(8dOs%MxMAL&i4v^jBIU*#P#)W
zvM41<W~%lT=m}HcU#6s_j1zd(71Nj?=;YjDw}JNkaj`gsdXdPhATKL>m6@5j)NYD4
zrQ80dZ|c*4OBPWd*bVA~)6*Hp#>Py|&9M#5&2hzDUHRDA*@>=KOZGEWaa<xMATVk2
zC!(OBKp0wDY886&@$rc-6h07t@&s#PVWBJOu}*G6W~N!<K_hwld%5=nhvQ||wI>@j
z?w+3Hq@=#_@pOo!q$E$Ye!Vvhf`x@8WruvKvoi<^+_GbN!c*do$7jpeSgozC*hR1Z
zNL0I^U6owY)6x*j1KA{q{r&ys=4NFL4XGf?hw^maB#r%JoM~2?1F!i71Xv@F4>m~}
zpx9((WpA^xexlNM$MPkhVpmpGP0L9R4}U5lacN~`Wo@h^z~|y*rn0i~k#RF#ilfB$
zloa1zK~&f1=$=bST@gD!Wc1o!>!VR~cNc)unHU+HBC=V(@LZKYCa8ULc1&y88pdEg
zoTufzH}vv`pd-%n=g*To7HKA@rp7Al8NPh^BA+Be!_Uuu=gytd4g1zm`p$Qk2}(nq
z934liUD*CD{vOD1TOAB!N%sC)ZaZ<w&}jSQKvh+hT<mQ3T7}&d*FugQlftE6XX6Z&
zX=(51`0Xt2W+6H{I!GmYf0#X27~eyW+~?qE?e2zb5G1ZIEiS^@64C5>tF;MsYiBxU
z^<DOD-p};)lO8RdshC|r+9y%ol>bwQA4~k74&VLo|8=-(19>0~<K+j??Em$x$&Slx
z*Q7{2inKGfndz&~(FcPaf_r?%Jxqbkx|TE5yotijDcMLW|H{3;f#(+iPo?Sdxms3x
zOgFKYu2b%WVF!$Ptl?yO3PsAqF+R-Ci`j0TKiyklSvia^tSa8bj+bok_*D^8?@Av?
z6N}h&bu@Oqctg1S=jW}Fo6g0>eOd;0Jd}@^#gdZ?n68CKbZrwjFlA(8&n_-E6fhSW
z&-7(&U-sr?j?_Z)e~nC5LQ_6;pE}@p5W_?EoWR5D;g@gs3%?o8H`;5~m@}9yER0T!
z7Fn<4j*6L1xrg2`W4*rVT^y8m>V0#4wJVTh#=I{%>FZpi%y%P8qsC63B+1beHjlgs
zhPIBLrQh@h${PB1>NQgLZP67*2?}yqdbt{>=%MHpBYS)GN6-!3CR67P`@e!LEX|(n
zUXYJ%pE;zDb89wueE5JvFGSd&qn6#9Uy`WuR)*>K2fM^|O(8QbgbqqrPTwfC(U#`H
zY%ez_#Z3MCfOxj^`4-w6zLNbnt|st&xouZKF;n$)IhOkU1gAUw;Y5iT)+6&%&4-LG
zfs$zqP$Nlnk3U`9)&Dd4f#5KNTEn{PiWh^x?K;O?a*r9dFVs>>0dniQGP1d9?}@kw
z^bRMIq`J$)sK@;z`}0%?DvLVK4G%swUaHs8xZ=BKe?lh9^wsNWK7Cmf;gjiFIi^>^
z6h)H8Eizco|L<GPtGDm5vi56<<2|voTtO1b-m!eM+@B(PrUgSSecIn$xvi^<iJSWx
zfEog7_wf8=^C}*m#osoo{s@zBYJYa3xL@ZDR2=%I>*HnK2UBiki@3PBPFu5$S3-;c
zaYeS9uf@$r>w5-z{9AN5KRvp#K0-<um|vhb&Aj+Lob<Jg%>$S!W~YbSre<bCZ8Ja2
z2!vhNDhoMnXX+DYXAS=YD*Do;V?{i6kReZ~hD@xjcruGUdo9T?6?C8rQPZQh5wo+i
z4ZAA?yshwyj7&_D_K$D-H6n*A?Dj_EX!q#Z0=IeYW1%k2PrQ#7q7wuhB<#ly58dy|
z$M}|&@w&RYb|nf&&&?U<bM^K01=9;_sI~O;gauJ?46{Y))wpunO$s2Q9_qBfxIy?<
zRPawvPd_lI*Hzo!U!SNwT8yu(sxmS%dV+d$2C$JEb<4nOoi~cZpc_DOd7^@2cz8G?
zD~p_pDgcENJ3HQM`uX#cu&^-TQq%fG1^RmYvHMTItCG^v+?M@JdHMOp<>jv+QoQ3w
zr~i7kx3<Jnm1h?hTTYMu@m{;f8u^LWdKmuqmq<07ZFqa*v8TG)L4W3RcQ3CJhj}Tf
zu$v)pQ`oq~rYHOBaa_kOtlZq;D+Adk=H>w~pe82b+uCIEsjrcfYZe(|!Of43jcsR(
zodp7XEguE(D&^4%`+o0A5Df3_RbKoZ-wJ?hIrf7Yu`r}d0FxMVNBa8u-seY4y7k_%
z3!TwwDk_a)7e`8npG{3P+^-1dTf@vJ%55W}q8t~yXl{CByy>wsfAxx-lJZJJZ|c)3
z#|8ZR_wOGb9bxsBS-(u#c{$M98UXlR^ybX7+I797V&+X}t;fH64;~Eas_0fb2No4Q
z0?58fNZ8!cas@^atioa-i|Fm!x6XjhA3x$vd;e1qa@*+YisjyG$r2TH{EL^ZlzjKm
zqtBKDSq_I=M&&kRKhwiRI{@Ah?og#3n{@}8r50rNs53qq8X8EC)m>#u4*jkyg?P<!
z8=Ci5h>Rgqhlhus6B2@hf(U;7`XwnP^))7@Ew`|~BTuX3a5cAZ>)@dE=g)UqC9j4A
zH3S6(cQ>Zu_3J#hfjsqof5FCQKOGF!qN1WgNXHl4->-UCDM>znm>x4*U<B({IerLW
zcvGqGQ}Id~M!>y?4~LHKv$B5Ytqb4e>1%h3dvsaYZG*zMt-YPBxVZQdsr5*~&|eaI
zA$5_n-GR7y=%}mWleHdd;gr<W_Yf+&x)1zF)0C1$jhjD`rPbEf>T{l+ZTe8jWvZg7
zdvDlJlq(?8($XYy^<`u}BAS7yeTzJw3*x}fRK0IERn6>2`m?oFy0W_3>X$Cv_3PJv
z_VuZVT%7)MY0>88+j9Wot04%7CV6cL-u5H)MKpi9&SquH{qUgzVy^CBdLYBh%*-<L
z>~KEp5-AnCZf}H2j=C`*0p>d4S=M=!54D+qC|5en``=xM>Hl+R=tVGtm_FWZNjbSs
zh~`jwVdtca_kP;a2j9i^S|v{RMT-i;<T4>3sjuDKmWEy$n6-ap)~#{PALbG}-NJ@4
zG=25z>*vqnKp6H>b;B`{k<Z?|5#8S2hDyk8oOu!Y=~J55!3H73j1387jpF+CFL80-
zWzi#r48y3gKn>|k)i3e!&lMGk3knJ%rslCX<TAg)LaZ{0AZI!ic9xmHV>r`?k5_eq
zM3Ki9ExRotbfe?rUlS7YUX-r}muF@&pP!$bnwkzCiC{IfhqJ_rB85mE?|#0U4^&A$
zQ7CdCTM4^2Ux!~;PfrU<D}aO{3zE<iD@Hw;dp^hzzD8nWg+U95h{r<Y%h3vZgOJm~
zL3Lo+)Lf<?HL6u}GKz|nojBH(mq%xd&jAz!goQ_BHh~HwfC28VPrNig^Yg>GgpDou
zMt6d4Wz0O8SEwAoX@u1G{rji+W&=JYB8iW^Tth^V26tUuBVFa7T3tldNU5k^qSu^(
zkiZm}gA+<E2mI5e!?>Il<?kxQ`Q_%a(ec^zRxkOGR&8!#^D_aI*^HM4e*XMfd&Hl?
zbNM#pR1&Z+qz70w?}a44{j|-Nrm)MZq`bU5(Gt#HM$mDx4wXr3=mNwoK@=JH;|G@?
zseFP!apT;>!9S>sn<W_;8MG$VkR_ps)4dUcw=<|x=ReEKGV<~YCo!j|-Vt)lw&SH(
ztede)2?C8(PD{(f`E-CWEJ8xsn^nBhaT&f?-bf@Q-Kg>1W!{_2=&2h1KY#uR`Opla
zKF)am3u&J#E-l5edUGE_6`huL$JoTAtUrui_=@<!#*|BWEHF->lRjr?gYBK2pB>--
zEK#^TelP$zLjW_}sQL}^Y<_iB4geKv%47)T<3oH?M037#1GEd_O_55en$;aBo8I1D
zuh3k<Uen8jMS#RGE(P2+5;Tr~ejo@83o~yCrb!TX3*FsyR!kK7MP=ZPg%K2(l9;Hl
zUkc%$zQxBEmHV>Ladq%MK0ZF-r(f;uSAAX3!`rBfvoN?}HEnGS@+h-LV&+v$4E2v6
zKk$f&U;X-YJx{yrQ@IQEO~CR$8ykwRUq5nia7YmINy4yYT3R_>-5ZecE5E)IaBy%?
zKG19cItu}25)_ODk(A<?g>3M}sy&<wS{pA5DlO#!ebH5qJoy+DG+@PY|9;@wn$6tY
z93CFt?BVu&o?eZ{re@uC3mpR5EFdF;sX)K3<A+)2$KYU7Sd93>jTSh$(tZ0*dwaXh
zbZsoe+;e};vcK5f(88*ucL)Q&I4QgY5B*4!k^8Z5M{#2>#4BrRtY0DRXX+nn<Y}fx
zl6)*GD$+LT<tNb7(720{i}~g3deuyRq<7fa6$z;yiL=@7tq!H-<;knf0C362a%D=P
zpcu7Xl6}rSFhVs|o%I()-=#&aOl$djaqjls-u3$WdWnx6TFYHs^4n`AJ;T)DP-B2+
zpgHGOvXh59O3KQv>y+D&Nt}uj=<N;EdAX61lcx>Y>zQ09C%<E3Yg;xxgYrRTZNQw$
z-E(tsak<X+vLKH${Vc_B?LldyPVT5up>F!AOAkACJ)e9lMg*|3rU7`D>A%CjEu*9a
zpz{YJx@%_T;J^uafp#89dq$97`|jN(yXo4%@bK_Ot{?TF-3)DQ^K)M6>vuy1qE9cQ
zs3`D1EH-|HCW4U5!H`{n$se+m0a$=3VbFM^>SH6ULPE4kN=k}JB7q<h;X~);-Y4eC
zE+H>8G$`>uyn`qXYV!*V)7|##KE?eYouw|S5?zM=r~PlQuB$iW=HEv+IyyRVr!I?Z
z6rZ%s1Bo(`C;M?;b*pfp)NY^U>TmizFoaF#@)befE%&7dbe|6A>x{(Cq&~&f)z#hI
zR~ykBLpyK}@!!6i)4Y84mYF<od%556{gK4;I0j;3Vkp?vx2QZ@LP9-UzLVz`vS*}H
zwal3<?d^eX(;lrjeKPXT!u6%T$}qY7_kxCT<Sp~pyS}OD2Fg_zLp=sIwp{H21{^s#
zIrodR1K#&9m6gSvol9lwOYsQ^0z*Tynm^_<hJcj*kgroQtd&(-8nL{*EM%}VTIs+T
z8ylNN++&Jqn9|bH7UHIR8!voTl}hUUrr}!*Nq{n?L2z<%f;x`-o6IXJdQ(ZMht`hr
zApH1H`U3m}_+qDtL~Jnb0-lR3`tF1jYN(m+{KeFNRdJIAMcfBpZZ0nO#aMG_yg@mG
zT6a!hT&6(uLMXJFjPWm)jhg(6O<IY6N9!W{co)eB`XAsxEW6InPOLS<fx&!jXlOXu
zxq~!G=@F~0S2F*dAXw5(C1qtTJrWa7t|p@QYJ;cRcjnEBZI*njDkE~H9vMu_E9XR#
z(}SxW9sL@n{$jHG{@NH&MQ*SxX5EtKS5f3gM@MiNJ}^?L5ZYfa4Un0U45XwDtqeYS
zk*?_BhqZNeF4`!dr}OLU`Nhd9C1#zJ`D}<XpIx8xe+*#ZgaQ*C{H6ltg@1{8&)m{d
zKw=_2Op3#klMzd%ms4W2tOh8Ettj{tnwpxA3>y%MdqWt$>b9vrd%y{f3XaoKHwNxN
z0>PZft|G~|?n-qmFxr@`iu*^+Z<jEf??1jI#KRMzk}d@vO8yE85(q@t;>aR9Bg0}f
zDk5TbeO<4~<N^3TaEzt=`QQ>68CfH+=Hil)Ca5ds=TXWKPM}<EFsxMWQS72e!oW*f
zrq6Ck>AO4$jlRDzrSnws$&)9g7JcskBCWhrU_}@j4&>7m+O76<rxQWT@n>{Yv)pc~
zBRly`$LHHm-4Fi+tUwbiCW9S<D<&oevlAy}Td+X1FT-{8aI1-=$^}iSmaWJvAfOrU
zbAIaa=KRP!UkJE-TU#6Lr59>YtUw`%=u!ZC^G|v(KAY7L>$E5O;pyq=Xo)$AmX;PF
z4Hpi`FlbAy3OjlX$%c7^bNTYhjfvIsKFFfT{;0_fu{Q}rxi76nzU`6G(8z)*v~?2m
z`227_A~Lf0)o<D;c0D;wP3pqBeOmEElLFNoYEf?i>ChWS3muU*qeX84%)Pz6dBOv%
zlF?%&=G>mU7OrcfjYURHq!N!no?w_Zm}pNWC2`{UZ2P(T)h_6Fc6O|SFM#^+UW;1&
zM=j{c1mqDG#%a<*D0;f}6b5)>V<R|D@i5H3fV<{*^_uf>ATMjkdfS)qa7M)Tb}NH*
z|KQDEaF_(%nP~5Etsm$UoLj(FOZ$h2uPt>aUX#GvK0BBp5YNcWw2X8D&;`O4H{bXk
zHwe_FY;IQw9Y4-3VtS#BAy*rlJkqp&%Xc%noZo*quc*REED+q^-X;UWh+#Q#rQl3n
z6;BXyk;^SePfy?4-p<)e`0#CIa=U}AaPZ@8M#iUzxp@2fzA@rk@7}#D?ar+(X$Njp
zs{6z_<Y;56=JKsj2C)L!i5j;;jW{8@vY>#t_qZhZ;%ieiFWKsV%NPSumB70VXnr42
zY~FJ-pKEoyr?YcFC=9$&>qsXzH!72s;66vStHi_wLnjjy)abUp<rD0Q@o}zKUDOg1
z5}E)IzKf14Fq5v7B2$LAn_nPP!0yV~Cf^t>W&~rACx>Ad95pS_oyZBRq3P))z+mgp
zq5Vp$5h>oM{)By}T*Cq3EJ|F^adjL6BLS-%lQlIp|G*wy&ClNFN5gf%5=PJ#u6=+0
zL@x7(KfS%WIt2n4AfL#Vl{&xIYX^ta(o%J6{lCSnH?b{xnV*zQGmQ51kofrcI668O
zm6QOrqX)65HoutCgG+0n%wbe!VgenMF7WKzMXY3*ES;VmRW*hPwP<z^4)Rl$$p8Z`
zh%8WN-NR=BY5^IfTk}+9$ji&K!pllcQ2A~=e1a{uH>f6_S!V&n1&AF+g~WLyMSFXT
z^nb4Y9{#?OYq}hY6;d_eo1Six-ZQDKqXPs@8$F{sqg@gbq7Z`o;jA*_xTqLTT6D~H
z4E^rs=Vxeb-3g41_vqL=C08{*x@i1fH|g^+5N7+EGhxxu(OHS0@`q#c`VY{l=aj#D
zdPd|5>-S`z_7@tUXeT0hB2rvJsz40BEYR(%vQ^Z>=sf@~@DWo>f<2$su7+zKI3;Yd
zC`dFYd(a@aW}g6RzeAx=QMu`&3>HZJpH>7hFn+)akal)<&Zi5^74+JF09GfMr55Fv
za#p=WAXSk3LzpO-uYi3w{QjNa{SQ5qON9WM@fYyS&)=WRW5<-wcHFeVf~Eze@<*VT
zFi0?Z9P;r8jh?uLT%mQ^o0bQNPQFS)!t(fWB4G0mSS@W@Zg<3eHQ-!_$Hy3fZftDq
zzWs};Eb5DPg<S|xe#jn%se`Ttv=}#B8XM)I!OG=GhbVMI6IlI4?vI&c7V&ykJRvdh
zXrAGs4XloP_wU~Z1`DV$4-~W~>G4>t2RAHvP}jf0ekRH1be`e#0CkaRfO-SN(kdUF
z!%}NwV}tRFfs+9T;<o6$g#kv8Uo8MQJPTke$pb?_>NGfi7Z8BUfZQds9?r|zs~xnR
zn3yQ>+_QpEQ9m+7D2X01fkyaKwUm^rl3o4VdawL@R84eyHO9G3Nx9{^IsF?W|F0>D
zq#hafjVSJ&j)&$>w?d4-tpYm!K`zr6_9$Qx^MC#{)@;`6m{=AFDJm+i&7hJ&EOMK+
zkzOI9l?3M=)U<UMpUr3k2kP|aM>0kX-hsr|_M#YZxmlK(Ghw$JvP0Oo=ADY(c{{ws
z{J?J(woycO+89f%M-<H&+%_g}gP{flD>0k^fHEUHd!X9Iy6%MGMP_AX4DiB)gaq34
zOwvfXXCO<<%gcFB;}jJ1O!PH1W#9w&JK#}a@|!*0Lu0PE^fz|=WPEs7V=44Ak*v75
z?=+QcgS&x6$+aTM{=u9=_ePwS4T*XZaD{`t$n0NaaFj~+w^6g|yEp9PM#*%Atj-bP
z;Z<^+$$>2>r5f)}bjDo&60=FgXd%D-j_i`%-o#GR9v%N)M1;&u-S0tr`pvn+ifoKg
zJA{;5j3ke78Zt|Bueh;);V~Z^SFvs<C8T^kQ_!vbMCL!;$HrNgSu&(28KqO`6pIqs
zBZmZ)Xe@GBr*!p9<B`B{@yw`=8jfAl%|DtIw$B}hIdJF&Y<8}}&zTNyj7fKJj5({b
zZtvZ6xIm`nPn0un<pd&Z1YUpqD>S|FMTQCG#K{|?5Ws5SLPX7f#cYDl(`vcpn^}hM
zRZ;iK{l9ivG=;V&(VPmhOuygle8NAkHltg(e%-yYifcV=TB^)E!dFLAYrFlqlf&}h
zmv5a{N0kyA#r7G}YRU9in7(Gocs#rO1ebW82YHuDZJ=n=qG>-G+frqr&h6==L)(n+
zNB?PjNBTR}B__C^UQE)Amf*hE_3HiA((>&VGr7~>=u_`E)nB`+{w52$ibnbEIwK};
z(2th=eX%AyuB@(Z8o`n%i!%wPk=-<_(bNd;;gXv)+QEuk_TS%U$(#>jPlFfhE86ii
z6{PIgrA@m3&0mnqc68lg<4B$pc3Tx<3H<vu0~tT;ywZ#HQX1EP-_c|;1xvtr?c0kM
z3oO`o_*9MmP5ryj0WlY!fr0OTY$h7GA;W7)Y~<fqTIT%kEytpIZ#vokVRsSS5;kYs
z1*}N+LoS2G&eN<|``z<~mPNV~rcZE{nS_(*=-&U_hPWWf|L#<IF#mQ3Hf|BJ&lDvK
IBn;pEFK%f;hyVZp

literal 0
HcmV?d00001

diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/textarea-screenshot-test-js-textarea-screenshot-have-to-match-the-default-textarea-style-1-2ef6c.snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e967777aaf5f2cdb2f75f24388e166a35b2a66f
GIT binary patch
literal 7492
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

literal 0
HcmV?d00001

diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/textarea.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/textarea.scss
index 39030aac266..3e141c06e52 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/textarea.scss
+++ b/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;
 
diff --git a/packages/dnb-ui-lib/stories/elementsStories.js b/packages/dnb-ui-lib/stories/elementsStories.js
index bf8644bab8e..6ceac7e738f 100644
--- a/packages/dnb-ui-lib/stories/elementsStories.js
+++ b/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 {