From 4acfa6eb18f625d3ca5fe39422dd1d454b2c62d9 Mon Sep 17 00:00:00 2001 From: Saket Bajaj <42207428+saket2403@users.noreply.github.com> Date: Wed, 6 Mar 2024 18:37:58 +0530 Subject: [PATCH] [terra-clinical-item-view] Added contentWidth prop to allow custom width for items (#934) --- .../terra-clinical-item-view/CHANGELOG.md | 3 + .../terra-clinical-item-view/src/ItemView.jsx | 46 +++++++++----- .../ContentWidthItemView.test.jsx | 16 +++++ .../tests/jest/ItemView.test.jsx | 8 +++ .../jest/__snapshots__/ItemView.test.jsx.snap | 58 ++++++++++++++++++ .../with_custom_content_width.png | Bin 0 -> 27577 bytes .../with_custom_content_width.png | Bin 0 -> 27749 bytes .../with_custom_content_width.png | Bin 0 -> 27552 bytes .../with_custom_content_width.png | Bin 0 -> 27234 bytes .../with_custom_content_width.png | Bin 0 -> 27477 bytes .../with_custom_content_width.png | Bin 0 -> 27521 bytes .../with_custom_content_width.png | Bin 0 -> 23302 bytes .../with_custom_content_width.png | Bin 0 -> 23481 bytes .../with_custom_content_width.png | Bin 0 -> 23336 bytes .../with_custom_content_width.png | Bin 0 -> 23175 bytes .../with_custom_content_width.png | Bin 0 -> 23169 bytes .../with_custom_content_width.png | Bin 0 -> 23155 bytes .../with_custom_content_width.png | Bin 0 -> 29417 bytes .../with_custom_content_width.png | Bin 0 -> 29584 bytes .../with_custom_content_width.png | Bin 0 -> 29383 bytes .../with_custom_content_width.png | Bin 0 -> 28971 bytes .../with_custom_content_width.png | Bin 0 -> 29276 bytes .../with_custom_content_width.png | Bin 0 -> 29311 bytes .../tests/wdio/item-view-spec.js | 6 ++ packages/terra-clinical-result/CHANGELOG.md | 3 + .../translations/de.json | 2 +- .../translations/es-ES.json | 2 +- .../translations/es-US.json | 2 +- .../translations/es.json | 2 +- .../translations/nl-BE.json | 2 +- .../translations/nl.json | 2 +- .../translations/pt-BR.json | 2 +- .../translations/pt.json | 2 +- 33 files changed, 132 insertions(+), 24 deletions(-) create mode 100644 packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/ContentWidthItemView.test.jsx create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_custom_content_width.png create mode 100644 packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_custom_content_width.png diff --git a/packages/terra-clinical-item-view/CHANGELOG.md b/packages/terra-clinical-item-view/CHANGELOG.md index f57ef5990..661f9094d 100644 --- a/packages/terra-clinical-item-view/CHANGELOG.md +++ b/packages/terra-clinical-item-view/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added `contentWidth` prop for applying custom width to item views. + ## 4.14.0 - (March 1, 2024) * Changed diff --git a/packages/terra-clinical-item-view/src/ItemView.jsx b/packages/terra-clinical-item-view/src/ItemView.jsx index 7398fd047..9df6139c8 100644 --- a/packages/terra-clinical-item-view/src/ItemView.jsx +++ b/packages/terra-clinical-item-view/src/ItemView.jsx @@ -78,6 +78,10 @@ const propTypes = { * Function callback for the ref of the outer most div. */ refCallback: PropTypes.func, + /** + * A string for content's width. Any valid css string. + */ + contentWidth: PropTypes.string, }; const defaultProps = { @@ -92,6 +96,7 @@ const defaultProps = { endAccessory: undefined, displays: [], comment: undefined, + contentWidth: undefined, }; const renderAccessory = (accessory, reserveSpace, accessoryAlignment, type) => { @@ -150,8 +155,9 @@ const classesForContent = (rowIndex, rowCount, contentIndex, emphasis) => { return ['content'].concat(classes); }; -const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling) => { +const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling, contentWidth) => { const rowKey = rowIndex; + const style = contentWidth && { width: contentWidth }; return (
Y*YhYe?WcPs6eB>7uIzI}Bhwwtj^+Q2J8ST#2F2xuD#zu)_OHXky^e^! z(aJZx!cIZE+9yBI>^G*G_Sb*DeEC}3O8#M!Z#)N%hnCjGub<<5`*TwI3EWL $QN`e5MSLJ#bVCnJmOT@E>{ZqRy>Z)?{*VKIU^47)SGI{J=lTaju1E|)z zbcKj)abu&q2_tt2@N9yU4l(J)re5e=1}i&l=ylKcj1C+6QyYpKo14~lgQ1~u&5>H0 z3%a8ehg-Z)Cx^@+I{ew#IG6{2jo=G?xaqWfj^VT@=V5quj2OvMLR-F2x_qW=&*9;^ zOL1}5>vHVqav$%3r&ouuuCqECZ|#Nmz1WN9q$Y94m5U)r!T&5)JDxnGWr=HO6#4*6 ztobn&WAIi2iI}ORBUkZD!=gpOvfW?%W+(QS&q!4FujMoJ0xjD)-z8P4CBNxk`1ub$ ze*Te~qie_*q_d4J{&C&i`sZ{Wy43$TH)4Tga8X-(wwhPwwA2#W&S&dAl(Y4WHe8n_ z=DX=PE>mKs^GyecbIMj{=TIIqO5uvC3dCAM)z$h5PS(VUmcRW(p;#`mC-@sI{`z%@ ziA(6GG?VHJz_61+>HFBv*3o3!003{Z%Vt{{q8amPk(>zYfpudxwX3|MJG{jYpqt6* z2RS+BT`9Z_+m)T8K~9dHUSv|;-8t_-eS_t{klYVDg3mhZm|x}TW_Ly;rDvN 5$K*iMuuHAM>YN?sT!tP;69S8>f&dur z0uJ_%k-?9e1xC~Fh1(Zxyi=4%lZTH|hSyiufn*SC?L%B3OwCP~;Ivf0y{s#W{D8Z8 zpPDWYpUoG0{1_Mzw$viM?Ir3MOd2dItcO)n@>WD#Ocw_iQ`+7AQ3}l!IpyXa)Tr@; zEiVYsMA9-~5##u_%x(wknwd5I8ZpsN%|Pf4lbkxcoH)3;RU=-GU#T5vXlU{;UrSl< zI(erQl{A=h3=9lhSq*FmiEP=~?WVFScLf|Iy=-EKA)s+U@xnE`hgC#pTTC}^-ULj| z5D`AR$d2wmQGG*5SV*24Tjk>| q27WDg4v{`!NH#jHc8ki{UWlOBt1`h(8TkKL<_dX3x)@V z0o(J|E&*@Q8yXqxh8mAB1`GoSmelYJEj;X1eLCk VV{L7pl!Wjd z8{ cF6@NBZg3>zC;mm}81*mz-Zl@%C5Yx0~8h1as5gj}q6Ya^S@ z{vH6RraH24$-8$^=001%iDQ=(}DYVQU?hM3E;OnJzZ0m84+%U)9sJmAA$H5-nomOo|F`_ zesC`UH(I*$TP8I+$wfj?5ITH;%W8!Qlr_rZ6CH$G8$)_qD<&?ckexoc*5+AE?0phK zNpNclJW0Tl3k!?=6F<7G6iaF0iz}P!ZN_Xil)RB84>Vi!S#%ync5$6H-K9VMeSjVJ zgq)n~bCS&-%E+(QST=S}RwkyW_Oc}QrtF}gMD-Z%q4Z)B +Nv<3wilZ;2ZF`FEjf7U}Y!t_v;GBPN1XYe?vlmIsgbGV@>iNCmCo;)gOciV`ILr zA8hbi-KkLTmH)H$`X?^`?8PHO d0(B&9ttoXIvVtKh z6s@CIGN03 qDf1ffF2F7*t8bBgoj+RzwUt|H+dBgw0o&UBG>fO8O`kCoVhCeMFy+TpbfW +?EY%}-9z#|lUTe(1$kiWtz2ZFPgY#u4+HDzv zh*q~|+l+}ze*OCOqhR>T=bINguA?bwyzHvjr{MejYdb49H#PNJz{HuWv&-*7Q GncLo4bUB3C(hE z;_}tv|2r$l1K8`9jrPsSL5=E$ic6D|S)crE1M~d+{G->c5RcMNJB5GP?DzfKQ+)0+ zsNU^F^8R5;40MyNY=z5a10N$_vt^6l#RMR}p>YYJU0xpA&ykUCD|BM+PS2ce3Ti8s zG=oU4*DB46owT`XYIbNp`$v7n*6Zbg;Cwr=y@M9@Q7Gva>!oPYXT6a4NI3-|KA#}h zU=V3aB`GNIqzGgn?xc727oicrtYT(Hr#!ti-ZxNpdC!p5+ a+9@4SD^1*7fIi4jcuj*X6-V z6WZe3oQNpJf3x%6g(b}U_Zv@_6J~XtxR<3E 46a)Bo-M>GM(|ekSYYIy*bB zZmk(ohjlbhog-Il8_`9F$2GS|MYi`m`I?nRkb@hKP6z7qt5ddHBGCaEgO;L+YxpXe@)tg;r{(cxgJ{t3=xsGwF@_(dN9ZKsQfxS=!ZJ0 Zn%!8Wpn&H lnld+=-h0Dwc0 z>Efgc4mNI)e!oz4YcLs{QE|&M6QN81rKkHljjAK7$NOxYb8{O3Q`+?{9R$(R-u=c4 z)6h`S=3tFdPtxXsw3nyl+5yN1lL-4csMv-X-3vWO0$ O~ZCg}e6lhrf>2j~zfB$2DZVj1@|n5d%pk{p$)*!~6Fik&t(NrUg4P zUJGOZ4#Z`N{?d@Da97)~keP%eSJjPFYjaH0;zAXuv(yi~xsADxUI26JzJ6~1bcf+f z1he%A!SUL$4r3O4G?nVZrE&E-&A!0$a;|}b;rXSd)}GKVgQ%V}R4?^sj5TOOLqjbO zENgt~3P_(l3zN|LEGBejH#K>NN3X9y<0+Ab$rMYl_K)}L?Jc&Juc;^Lc GK{NGFLD@QP+D=>;c#`-MKqDM)r?x`YEx1mR z_NteVw4h5+P<@DW?#vIuO0Jp{r!qjV375XfjfwMnvq_JL1VcKESyzxpN?b7Dwzgyp zy}c{ py+DG_1nT z#-`wKK=`teEYmVKBc<3Mv QkgVQXrvsY#YnOWqTfw4U zgL3}9_&v|_{ubYicw&N$SG_@8U8xh##f^|ndD%gM&7GLkAPADC6wXr~_&(CyKTqYj z4l%y6@{pb!pN{jD5r}R?0BY>)?3kjUd3M!;Re0$SU2Cr@e>%^_g~j{0gwi4^_)fQP z2b3-?T|osR;t~~_aLJ9$jlvjqR^Nmvl8Y0NZ(hf}SIe6-gaeydSoj$3>B$cc?5$^M z8Qh>fqb_mx%6B|0e)}Dl Hh3dN?t`;G(xY9DJm?54Ab`(YKdCQj{rM?3p-Tr>o;j6d?x~edePz0 z%+0^3R8&>55J51j<)s6@hu*-I67jvi|C!2jCS{BKUKMU$ZU||xfi{z6f%UJ$U!UV+ zgFEya8@tT-u6B&YWb(NGMTnx3R#HleCqTK0fHB#?loVXLGzH(9cw%M1njd|<_ke?9 zvQrRwXbD<~xwugE_R69yZ7p?Lfj|KKFOH5zXZ#f}$YxsiN%1_xWBpk@xp{eiOilI5 zyVp)FEG-TEoO bz`ue3GA>|mkV^|~9Bk*sV8PY3wa2`ik#!!Y1gb_wzVSRbbg%GU V>sO3Qr%A6@RHCRSQR7kcCwgz0_Utc6C!iSU~kG o13S9?7!?*`0srx0+){;P8M`>n+l?w@UBSfJv&_0(TZI4(x}*>{?Yeg zVOYxO=!co+ZwP|mDh&+{{pF>-BRN5`b!iU7%M9JcwK>0V^`!cShW9`Jp+hOFDYw2e zd1uo9qP(i=rR(gC|G7f}qmxVv?OdaU21`98HqYQPJdm0Y^0eW`Y=pUSMDfONERCqO zNJ+0WJcw`9*WoA*c(0JUI=Y}zMSUt{0^*1Nrl+STb90c3#}uJJ8$L2Vs>5z(h{<2W zf40BRs8Y&xvqa77FM>v6yin&ozQtToiV!B1cY&eT9#D8@kz-!WY_ta|Dk-IK;zz}Y zeh5_P0IlM~jT`u~8-vCP$3u)(wzi^=LuO{Tf?6Bi<7%KPTO*i_*$EX(OS`2dQ-R33 zou8xq9Q)~)v5as2#{9c6+m)$*9-_0U-BSi3A%K)KqVW44fG%_l^irB% @z?vLZ?Hz )@9FdO;mH{(X|7NQ)>zG|*BBCPJH) z9?%6sA!mrolzk*;v+%nq8+@Y1MzIhzROSe|fB%+j!be5gmg(W(4EOz8SELadYs(6v zw_%iGW27W@l%}J+qCz)m_<@zZeIqpOGPAQye<9s0eyLFSf;M_)TU`F>HBci7d$8(G zZ(CU8L(`IPVzQr$>wB_U11$pwQl6M+=g){}313C^{M3TF#0I-c4n hSK^ zc)uTF?^_$L=fGS*zD5Dnn=Nzji^9;WG|vt{fbbxRU47;nv86LD&`e2Bk4Pi%m(Ll3 z08lOE@*Fz4Ktl!I%ug4A*sgz+uT`)-;~)-Q92%QwG}NYd*EwIkf@8(c{+5eI%E$ 2YB)NF{5?l&FMoW5`|w91K2Tquefg z%y>z!hJ3GBAvA;z8#4RuN)rYPbhZ7V>BGg#ZGF7L4E*SWPZjb&G8uvi4gWhA*H`5n zm~25aWWq03R~401z&t!WEa&2d#Mxv8=5^c+mIDl~@jOidavcF{>& lB-Ad}>-Js>Q%uSxh;QG7MN0zHY@ z%%Pdgp@)%OV4FGkJfq#0$KysB3#z@9gRL-S7%bfdO~0VLz nt-r$^is$L7;pny-_Pc%*9Ig`))2Yy@`8AY zb#}%SBmJ$cOizaiKZ=tV$4lrvfMe#DDbx%!I@Iy`_ee=e;kx y4h7a=Ey9E7zK5NSTq7T_#R#ukpbjPz> zQnvB2p(%E+tSpg$bAYgT5Tt{KZ!6E~(QYEKp`$|&2sR+BQSIovl1T&OVQ>H{TplFn z=g!`HRu1zmf&wk6z7CJVB@tz1M&0-rc09z&@565H9PSA*gfY|6+;6JCwulo+kXxLC z>e=wFE|HNXIsoM5v-7hTkk`gWv~@UQI~b|;`#+q-(J|=MYu8Jr^n=N@&CL9TuE+r- zm1mDbtms&Zi+lq l8L_NsGOh4~%x-t%kl z>vN4Tt9%U%O_}6pBalHeU?a@R%A=sMMnYZgYZ~qF-KchTt*POPj`s4Ydhn>>84 C?cGMUP%I;DmguW?du5eN6wx0* z#W+E-aM@Os0F@FMopjcGmYaS~PcO5|K5%V~4v=o4_5~3zKM~sSy_QI=``GyHFb{At zJ4gfc?g >x?& z074Y<@DRKj8EL4l0JX;8GHIL3Bk9XK39RVYn8s;=6SNvlIgq~8@*-AYI<2?Is9yUa z1x-jZ!NAGvf&?t945Nu4JBDH!6 T+OIh~@VMKZwT zM0=+zNKb)$<3?$q?| z)Z*eWpnl|-G!$uR(&%@d8kjXfb4XEH>k%y8f;#YAHts#BjW86mvbCjS^Yj}3