From f1b0de272ae06fd22c3b251db4115dfcf3b8c423 Mon Sep 17 00:00:00 2001
From: Giuseppe Battistella <giusbattistella@gmail.com>
Date: Thu, 26 May 2022 13:22:36 -0300
Subject: [PATCH] feat(EditableField): added `unit` prop to EditableField.Text
 DHP-1056

---
 .creevey/config.js                               |   2 ++
 .../EditableField/Text/EditableFieldText.tsx     |  14 ++++++++++++++
 .../EditableField/Text/Text.stories.tsx          |   6 ++++++
 .../EditableField/Text/With Unit/chrome.png      | Bin 0 -> 1190 bytes
 .../EditableField/Text/With Unit/firefox.png     | Bin 0 -> 1682 bytes
 5 files changed, 22 insertions(+)
 create mode 100644 tests/images/Design System/EditableField/Text/With Unit/chrome.png
 create mode 100644 tests/images/Design System/EditableField/Text/With Unit/firefox.png

diff --git a/.creevey/config.js b/.creevey/config.js
index b14e3b49..bea3d145 100644
--- a/.creevey/config.js
+++ b/.creevey/config.js
@@ -7,6 +7,7 @@ module.exports = {
   browsers: {
     chrome: {
       browserName: 'chrome',
+      version: '101.0',
       // Define initial viewport size
       viewport: { width: 1024, height: 768 },
       // Increase parallel sessions
@@ -14,6 +15,7 @@ module.exports = {
     },
     firefox: {
       browserName: 'firefox',
+      version: '99.0',
       viewport: { width: 1024, height: 768 },
       limit: 2,
     },
diff --git a/src/components/EditableField/Text/EditableFieldText.tsx b/src/components/EditableField/Text/EditableFieldText.tsx
index b813bc06..57b5a641 100644
--- a/src/components/EditableField/Text/EditableFieldText.tsx
+++ b/src/components/EditableField/Text/EditableFieldText.tsx
@@ -37,6 +37,7 @@ export interface EditableFieldTextProps {
   // When true renders a textarea instead of an input
   multiline?: boolean
   rows?: number
+  unit?: string
 }
 
 const EditableText = forwardRef<
@@ -57,6 +58,7 @@ const EditableText = forwardRef<
     controlsGroup = false,
     multiline,
     rows = 1,
+    unit,
   }: EditableFieldTextProps,
   ref
 ) {
@@ -279,6 +281,18 @@ const EditableText = forwardRef<
               }}
             />
           )}
