From 5330e6dc1c313ce7f3e72f0e6d57b41450e5ac47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 12 Oct 2022 14:03:39 +0200 Subject: [PATCH] fix(Dl): ensure correct spacing (#1626) Using CSS gap did also include our "hidden" wrapper element. So we need to use margin instead. --- packages/dnb-eufemia/src/elements/Dl.tsx | 15 +++--- packages/dnb-eufemia/src/elements/Element.tsx | 3 +- .../src/elements/__tests__/Element.test.tsx | 15 ++++++ .../src/elements/__tests__/Lists.test.tsx | 44 ++++++++++++++++++ ...hot-have-to-match-dl-list-2-6ae87.snap.png | Bin 17188 -> 17042 bytes .../src/elements/stories/Lists.stories.tsx | 12 +++-- .../__snapshots__/Elements.test.js.snap | 18 +++---- .../dnb-eufemia/src/style/elements/lists.scss | 22 ++++----- 8 files changed, 98 insertions(+), 31 deletions(-) diff --git a/packages/dnb-eufemia/src/elements/Dl.tsx b/packages/dnb-eufemia/src/elements/Dl.tsx index 4e0a1082d67..b1f32b3b034 100644 --- a/packages/dnb-eufemia/src/elements/Dl.tsx +++ b/packages/dnb-eufemia/src/elements/Dl.tsx @@ -6,6 +6,7 @@ import React from 'react' import classnames from 'classnames' import E, { ElementProps } from './Element' +import { SpacingProps } from '../shared/types' export type DlProps = { /** @@ -28,18 +29,20 @@ const Dl = ({ direction, ...props }: DlAllProps) => { return } -export type DlItemProps = { - // -} - Dl.Item = ({ className, children, -}: DlItemProps & React.AllHTMLAttributes) => { + ...props +}: React.AllHTMLAttributes & SpacingProps) => { return ( <> {children} -
+ ) } diff --git a/packages/dnb-eufemia/src/elements/Element.tsx b/packages/dnb-eufemia/src/elements/Element.tsx index cd59a05e4ee..6c679f6fc86 100644 --- a/packages/dnb-eufemia/src/elements/Element.tsx +++ b/packages/dnb-eufemia/src/elements/Element.tsx @@ -17,6 +17,7 @@ import { SkeletonMethods, } from '../components/skeleton/SkeletonHelper' import { includeValidProps } from '../components/form-row/FormRowHelpers' +import { SpacingProps } from '../shared/types' export type ElementInternalProps = { is: React.ReactNode @@ -36,7 +37,7 @@ export type ElementProps = { /** @deprecated use skeletonMethod instead */ skeleton_method?: SkeletonMethods -} +} & SpacingProps type ElementAllProps = ElementInternalProps & ElementProps type Attributes = Record diff --git a/packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx b/packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx index 91d09c278da..1101775161e 100644 --- a/packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx +++ b/packages/dnb-eufemia/src/elements/__tests__/Element.test.tsx @@ -39,6 +39,21 @@ describe('Element', () => { ) }) + it('should support spacing props', () => { + render( + + text + + ) + + const element = document.querySelector('.dnb-p') + + expect(Array.from(element.classList)).toEqual([ + 'dnb-space__top--medium', + 'dnb-p', + ]) + }) + it('have to support skeleton', () => { const { container, rerender } = render( diff --git a/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx b/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx index 691b4e1959f..a32e7a0eb59 100644 --- a/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx +++ b/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx @@ -11,6 +11,36 @@ import Dt from '../Dt' import Dd from '../Dd' describe('Dl', () => { + it('should support spacing props', () => { + render( +
+ +
Term
+
Description
+
+
+ ) + + const element = document.querySelector('.dnb-dl') + + expect(Array.from(element.classList)).toEqual([ + 'dnb-dl__direction--horizontal', + 'dnb-space__top--medium', + 'dnb-dl', + ]) + expect(Array.from(element.querySelector('dt').classList)).toEqual([ + 'dnb-space__top--medium', + 'dnb-dt', + ]) + expect(Array.from(element.querySelector('dd').classList)).toEqual([ + 'dnb-space__top--medium', + 'dnb-dd', + ]) + expect( + Array.from(element.querySelector('.dnb-dl__item').classList) + ).toEqual(['dnb-dl__item', 'dnb-space__top--medium', 'dnb-dd']) + }) + describe('in horizontal direction', () => { it('should validate with ARIA rules', async () => { const Component = render( @@ -27,6 +57,20 @@ describe('Dl', () => { ) expect(await axeComponent(Component)).toHaveNoViolations() }) + + it('should have aria-hidden on item', async () => { + render( +
+ +
Term
+
Description
+
+
+ ) + expect( + document.querySelector('.dnb-dl__item').getAttribute('aria-hidden') + ).toBe('true') + }) }) describe('with nested Dls', () => { diff --git a/packages/dnb-eufemia/src/elements/__tests__/__snapshots__/lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png b/packages/dnb-eufemia/src/elements/__tests__/__snapshots__/lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png index 159f48dbbf4730fe40a00f833c7a067eecb4af5d..2878c10229511412ab8c4b42b1dd345c79c4fc4c 100644 GIT binary patch literal 17042 zcmd6PcR1JW|F+U3DJmsVAtRBIY#~I2P*x~1v-c*2O0s80k|ZHJBhoOl_sE{f2pJL2 z`M&Spc#h-w=Xw76J;(7q?yvFj9@q66=j%Mrt4B%-vJ_;rWF#ac6mpj?DwB|GRl?U+ zyLRBeO-%}#_`fZ-%CeFq8TE9NBqYa4k zX`~NyS9FpcIpr77Bq_-lA^3z_KPzyUkHdyeFw#;mj7~<*=8}RXpI)Ns#aYLW*+7rk zsp0hdeT&weI?FwE=B{N$I+;`UA2O!gwHu~>yJ&axTnJ&>EwOJK{+HOgN7r#X@s-5B zKK_$lRR4V07`p5Ezdu`K+RFOxCq*BT$p7;v5{m!-eT+>f-|O{j){XUr2CB%(-a=jl z1qH6+Hyx+WpO0K!7_Uu8yOA#Mf9Q;HUy0z@*jQ$kA+vvAV2X0GJfB7H`)@TR9)E?- zTl7A6Ut2P`@#^?4@8c!rIznDTwqtv4-@eVvxiC{aTiUiIOf&ry2gj4{yt^&WB}nTN z#2fIX^ZE+6d3WyMc!FoemoFpsYAUi87Mx;YVy$nk`%m{2OvQPAeSDBk)FmwZwAzoC zig7~WFJCe_Om|DCYv$FwDe}hc=59Dol9*Nnoml+QM(*|Oyd{rmD=W#y$}r^~3UZlU z{UbWG?(d6=cs$mfNahz7c9WAcva;^-^z`)h_CCwQ<5G8Sor{{9+Lw|+A%OOr4y&i8 zCM_Eqn@{sjO8P5$dMD4_ZFlQpC&R5iX-y@QvfA1%oFske^83fNjGKj#XEp*1jEyhN z_I*gz$T{WV;lZK)&daiNbH8r)H+S;`xH;G_ydRAgba$S>>UgS6v z(}VZ#1uXhX9;K(Bv9PePo9@1@W7t>XOegH{B%0SK`}XG@Pw50DE1w?Qy=Tvz&Ud#* z#>RNeyZH`rs9&(L;faWdSe$I}%g`>SqN0+#cyU{SW&hZRCE@yscj6Vc`*S;&)dumNO0K|OrInMMB z{$1{8;pdO|`0+x%#dmhD<>h|QB<0jySk;aU?ZZcp>KhvFxL|6^PQ#@$l9pLIR1t7g zU0ppWDyphARfSmmrWewxZ`Jn)$b3%l+^C*tN^)MA8%*mI36p0=>>p=jlrnNp1z|y{8awSfJ9i8DaJtZy%PGi962rwXqptV+DkScy52% z_U+rZC_&p(J^ALLk%h=7thIFdjp3;&|M2jGBn1}VPl}3a>-5(>J1=+X(#MVt8e3c2 zQ&*xs$}+fr$v5wr`~7>gDM>aeCT3`K)F&_R9GTBnE-tQ;l9G{Ch2@#=!;c!J9o z7Bid1vqLl434;v)3H<+omate}9f@YJ`qLfi4Z zcRMmh5sNKsvPn$?Lqne&``!H#6BFq!UA%a4AHuce)m1Fv2?mdq6P}xY&&$cl<(l^_ zd6v4{Pql9!KyV2N3TByg@hB@RcNW>7{{5qk^f{Jw+qP}{4j-<%N4gWKJM=A@m(RRg zmEP3W!C`FZtG{a64GOR1%aJyd&CEC6s!Jd^NG7`TP8%8;#)`Tga&&Zj{+y+@y**+U zdr@dlK}ku(pWFJcN*m3EvAQGNdfUp&%b(DTYVI||jpr5@IkHMV`%&gNOlu+}Dp965 zQ-pRDYL~^ZDaPFYMQ9LR#AC!otFvB~JTEXlQ6cLPIt3 z&5p2#lle%Nug#WmMIL2fP@HN{A03dZMO<2z{XIlVN-8-0nNpnNy7t|+H_6l@TXHSF z(~^^uBh`QREukVkdGchUB_&Y71xsSm_U53qwYAVB>XT4HPu|^~2NolC6K~ct zd?T&UW|WL%%a$$DoT0I?SMV;Q4Oe6M*z!x>Tu-an)Gc*$emeMNer=Wy{hSA!{CSyM7r9RdJWLR(G?p!ue*QIT@Mr*>i?cAwvZeG`+>lu)imey;b z*x<)57bj#dpLg@x!lylZ_Pi@782@;WG?{(aq`S~qTJ)YVKK|fji zR>4SOX2Del2Yz0|Zv)8RJq%(u6$)~47*VQ@p0}9bNQj7#(bIdezFHH0y0_SoQc6mS zsHqK<{!gFoAnQKE%&9=6PETKTa}&|8 zcyfEBD!BEnMkr!2f=l;lLBaX@`g#{jDQtg~h%?Xqos=@Es`ChqEVK=dGiU7kj*gS&%V*jV@Cl!!OHqj&~_{+IQSk4ysq1??NYvboDe)76<81$0vEh(YAXMX z-~8}-i&zE4Tli{jZtm7_MF4VR;k#r1ugR2zL+qJ&rEgK(_wo5G+i`^m4h`?ZLP2!R zCk)~`M)fg72CSh~s#92Ke$THAz(^pc{(=Eh$tKeltU6oP_+%sWCtn0^hE z-;a#p!e;pIjgM-sed$(~XH2_mNEOpv&{DnWZOCl%$+aHIvOh!1#e@ zh*}>hbBS1zY~U-yx|qyjT71BJuHALi_CG*$pM%~m#s69C?Bau3qU(6@A5_muI*KC0 zpUy%4t**{srnm4*W##b1gnEQ@Szf$|^Cy%fAf9t^!j6cb+%KclR8;DPHp~Dai6$+t zGG9knz6uLF5OGGU0>v*YC&%@S{lh0u?tJ#8pcArt$SC{NYHi6J75MD=^OcQrbtOBU z=LWVA(T5F}PE-ohDE#&77rKE8AQ{i;oVVI#9&y+w)V9CloJS8F_=2+HwE1^gSE8=( z3XuB{AY!g*+YfuSWL1S&fpX+)R$kuMFJCUsuCFak>!YIOTJ~=Q{M{%uZJ;N$lsx)@ zVmyY&GCC^iFtAb$K)Rsg%+1vKo4C;y(j8~@zC6s%s6RT0Yh zyth7*U?ND&Sx3$TW)F8}>1P(bv5W;Kr#f_~V&m_cuGTSy1hK2?>W4l5{-){3)HOn> zU!3hvP>2)y(C!k>1Wb%PdGX?f4(sN7>){oIxLvc2tu0=9@R?;Pn?L(T!xc;cKrOiS zsg!i}EN`x|_3XxM)RD23U&EQ%E|#%>*OsY|9s669cFi=BQ~M;US!`@9O-({r*hSnr zgely*u1^PVn^_#t7h!v~>wCrv!1oCxt7?QPDC>KYn@v$Kja zGCNR&Z2o-pr>U-~8TvI`nVIDvX;K#_tTrQBVn1~V9b12XqPNQia4*++$}0xFH($9Ht2Xc1?d=tyC^iAEl-oVSHVMMFP+{3%L1vFp=ir=#`f3~0MhxM_fB0U|E~ zmLM949TWP%+3;sHQg`IGFN(T|sOS~~na+M#rdMh-D0W^j1Ws_CAK5LR9HR5V1-O{J zFqW%y#T#%2^{yTj^joS*N|b>0Ne2gql|O%8sIq4j6tM8|h2a%q&fTpbS~`lJ_~tq< z-i?5{6BAWY-1>-kF4d0CPIZhoUI76VwqxJ64AjR7udJ+)ymMQ%aV}}^?`H^?mqtk? z<`La8kJoLchq!cr0*%zsV!FDzE|goztBEP+yzk#% z9rEXT@4m)g>@Y1E!c^$$grFy8Jm3lde*(x%WtMp)c?S<2rllPkAFq6O`}3tsm!1Pd z&-Vk*5+vna%pd@L`&=kfPX(|c=u=V;sU`u#|%L@B@5s;N}wJ^5$sKJPzv?5dNK z0E=S$OZjki0%VrDuPGN;Xg`0h#({Ajt4U2q_YDa7;p4|c*leQFI4_Ld*4O|1d#dBt z@83j4yIJfIfa_V$^a{rCnGoaWWPh3XjvYHLN=p+R7oGHyqGILe&!k=`HW&aNqC*26 zFrPiElrfxlw?nN zZekxc%BcCJoR7l}%o`pZmBvi=_x#N*sy00{H4ENBB9CmeGQ#Ma(XYgE? z0La85t7~cw4Geq?IwAF1J!{Ce=ZJh?zt{S)SY)%X!_VXV{D%;#ASSTu;o}Z*qOK9> z4ZLQZXX9*ZT5=8Q;zgfTRbA54(;K<_pscLSEkHfTkU}fp>^2YxM&{a8DM?9UGy^Vq z0fd=snm~jk71bxCe^qU5l3eI1q;6x0^Mc-janBU+E%x$02LB{g_Gpv`z#=02h=C&@ zV6r{^D0X(<@%3xlx@WJhj9)PEn-y}Lxssv~XV?5#CF7jQ4hvR7o-cLsh|y#OC8o=jZ2@QdNKU6a-d> zvM|a~k@@5tPE!!-uDk@#>bA7GKjulW!Ya>Cz?g^Lo zLD?JU5Otn^fQVF9Q5g;G#oyt=Bcr3YkqN=U`;jQp7CAS}%s6Tzxl#ZSk<>OrUv|p` z(0)aUdHhxv2oprnMOj&WBO^a1IczbH=Z2ee^xT|PMIeKss_KFE_V$sHk$tqZHFyC6 z0USDX2-p*xg@Dz7S1e}xK(J%@));k*B*&PTc56p_TOvB2HfN z$$D*Xu5)N)KX~$Fk7-8+#m7%R3$ zmnXxX+Gf>EhBo z1(rs59Rf3BV2!}K?LTmUiGdM|;^gcMP+S8-(LXYhMn^|yKFejQ{Y-O9%czhJ%GQ2H znV_Jc3mEB+2-+|K)vm0rPJSyZa$V*`LAnydxBK$t%XnU5%0o`;VKkP`Pe-%Cz&4CN zV$+R+dFkraHa4wfW$TS~XIg%U>EYtsdYj=}M9Kcw{j{rjIBJ^vIl*w5+d zLdRKpVaJ(PHsLd80>Htp-h0$ccUkGIniX>Ft!^1T=9e9N=^kpP6Lm0F$o?^bz?|pr zu&ZT!3u9BUEA3(C22iZ3dI-1{wWpl=l-rLDnz}yi_3pxOSMPNSM*=c3&_M_=N4gLLd{j)?hCg>r| zhoBt*2iniN|FJWykCnrA92R!q0673w$>z`Ej_k1O7VrY!)~b36_n~=+E+O zAc{NU(g3CZ$uZ#wvV-gcv$G9gN*Yl6G>RS4>xB};I!c0H^4R?Taa}G|RUQ>LoJlSu zJ3E^R;~-wnK^eH_k+X`jGE=fLn?3qvW53wiPhR4~sH;IOdyfe*v4zX0VgR+#1pFjE zMnNy4USvNN5u2f$N_>ysn*eWx;L0*d!Qhga@sr8>lwv_PHa7U-%i+qv%ks&}*#!lW z^x_^j?`Y@!7Ia;Di(m19Sgh{r(@|y*Z!YNfI4u{##C+(q z56m<1SYS0HPzL@LUt3!iMwK~m2Nk$4q*;aP7MQEVaDxCN<>Tm zQknsziEn|egyjIu|(6mZEUU60jd;+h@CBRU&|-99;s5@)uoa0_6V=xB{Tr8+`ZGz!;`i$l9JxUqJjfB zsFB$`Q_QCFYGS0=Z8f`o8R;CYj9438z#cTCFfjwuvYk0|HRNUUvCE2L7a=Y z9eyzH5P;TA3(TyrW*oTo0#lS6-dl_YqYtqFWE2!_8k}rwa!8L5RG^XE7u|)qYg%i^ z=+55qs<%O$Muy2JA2@XARZbi}ule5Uc5u)0Gqs;TOR=~^LJ}Hp*jyhMC!Q$qYC3{Y z8h2H;u*hJN^9j6X)N?7R=@OtxMUe_mOj3&dWV5ts%c}r4`kuz(wV z;^VU&En^5VcIVEWiIHE6i>-ylt;(zi-WL{b*)GM^trPb2n6Pr9kGh4#ODNZCp(kOlBR#Rt89~T)Fbl-#@hHJP!|*7a9hM z)%=JY2?_+T!%0EGXaJd(3~k}K?A#x%sZxRTqISLl#3=XW5p{KS^&sRBB84-iS{yqp zi+=tzd!w4V^}rq}-6Fe3lwvDhD8#`rG4g2bKpb{6y&7T`pfMj~J%AS&Po44w0x&Z( z8%boJE~UkO_O6j`pFT`Q^pWMn14 z{yp#bU)Vv+N^|a46%`}>%!h}Dj3FQ-4jxlfRIG{QQoMOHR-tI=aI28>JQJd+ z_Xm~2g@#w}!ldY}Yi=DeJjaU)$5 zgs;J>?X{jXC02}D?lViJCN+2VhB3+6kX%oap#XQWSrS!mh~JYZ75BBRuDpDUrKKeZ`Bk8eEfaWf=*77yY(@X+ z1>iGoyx>7LiQoiWJXqs7T5}N0oFu9M@s`+;pZ#SCi1K~Z)b}AIy1i(LI0!`w6L(^E zt}bUf=7FhgTb1VG1F@9WzlNlr4|t~@qjlHP5sHDV2sAjd%Ga&W4@v`%eK4Bk+_`W} zg*kVssZhx4L0c)Y9w2lB%;w7AggI}%Cs7)5JD-l?JN2!FRSts*Su$qKYmi2r|T%HP`F zp83Ry#73Ws3=Mr&CVrjgXs-s>o<8uHYB_GnDW1O@dH$uFehg9slLD57GkY2gF-pR zlGHR;$>90UyoVoDBSD^nygA)glzTo>liA$Tx+DMm_2_L%P^IU!M*!%_|B8x<#pmYc zo^VORtA zF+4VQs$Y)JtTX7rg9mynLSmw~vsjmB`zs;D0sdnOv9`7S{OOZ7Mh+X4mPiv{HB;P- zWS*3wTi*d3p-`xWKT+*H)_=+J@bEl*`qU6G4XDH~!Q+qIUU@KawTq87xWtg%{>~0#y_{vARY>B9aPfwH>$z2-+l{5JPwJEe~Nhxd48um*JPfQQ&F*$ zivol7&!0b$Iv;Cl$WU+#X%b-!A-FN5d(3%D1xWs0-ulC6dOkHZ4GrT+u6Yj*1-vK1 zYP|1*tIyV_MzzeT!wV3W-@SWxTtp-mz3m^lS9q8CcmJayEozYSz~w~v*?FuC?qpYe{SkBn zY%W=D&BE40+klR3v|yiz!(0J(%n8pyjDdu61O&HPckXW1U2k%84bZ{^F%(oAY*_~y zX`nE}wBfWku^+-}B4|(OH_w$*``!!?DDoAorwX7XfyI@1 za`?nfMWcpz_ryVK78VvX7J}XaYbKSb^jwK`qA`&aMJiUrS=q?=YO1OYaERoVwavf% zn*`nF+jUdZgXe%>t)M`q!0#47Dr+ z!Hlwp9-vxslPuth_>KJXL>CyEzp=NgMJJU9ABXd z&)=of`GP^K1`xWl*pUlF?I;Sih}%jKw8~p%W=}weVX7J?ELAXZaB3GRW$8&1J|f^R zklyo+@rj8iKut#K^4_|AJJB|Bc5JKyHK?=9Qyf38tgE}au^NO5)#thC9#{D#!N9-( z3f^%+L5)5?uoWno&u^qXdiu2D`}a6-2{fz%(bBTAQ%|0inPQJ1<)bo7C@WJTbp+s* zfO-_ycWs(`YI?d3ad?s;2P4@lIA91K1hfU=V}b09_ZvfTB{T^jJ+w+c;6ngvf(il? zAAlFB+VU9#(a5lZZaDk(Pnhsw1F8AU4G@_GI#9^GCre+pJwy94O0fNp*7EM|qN;>C zn0&xE?F2(WOzCK=#HwMC{oLPQrZju66nB!vw_S*GP~egG7qPHx3dPdiSYJ((RfsHfZp3m@^3t9Qkxf}ep62rspUAr*U?Ev|o z1BnY%^W4J1X+EwWlNL*X;v4EIvgvq=^|{ZK5GxtbVF)n-VFvtyQ8oOqh(vkg)LV@l zW7uV|7W!cK?S6I!BV>pUfO-K28OD)a=g*%9PsQ5*yNvM35zHVo6=EX@hk^%K1W8*K z&3vEczQ1|VbG0R1-F3NJBpI~>Pqw{ zsQ>=%OknKC*5_-v!nkzfQ8>9lYl2f=fqSF&=V%t(p~ieMlA)HECqVO`Zqpj*$u+?y z?1W|I&cMfe@SiODOsT}UL*5mK&+NVP!YLFa!u1DCVAv3^J)!qwaIhQ{2bAbDeBiI2ye$J|;qP=~K6%2J&A$<&%H(8x^5RpM1c(AoP59bkX2ZNNH29qS7)xbDEkul*S`%6LB#KItg_uU1XAQ^1?N9kada*3Qt8kDC7$)H&XlF!$|!gTTPXOneZ9E_w0Y3Oc-3CX;XNzE z{IUL`j$QBy?>l(#EBe(ILV5x|970!~=K-vPOJcnNW+xy%?z`wE`|@5cMsq1}j4t8usnmcL8D$30RW{K0ekkhLHTX6=F4^U4sD? z8^8I*u2Zng-hL3GoYxl8_n4u`M|GjJg61+f(jmW3Cy-{%Kv`nn1GTsR?MXPa>WDh_ zpRQ-?x(!i!5vPwxhpM_d_r!JF(^8c(@p#Fe{TFt_WBo2a-wluQp`dVZXKA-S20@sT3U)IlLGzScBFy; zeF^SMN8tUv1@jeA>v5lOAd3xi89%h!&3HlNh`4|T_eXAL$=NGj5Z0;Vu46VckKCCR~KMey6TJgI;2%Vqul|T z3Kp`UaSs!p2M-4Drl=E-IdqHr7vPKEyVtPsxdgb#gI)Px0yu0YY(G8NeI-_4zZW>n ztXt(0h>&1W;`*#aHV)6=7a1wVV{j|PBmV#VAw>o>Ef*>+`iU*4&N{s;vX z;PYh4F##(QxE{0gD`5dAB^w?~Dh*%_L6y)eu_#p%t$2KV z|5h{aG4tgJSmq>vF1A2bIsq++=;W}eXyzK1qxcinb+D7ospCL(Sh&5AUp_T81;crQ zM!?vRvhTqVT#=#J5*W#$oEhN_-N0X)_2g3kA;#%XLvDbtfUv%}xw%cWrO`Zk^ytZ9 zZb_Dh@Ip`l{@(fMwFR~o%-8m4Zb3}DQqIa^)8RDjid1;USz+c20A zM&?z?ok3uafH99i<}%Hr#r?pR$j6nj68i1nC!dnFnPTD(KnHt1STOEqpDKk$*b$@EBgC&$Je4mL#0ej-_%pI=V0ZM7X~gt`&W5&rM$U0WU?iN z`1p&YB!nrQX_#?_2^$@DimB zW}G)rY0qfoZ;S7*M`I$?TXXXO$;6LPQK4buahN-P8}z8`)5(jZ|I|`1E8sXo2c{bc z)oO9#8eF15OplOQNJ>r&ytEr(b%Yt*byk6NY_=SSZdiM%jr_yD=Qv zO|?_N(c6vLVEAWO4hYf5$aZ}*vu`NTN1$)G`K5~%f>EdQf(88^sLo(G*#NSv?CssV zPVL*+{^|4QXm0%-@Ka>PwwE~DVnmg&vO0^lb_&!a%neP6QacHsM&j-Azj9!rk0AH} z>TG7~A#hHhn<5=ZSi|M{XenR`NX}?MW_M-j?RL6~em zu=ugNyL%p1zv@*=Isv60>xw;?%22ewLQseGr+O8fN86s@LjSCrPl=UweAA zX7i`}J_zGYe|G2jqi{Fony9Q=CYuj>h_ z3SuiD=6lHDGcz;T{VGuvqx#q_ADf!?d!ZJQ49v_tMV%l)MSThJ>7yqpeLBYNM#Q(E zlS@7^S&)E&AZ!R^Z7R?{<`Op7{h&bhIgcNM?whF+fBZlSc3G&L`T_uY*1LB>eyK1W z`e>$)f$fUC&q4yYMOc-<)?UC&f)^pGIzkyTiVRLTz+w_PTXFgHi4$8?R8-8&&7nYt zZz36Pn1~ZHG0O+*;R+$gaiCA69gT(zj6NguXVZb5 zK@Qeq+{MuJ5i!Fq#cm&mNC0?!g~lko@fQjgY~MQUW$ozbuhlZ? zAxodO*G@=z9seAiziJ8-s7s;^FAvWy3JPN21VlwyWz{VexsWBL3&I1XAOOvh7rHr& zEg<}f+CUhB78VNKR(W99S5hSN0>Qz|ES=)_N}xeYO@sAE6tq8zIUDn}TpAOj^lURl z38(NH4llCZy9ZI;QI?fK^`M{nf~!eUOgP2E69OdI1O}q8vJ%x79AHRT7*m7E))Cf@B;rK0JR8|tRb2!P8tQn$r2{byKD1S zgTmGhAtWe{4Se(r?1JCF1tU(}C@ecWE&vGK^B!&jqYO$Y26PhPm&dGuf;k`XDTnK# z+fwp77&%68I0j{K+=nxtE2h7@JLcWHvtX17%caecX?_vmhS%?DdfuqMk)*j~-Vo0p z7z5}8O51@9&D z*(c(9sw$8$F|vvMT~t}E4nd(VZR984Pnf0yzfZd5<8%g^A%uXqMOYG)ua>ws zts^0ck+_yf;l@U#R?|H25%1r>rz()ROFY~uzq>4gcUjn{PK%2tKsN!lqXF$ZdbWu$mHh4eMTjnI6-dw+vr5K6!i;2s+_0@5cG>p*XVcU%GtGUjK($Bxrf z5hw~OX*bTS)@C*tNAVbtjW;A1^_RNiP^fz8VYIObY3f~@Rv_YTV{RZEipk2=x}JZ( zzL55ZW*F8l`qEv}68z1D^4KK6Eq=?sZ=gmA>zb0)wZkB5@Qlx4qJe!5aOg40KSJz6 zIa4ooh!=jjBD={?K$9bd+?s^j9#|I@0z!%bapHrAmluZ#N%2gTFi(ThJ5+oXk&h2y z8-JnVFRc91CweJR0ntPG`S}SOI%GV36O(G>7Ge1X>0|^aiH%}!3m74S=Ynkyr%e3; zT=qli!FoWa__}0+B!GaQf>V<|W4yGqw8~f);4X-BUt3$l@VvH5KQ#tcMFju};P52Q z@t}vNEEIsJrlz6s%gp3L-@}PFYcxXGMIYk?2Y~%i9OKGx1@NJ}HC4bthjv{?A_hmGeh`_;tF1ee6 z;wv0u=--5qLAf9YB@C74lz_lt_{}&tIPmT+sYuK|rvEtWKt>qoJU3QZ5K>0i&3S5S zkT0jWxr2dP28V|kxd=U_5n*l7Us{K4z_e3|BWft!#K^lUX^rWYRayN8gf#4&>gv9%{y;wGRX=#(|ET)>@>gt3-5QZzk%rZh_O zk))&~j`IMSd&5Ka4kuN?h$^6l5N36vRY#g5hGA(O0Aq=dv zI-Q795Vnhul1*D*mxHM3Dzs%moZ&DiK`g_HA&D5i=iT=U{M=lRWf|gwpMXUktD`i; zqQQ*vNc^-i4#z=L=RSM(7Df%5S@Hw1Wk6V8kRN!5I~cjZxROB-Mu|EjepvtZ?Q&E| z6bUwmjIM?D>o5wSnBXW2^fkg*OITaMZ^2Vz1o4LTz+=g&=9y*8XdyTRiPa!j*=%!j zGc$0AjL^}5B5^#DI6lLD?i@2tyV5Iz>k|RsV-gZVpKYI;8Vy8tHaKFv?_XjovF#ayE|dn1o%`#4qs zN383h{q9Xp9BhPFv1V4l1;zv1&TWS22P`belgn=FnrmV&hdB3P5E~gCom><-$im2Y z9~#()xse%~I^E`*tgKGD!H*uvrH*Ngj*o}N#ie)LKZao-2_IrE-8$6e5W(~a1lM>x zm;4kKY<})%4h8~<{|4C^1gQt^F)l^KU#kPBilT%aIkET20Q$+MS^+XrIJcS_|MH5W zB4HyIvS%|FPWzXDGtUX>Mt&Z!ywXuyyG_wc#B#(Lo(kzXrjoE`o!-j}9&zK}HJ(L9 zh5eaXGvI3EirI8tji34LLXXn(A>r|vy005u{CsE6vgQozX8on7i^+gTt7D;Fn>js= z&s>Wj;mdqqytZ{P>CwQcqfWzt640s;h{O2szVE;(K{aR1jKu0#Lhhq(T){&9v)${&qmE_Y?fcH$qIAd!<+xR@b% H%lm%;k?Qzf literal 17188 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 diff --git a/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx b/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx index 66a1095c07a..9a0a030e245 100644 --- a/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx +++ b/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx @@ -22,7 +22,7 @@ export default { } export const ListSandbox = () => ( - +
@@ -127,10 +127,12 @@ export const ListSandbox = () => (
Description 1
Description 2
Description 3
-
-
Sub Term
-
Sub Description
-
+
+
+
Sub Term
+
Sub Description
+
+
diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap index 03a8ef5e4d3..8c116e51171 100644 --- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap +++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap @@ -711,12 +711,11 @@ a.dnb-button { content: none; } .dnb-dl { + margin: 0; padding: 0; font-size: var(--font-size-basis); line-height: var(--line-height-basis); color: var(--theme-color-black-80, currentColor); } - .dnb-dl:not([class*='dnb-space']) { - margin: 0; } .dnb-dl dt { margin-top: 1rem; padding: 0; @@ -733,22 +732,25 @@ a.dnb-button { @media screen and (min-width: 40em) { .dnb-dl__direction--horizontal { display: flex; - flex-wrap: wrap; - gap: 0.5rem; } + flex-wrap: wrap; } .dnb-dl__direction--horizontal dt { - margin-right: 0.5rem; + margin-right: 1rem; max-width: 30%; } .dnb-dl__direction--horizontal dd { - width: calc(70% - 1.5rem); } + width: calc(70% - 1rem); } .dnb-dl__direction--horizontal dt, .dnb-dl__direction--horizontal dd, .dnb-dl__direction--horizontal dd ~ dt { - margin-top: 0; + margin-top: 0.5rem; margin-bottom: 0; } + .dnb-dl__direction--horizontal dt:first-of-type, + .dnb-dl__direction--horizontal dd:first-of-type, + .dnb-dl__direction--horizontal dd ~ dt:first-of-type { + margin-top: 0; } .dnb-dl dd.dnb-dl__item { width: 100%; height: 0; - overflow: hidden; } } + margin: 0; } } .dnb-spacing .dnb-ul:not([class*='dnb-space__top']), .dnb-spacing .dnb-ol:not([class*='dnb-space__top']) { diff --git a/packages/dnb-eufemia/src/style/elements/lists.scss b/packages/dnb-eufemia/src/style/elements/lists.scss index 321c0a086a6..27636075a7f 100644 --- a/packages/dnb-eufemia/src/style/elements/lists.scss +++ b/packages/dnb-eufemia/src/style/elements/lists.scss @@ -105,9 +105,7 @@ } } @mixin dlStyle() { - &:not([class*='dnb-space']) { - margin: 0; - } + margin: 0; padding: 0; font-size: var(--font-size-basis); @@ -139,30 +137,34 @@ // Inline @include allAbove(small) { &__direction--horizontal { + // We can not use gap: 0.5rem because of our wrapper "__item" display: flex; flex-wrap: wrap; - gap: 0.5rem; & dt { - margin-right: 0.5rem; + margin-right: 1rem; max-width: 30%; } + & dd { - // width: calc(70% - 1.5rem); // minus margin-right and the gap - width: calc(70% - 1.5rem); // minus margin-right and the gap + width: calc(70% - 1rem); // minus margin-right and the gap } + & dt, & dd, & dd ~ dt { - margin-top: 0; + margin-top: 0.5rem; margin-bottom: 0; + &:first-of-type { + margin-top: 0; + } } } dd#{&}__item { width: 100%; height: 0; - overflow: hidden; + margin: 0; } } } @@ -232,8 +234,6 @@ @include dlSpacing(); } } -// *:not([class^='dnb-']) > { -// } // Un-styled list helper @mixin unstyledList() {