From 16046b92ab33c703a80efcd377ce5d24c853a31f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredi=20Wasstr=C3=B6m?= Date: Mon, 5 Aug 2024 11:08:40 +0300 Subject: [PATCH] feat: add radio-button and checkbox disabled style properties (#7615) * radio-button: introduce properties and test * checkbox: introduce style property and test * Fix test, remove console.logs * update test name * add to globals --- .../test/visual/lumo/checkbox.test.js | 26 ++++++++++++++++++ .../baseline/styled-disabled-checked.png | Bin 0 -> 1263 bytes .../styled-disabled-indeterminate.png | Bin 0 -> 1152 bytes .../checkbox/baseline/styled-disabled.png | Bin 0 -> 1147 bytes .../theme/lumo/vaadin-checkbox-styles.js | 7 +++-- .../test/visual/lumo/radio-button.test.js | 21 ++++++++++++++ .../baseline/styled-disabled-checked.png | Bin 0 -> 1403 bytes .../radio-button/baseline/styled-disabled.png | Bin 0 -> 1309 bytes .../theme/lumo/vaadin-radio-button-styles.js | 4 +-- packages/vaadin-lumo-styles/style.js | 4 +++ 10 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled-checked.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled-indeterminate.png create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled.png create mode 100644 packages/radio-group/test/visual/lumo/screenshots/radio-button/baseline/styled-disabled-checked.png create mode 100644 packages/radio-group/test/visual/lumo/screenshots/radio-button/baseline/styled-disabled.png diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js index 9eaf12b3e1..fe6ce9035f 100644 --- a/packages/checkbox/test/visual/lumo/checkbox.test.js +++ b/packages/checkbox/test/visual/lumo/checkbox.test.js @@ -91,6 +91,32 @@ describe('checkbox', () => { element.required = true; await visualDiff(div, 'disabled-required'); }); + + describe('styled', () => { + before(() => { + document.documentElement.style.setProperty('--vaadin-checkbox-disabled-checkmark-color', 'white'); + document.documentElement.style.setProperty('--vaadin-checkbox-disabled-background', 'black'); + }); + + after(() => { + document.documentElement.style.removeProperty('--vaadin-checkbox-disabled-checkmark-color'); + document.documentElement.style.removeProperty('--vaadin-checkbox-disabled-background'); + }); + + it('checked', async () => { + element.checked = true; + await visualDiff(div, 'styled-disabled-checked'); + }); + + it('indeterminate', async () => { + element.indeterminate = true; + await visualDiff(div, 'styled-disabled-indeterminate'); + }); + + it('unchecked', async () => { + await visualDiff(div, 'styled-disabled'); + }); + }); }); describe('readonly', () => { diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled-checked.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled-checked.png new file mode 100644 index 0000000000000000000000000000000000000000..fe624f4635b7bc5156f6d243d673cdfe470ba605 GIT binary patch literal 1263 zcmai!|2xwO0LMSpZsglmO2{GPOO7#NGez2LAq<&?FyzETtuQxAXJ!kJvL;W`>Pofl ziG%bxZSyCD1AbOT``9- zlk>)3F!)U9o4Qq@Ki}t*wC*WhZ%0x@zmK93NGWt*-O{6sGUSGPgzgppNF+p%+i(BJ zOQ)mh=`*y)u`$U5|aEfhi0`VsA5rQ7J7=RDHcaN2VbRx;{L!fF{sd zE|x&tSG~WXK-pWZR|f`dcBCVc6OI^Yi8P6witVbvlcbRrb7WJGt9MHxSx)^`okf039wlXU zpH^FbIS>0uu7x&l1bQ4Fe%2l5m=7alc2piB@Gfq$Jh$F6c9~C{{aF1E3=Lj)x-jg? zNlnFvkcf-*xUlk--V$X9?Y||ivk2E%_iVb#LvIJz79+A~;yNZ)54U83LzoDc!Be8c z$f*@iwnmB zyN0`6(Hgl2--|PEqxzI!pi?ygLt1xJcfm<&ybd4 zfy(B+S-t9Pqi%lbqyJUI_~qWozTk|DjAyTgi{tr#&)iZ}87#Z0I72Hr4TC8~jZecNR{k+X zsDTiz?z{UHD;uXJ6(i>|O1FEuWFmH9*t09XW+=Ze1^UQN);6NTuR(UyoGPJaY{qq`sC8u)+EM6x@IkTZRUoV1D{%3crF=qX7%6xp{&Ba$O=bm7v{kFg8>Kd LVYtS?q~HGsJSSPG literal 0 HcmV?d00001 diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled-indeterminate.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/styled-disabled-indeterminate.png new file mode 100644 index 0000000000000000000000000000000000000000..4c463d3cd372fa9938269e07f3861f9f6b3c35af GIT binary patch literal 1152 zcmeAS@N?(olHy`uVBq!ia0vp^^+0UI!3HEtt63HTDaPU;cPEB*=VV?oFtAv8x;TbZ z%y~QOzTYE1k>mUSe2P|RVv6)~s-GRue2itUVO$~Wp2mHh{STCXsC{C4#k+T60rTv; z3QQ-1lv2Z898USxi?6*f%|2;m;>kJwhg{Q_rKkOxYx&%#+dDK=lx6at&F>fmUN;{} zmk^qt=uy+A_))Tr5GPE?e)d_V$tM*=xDGxo(*1in#c0RQorPI^Exs{j|IbW3n^ss> zwk_!S_3PI?mS5JssqiMb`gwd@+`2nIj~+dG%8cXpje9@!re{Ar*L+Z6-n@BX+ddx) z&|1jA=y~t?3}0hqoBuk_|9187-EiCO@BO3uU%%ON`DM+AKD(%&Qd-N5_>QX!R?L+a zGhP$=hyUU_r!~x-lbuy~k2=S7ir3hG9qrkWu!{YWdwWMk5AT|Xsob5DV_DKlOs9Bhn55sR$mj9mP70hC^Se@o z-|5-E#mD}*YQH`vb4ER6HiN-myZ8I-vwpsFe5-Tu)7HR{;&RumI@(p8i^}RmuEs1j z&s4Eru~WWY=Uexy#}{gBH!fVY>d%Vr>u*Y5KgplF=Xx&Bm1Dn7dS?7>skBcDw>sv-)lw%=@+@%|VeTYyNy z&$s(KT-^^}3=&IWn6o%}R{OS$3%_MvOF#IwRW@*?jinO}zUI`mF`VVdwd)%hmJd3)6p z{}#w8)pQ)$7N9xnxb2jz6+eES>~ze`v}AqHY~!f%$B66FBiEmS*Is>NZj2Nx7RzJd z+Vy}13VDMkdvN3(f{TV53n8{#?7me!_OU8yOjxQ?V!n{Am$NE)&m*o1=2~I-gYF-EpYUFhu2O!;X13dr zWztfYQ|me!rp&GrUwc7}Md$8@lymwI7a3nRHvW5lPVus%OINMpYVx#OTg`Cfm%>NM zwj=2hLh}C?5#>k11uZsI*;x2=5N>8DXUKPMP;EMLBS>f1er zQ@k`B9439YOuKxB%Z9+_&@*SeJkttC06o#7WaqkYwKFsbNHhtOWgCe zqdeK7|DCt27I^LO=!t-*^T&WyPK+Kk(m8EEyttF@niscM|BMy7rzWlNkK??lWK2$d z<;2^e9bX&k43%|eylVV$QBg@QnK`@SrqiPo@kYs5-lalZXC=+VdL1(zbxuvrw(o!9 zc;Zg|l^OdpQt!@a{@Icx%+U8o?6bS>ecKgtRipNqb!ELbN!2EWq(oY zeZp?~{c-=%y1-hQS?kr!LPDp?fBk1#{n+ZK*Tz%t?HCd? zJSQw}sw{6+zP!6`PV*TLGu`jim5hZaUTEbfODNQ(d{cR5mj77l!R{;UQ^dG@`Hu6= zPcl33mf4~H=aRhYdEPP$yBVLhbyZv6AtvI(gnDy@Zy)kB9^9F)t2+PTN9Iqb zIRwvh#1{N8+d8ZEMkmw$IJb_9EtVCPj2~-w7s-XqIhSkZP-9+Z(6ET%bpHR!GuBdl z(>5tEKai2VT%FO)ws(JWE%Tjy+my9T)#KQ9ZcHv(d-?0Ux1Jmo{O?YOzmY9mA>y5} zH~X}Qd{I7k%njRgp4yVx2l_4+Zmm==R-0_D>rr3SZM2u+N!85&vqPW#IXBs_Xy=eu+Nc}S z^{kM8sgzb-T~Sg%RFvPr-wgf&ocnv4OzH#crfl8y*C8S7$edQ`#%5;~V9K~wAuH;m zUn}B(n4=uO&iMpa9p^24-jn}_>W$mTOY{`vXAC(}E-=UTtIS+{+@-}1uh>fJ%l zSB7-iy { element.checked = true; await visualDiff(div, 'disabled-checked'); }); + + describe('styled', () => { + before(() => { + document.documentElement.style.setProperty('--vaadin-radio-button-disabled-background', 'black'); + document.documentElement.style.setProperty('--vaadin-radio-button-disabled-dot-color', 'white'); + }); + + after(() => { + document.documentElement.style.removeProperty('--vaadin-radio-button-disabled-background'); + document.documentElement.style.removeProperty('--vaadin-radio-button-disabled-dot-color'); + }); + + it('disabled', async () => { + await visualDiff(div, 'styled-disabled'); + }); + + it('disabled checked', async () => { + element.checked = true; + await visualDiff(div, 'styled-disabled-checked'); + }); + }); }); describe('RTL', () => { diff --git a/packages/radio-group/test/visual/lumo/screenshots/radio-button/baseline/styled-disabled-checked.png b/packages/radio-group/test/visual/lumo/screenshots/radio-button/baseline/styled-disabled-checked.png new file mode 100644 index 0000000000000000000000000000000000000000..2d2e18b5db3f32eecf7fe6585fe1392fe6c416a7 GIT binary patch literal 1403 zcmbW1>p#;A0LFh=9Bs+moqeVjb*$qSB6VEX#H6|8wj|dx6)MV9?joC8ST>?E8W~0> zVy?rPTk0sXFf~TzvLbS8boMv&;`=-=o)^#a>LEE}?c~5PFaQ8@7<;s<#HkXDWMw4k zg2fz?*sdF{b|`@P20jM>(k2+RjoYmv(Zf&Jsq@O+R@gUewDXnj++G%Nw|h6sZz|7o zOQut)S4&v9A;VXabwYgX%|z?7Gdipep9pyR_;Ms5ZLr3&uG5Rx4O=f-9@skED#U-S z_w3_ti`zTi?VVjg<~aZfx6HFLGv%sk zY61fTyZYvcz8ar_w31r1W(SaAp-9?&PMJeGLXuBNH;nczp*S2qM8??X1~KBz;N3er zmQ%}(k1k8nY6~iZp|l4A9KxWC3X&NNLKz_o3rYz9IW?{5@W#PooNb)+Y?ROVTx?LN zh~-)_jP9J*!YC35glug2Yq`c|6m7)xSlUJtj6F*V){cXDY_Ib9{0WPZ=$?*_L{{JQ z8N#ZlnK`%IG?0~bZM5_~M7VNu!4a;ZQ5L83g24+%c#tRdQ%6N)+U?%>Z7~gzeL=M>*5;kZ4s?D5E8BtY z*mKlQO&&mpkvl9ogNmxNye1c??_liJi_!d$0qDyiYuet{83GLXV5Y&c4KYFqeoe1< z)#o=8<%zrr@`Btk0Vx-$xf3fPOChs*p4WFF6upz|7*ln7fH38>$XLs-pU3VWur5bV zmOL5F{@HKpK{apxWHmg0kB00YY)eAq7lyK>?!3Hlb7Hv8WVHH=_^(RX;`DM;C~;_^ z^o4Ed*?#Jxa3i;302*AC*ESth)zF<7{*68f+d6T1wverQcIM>#!|#G3ez}{_N1u!I zFO+{*Rq9;T0_U>7rA=n7Yx|QIyAp;DkPJT` zP0yViTvNR+(aIdUOC=#%u1?#jI99iZtZG6ZcG|Lh#fwurPfY(ERFo2Y=`B0y z1>b%PGiGNN&`d`#JHu^SMt zE)_7R-+MepJ>=ELw}DHPyLOD?LA6b5oS$m?L6sD$(Wx3Yg=DW`=4$JLxt`}iZi0O% zU0eBn!n2w*a*0@#dzxu}eVP-gnR8UH))|=`YI??i84n7jYECViInZ;Dr1QqcP!(>P z{@Z_ixX7xTUfJY!Z9Mn;iHJJ@S5dRMM7t*3b2YnB_LmSt4DX#wg=Bq{m%J%}vBjd9 ID8Hot0a?DVmjD0& literal 0 HcmV?d00001 diff --git a/packages/radio-group/test/visual/lumo/screenshots/radio-button/baseline/styled-disabled.png b/packages/radio-group/test/visual/lumo/screenshots/radio-button/baseline/styled-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..8be54565521593de2381d07526c0d7aca50a327a GIT binary patch literal 1309 zcmbW1`#aMM0LH(QY00!Tr*xSVm5SUO%WYC48TOnN+hWBLC%17}9n_wo7*TYR8cq|k z+Se^C9Z$x>V&$=1LWeAuVh8PlTsr$3dfw;rzQ4WC`_r50N5I2%cj^KF0Qd6rAZoHe zgAGhaBte|pI}MaMXNQJ&Cerh%}0MpdVvqCyJ zIOv8gQpaJ(868R{nI9Hrvjf%AX_7C#Ur&}~9m-_19F&HxY$cIMp>=`NO)maF0?co$ zt)+P8iEJzu^l3x!eKV@cG$_ynnmm+ngR1Jz$kFn{cin%|!v|kxpR*3JwOr{Q_rWIFYKD&2C)vcef^*%M68UR;J2H3_Jp(U2o{89Ko zgISkNR(WAaa%MXMkBXW!hXn~5UN>&r-XnAdghQXJeQ{LbH`cpjUu%dWu_}H`vNyK1 z;i;e9phe^PbncE+7oi#PsUp8DqDy>XLNgGHe9VP(F?YVzO@PgK!vd%J*bW;JzFlJzs`(H zk#pp-f5v={C@1Ymw@*P&KN>s^GW+a1(0klO3lx~v;;Zkzk@l-8&Z%kgqs1L@y$x!| za4tD|Z!y)qvv;UIbi<;|>8f=Y1%AM2iv1<-)vT1{fpE{&MXYKCgA~~enf}Fl$!XM zF33i#eL&m!Eh>ePrfZy(^U}~I?QBQ}=I|5pT>G%M85Hda26}XI_6b{#8*B%(5y(ri zpem~bJ+dZc8H2_)Uvnbg-^?m~^}s}D$!d{%%btE6-Yp@#ghaQ7ce_|K>+ci!u1wd`eoty_tLG@_aQ(6$gyzE04dRGj{`W>}f!w@0-tPWN78?*sgNCA?F-Jj?Re85h@seybNuS^GH#**NMA>eVrE*36j$wlyst{vx3e(kxg9tP1v- zda-ysRAA`Qf>a*Q^w}0I#hc$w-kX?eTdtw~Fm}-|W@i~c>%l0sF`m?)V;#!SLgy2K RxLnQO0bVBw9-upo^*?_2Yvup| literal 0 HcmV?d00001 diff --git a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js index d809236a2f..685c423412 100644 --- a/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js +++ b/packages/radio-group/theme/lumo/vaadin-radio-button-styles.js @@ -134,11 +134,11 @@ registerStyles( } :host([disabled]) [part='radio'] { - background-color: var(--lumo-contrast-10pct); + background-color: var(--vaadin-radio-button-disabled-background, var(--lumo-contrast-10pct)); } :host([disabled]) [part='radio']::after { - border-color: var(--lumo-contrast-30pct); + border-color: var(--vaadin-radio-button-disabled-dot-color, var(--lumo-contrast-30pct)); } /* RTL specific styles */ diff --git a/packages/vaadin-lumo-styles/style.js b/packages/vaadin-lumo-styles/style.js index e18fdd4b4e..25d73d7ee7 100644 --- a/packages/vaadin-lumo-styles/style.js +++ b/packages/vaadin-lumo-styles/style.js @@ -62,6 +62,8 @@ const globals = css` --vaadin-checkbox-label-font-size: var(--lumo-font-size-m); --vaadin-checkbox-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs); --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2); + --vaadin-checkbox-disabled-checkmark-color: var(--lumo-contrast-10pct); + --vaadin-checkbox-disabled-background: var(--lumo-contrast-30pct); /* Radio button */ --vaadin-radio-button-background: var(--lumo-contrast-20pct); --vaadin-radio-button-background-hover: var(--lumo-contrast-30pct); @@ -72,6 +74,8 @@ const globals = css` --vaadin-radio-button-label-padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs); --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2); + --vaadin-radio-button-disabled-background: var(--lumo-contrast-10pct); + --vaadin-radio-button-disabled-dot-color: var(--lumo-contrast-30pct); --vaadin-selection-color: var(--lumo-primary-color); --vaadin-selection-color-text: var(--lumo-primary-text-color); --vaadin-input-field-border-radius: var(--lumo-border-radius-m);