+          {unit && (
+            <label
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                color: "text.40",
+              }}
+            >
+              {unit}
+            </label>
+          )}
           {
             {
               default: "",
diff --git a/src/components/EditableField/Text/Text.stories.tsx b/src/components/EditableField/Text/Text.stories.tsx
index 98fb2f50..6e27cc43 100644
--- a/src/components/EditableField/Text/Text.stories.tsx
+++ b/src/components/EditableField/Text/Text.stories.tsx
@@ -36,6 +36,12 @@ Default.args = {
   value: "Handle 123",
 }
 
+export const WithUnit = Template.bind({})
+WithUnit.args = {
+  value: "123",
+  unit: "cm",
+}
+
 export const Loading = Template.bind({})
 Loading.args = {
   value: "Handle 123",
diff --git a/tests/images/Design System/EditableField/Text/With Unit/chrome.png b/tests/images/Design System/EditableField/Text/With Unit/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..9739c6af75bd54c62c367b8c4c95c977c5a5be6e
GIT binary patch
literal 1190
zcmbtTeN@_27{<A>)<Nr>I-65Rb(p6ul+x3TiPHSYsZ+_rqT|Q#v^hmhDilSBc($ge
zG+ZEl#g9!>I4y;kL#M<?%ZZADLqNeV7Nq$}!*p&UcKyG<>i%(`_n!Bj=XvgZ-}h^L
zavc27(L*p83?6?rCKU$rw1OD<!t-E%u?HUoz=N6^7X=e({g+^{gIV!0X9%Udwb_qy
zQ<$FW$GTEi&RAM%#*GuLsMMaQwFBu>!Ke&W;fD#fId11!89pIly*=0RJI&OPaqH4o
z0_nXesI#^vD3rWcBdm~SxNhdGVwdUiWrO324zsIRbk1Uw4sijEMmq(xRaevgR`Njr
zbKzdL0>HyOya7D-Uk*(rm31uEg1#g1N3l4C!C;VG4}XXwlgYzXa6i4lQ15oTk;4N6
zF(y&w&V)&?cdnFp05Rr0y4Uu%eqm1M9~y(n)G%08Ri&Ss;|GM(?53`Cvy#b7hE8)^
zTU!Z4qEIXr-<_40hjF=Fb9au8()S9W*yeD@v|ugXH=E7%TyBR<7ETmp3~wyzHrA$l
zu~)X=@$&Y63o5Y>eOF+<a~y&ost8ASUJ48h)K5=;|DfjZo+T3ysSxX=4f)TVovT8L
z)9J)KhLE@l*U%Hk{9^6wFZ56yKSFcO%V!`A+`WFp*LPT@`XI8x)ig3PVlW!B9dq(#
zK3@yyCT3=M!jzkr^YTun_ZE(cGG$+aWNlqt&gQZaQ}ieP<F2&#91hZW?9{P{viig5
z3++;Av9^>#p$G&5z1iICgNQ`gUj;g^Q|1+8;1%8UjfJA3BD?k1YamKGhAqXPUNrth
zB<JUABp1~oSS)X4QY=&`B7tynadC0KOvWU8Z&Vy`r&Lu}Qx`^?dGCMmCP+|On_F88
zv$B%D&mTourl%(+CmUmHP(z^fs{2R${m(^5M<4a`;~?`*o$*OYNh2CfXlN)0NiHnZ
z_7|_Pky5Gjsp~0~wm#F0H1|?S!6XGwOi~Kk+CIHN{p7}SKtRA4sC{?&lXV`B=@#1d
ztJU*adVha^NJt1<B9UBg+8+UAd?e#peM?IV=Axz{NW(s!n6RU1M57tOXmkoNO5PJI
z-3jc}PMw<K^B1Usu&XNw4u|)ZZRRZvZ;g(gD=RBo;Dtv-K=%1F`<?qz_JeO;!$r6t
z9?#Wr%T3ue5y#bogL=?c+_#AWxjX{+OlA`Zg!bFFPcCX9jZIxQVX?HJNea6~norKn
z-R?k0Ji$-k$OQ$XP<Y9m+=p!imb)i79L|!%p?kKuGGQ<fhWsn?E9aF=oXuwQMIdyK
zeydKj`GpmZTCG{Yl-_9MvREv_`SaQH3I?WpYt_L!0Q|YydwNc(>kvB7ID9Of-I3UM
zd1q@4NTKAAe0*USX9c%ZOs(Dq@c)eCzl?CD(j&(72LIr@`9?qvi;qo?5k+NP{Rg-3
BISK#(

literal 0
HcmV?d00001

diff --git a/tests/images/Design System/EditableField/Text/With Unit/firefox.png b/tests/images/Design System/EditableField/Text/With Unit/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9f788e370061a5e80cc850c1634c069664cb713
GIT binary patch
literal 1682
zcmeAS@N?(olHy`uVBq!ia0y~yV158(t8lOZNzQEnP7Dlek)AG&Ar*0N@1E}NkC$Qp
za6Vv$3OBbQx07CH$5ov>rW}gbdwEm6n>R@oopd_+lz)TM&ZABlYLOcg94EeZ3e(s=
zA^Yt6a=)`*J|E71_1fJ3Tt%(<{bkR8pRs)YwbJbU^EuCLO5fJkA8Kb{WMbhEP;h8~
zFkXZ;S~2d4uKin#BCIfhm8C$O303V12M31r43Waf`W1j;<-7><Kn6E*v9NsLnqcY(
zwF7DyOTl$C%jsm`f@chM|Ns59D18+&$F|x`J8plSZGHUCBGqqiZ;SKG*>pTS+<yGo
z+1ZO%uGEa%S0g!D&G(mI&7l^~!he4%r^15@!my138n-X=^0JCgPds@f3>4no**Tf{
zN3XPb($7y%H|E{lHN&>LEM|9^E}y*JoaSFoPELM&Z*TS78Tt42oZKJ1zpmEA-28h+
zO0zO73Lxg1vVZvY?c0jgtGgc`??3+U@9$!U|6g7P$Ly=Ie0F~Rea+cSm9w7S+gJPB
z{FY|L^2m>q)&1Sx-`gA7gc_z_G8$(wSG1q9Xa3Q@WSU;A6wtK(ySvNF<?M={c<{Xy
z*N^LIYipC^%_%^M#t+pTclK7BM@2_JzPUO5;{N*oGptIp;`aXi`1tsZt=Zu^5gQcN
z#qE`Pe}8{}r?9$Pa&qz<yIQMx_Vx2NzuuI3I_blMgQon;qM0kI<Z9mD+FJPR%uJgN
zeg0A*QGIsV*VfpaP;_p)V#A;=gc6>O>sT%=zI?n-wtJ>=`mq}ula+17Y9AhIl`zkX
zIWxmhIsNiN=k{Zdj&>I-_)k6?zrU`xm0SGShQ!04>e4kk^6%`}xO!P#)t=i-Ki=Nn
zo_uvx=*Fa@T|i@wo6CBX3(MKnNLZJ@J5w%pX+ibZSD~L3=6Il{$$#Dt9vo~oOgl4U
zhIxM6^Yg%%60iOJt@r$V`{xYv<fh7*W`)?*Jv!1^0o0yzV}s)Vzd*<Ad00`kXV<=c
z`_$g#aX!dw|01$yx$kVTc0So(nLGUU&$cel+c()D=}5;cwg)Px`Rc+{2XAlhHIbXu
z&R6{ZJz1?SnBo4WRBs+B6AgL0@^>*cKRzgit&f}gzwY<9+&4Ejt8dG_Eym2w_h!{j
zdAa}hnSU&H?=Sk{m;E&O$GaN|x_1LT*6T#?EJ{sx2c|sHZZX|c(mVd1vidd4?H#Jk
zKayE4@%(skaq<3}CN^gqzQ4SzzOUwIP#i=3pC5&Fypg+-Cz!>)=D43(Ww&>oj_v2U
z%YIMSi4<BNzyI8N4e#tX{c^Uyj*HxN;6%>r3#uBw@Kl_dcX_%0dGCwCKlYWp4C;}w
zG+KW~FOSXUZBE^T1C8%hF2}ZQ+qP{-<>$0FcXylDFL$_i<%&r3_Pn)~zxMr_lsOS4
z1$&8lR8L$Qdtts^t<>LNU%NGfmmQg7S!`AA`2X$n1=G3K-$zNe4hy^*<LlV=oI01)
zjbaYR6fK2@=~0${)sXX9<04?uwCL2*%_xQhtZHD0%X<1{Hi`*dLIMZ6wWgm#NwE$q
znV2e8PQ9Fu60I6u4h;IMVywJTQrA*0jt5J_{Pv>;nFb@{o)twebx_JynmM+fQMg-f
V^C$VReqde0;OXk;vd$@?2>{vPf&l;k

literal 0
HcmV?d00001