From afaa1d56299faaae3444db15a5510143237c9150 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 6 Sep 2024 10:43:47 +0300 Subject: [PATCH] fix: do not set step buttons opacity when field is disabled --- .../test/visual/lumo/number-field.test.js | 13 +++++++++++++ .../ltr-step-buttons-visible-disabled-value.png | Bin 0 -> 602 bytes .../ltr-step-buttons-visible-disabled.png | Bin 0 -> 515 bytes .../rtl-step-buttons-visible-disabled-value.png | Bin 0 -> 602 bytes .../rtl-step-buttons-visible-disabled.png | Bin 0 -> 515 bytes .../test/visual/material/number-field.test.js | 13 +++++++++++++ .../ltr-step-buttons-visible-disabled-value.png | Bin 0 -> 504 bytes .../ltr-step-buttons-visible-disabled.png | Bin 0 -> 408 bytes .../rtl-step-buttons-visible-disabled-value.png | Bin 0 -> 504 bytes .../rtl-step-buttons-visible-disabled.png | Bin 0 -> 409 bytes .../theme/lumo/vaadin-number-field-styles.js | 2 +- .../theme/material/vaadin-number-field-styles.js | 2 +- 12 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 packages/number-field/test/visual/lumo/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled-value.png create mode 100644 packages/number-field/test/visual/lumo/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled.png create mode 100644 packages/number-field/test/visual/lumo/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled-value.png create mode 100644 packages/number-field/test/visual/lumo/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled.png create mode 100644 packages/number-field/test/visual/material/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled-value.png create mode 100644 packages/number-field/test/visual/material/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled.png create mode 100644 packages/number-field/test/visual/material/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled-value.png create mode 100644 packages/number-field/test/visual/material/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled.png diff --git a/packages/number-field/test/visual/lumo/number-field.test.js b/packages/number-field/test/visual/lumo/number-field.test.js index 0c4f33d4c50..b4ddabbc995 100644 --- a/packages/number-field/test/visual/lumo/number-field.test.js +++ b/packages/number-field/test/visual/lumo/number-field.test.js @@ -110,6 +110,19 @@ describe('number-field', () => { await visualDiff(div, `${dir}-step-buttons-visible`); }); + it('step buttons visible disabled', async () => { + element.stepButtonsVisible = true; + element.disabled = true; + await visualDiff(div, `${dir}-step-buttons-visible-disabled`); + }); + + it('step buttons visible disabled value', async () => { + element.stepButtonsVisible = true; + element.value = 1; + element.disabled = true; + await visualDiff(div, `${dir}-step-buttons-visible-disabled-value`); + }); + it('align-right', async () => { element.value = 10; element.setAttribute('theme', 'align-right'); diff --git a/packages/number-field/test/visual/lumo/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled-value.png b/packages/number-field/test/visual/lumo/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled-value.png new file mode 100644 index 0000000000000000000000000000000000000000..9c61d2a104768235c15fb230c70dcdfc65568f83 GIT binary patch literal 602 zcmeAS@N?(olHy`uVBq!ia0vp^SAf`ogAGU~X-4`2DaPU;cPEB*=VV?oFffUDx;TbZ z%z1k^*86qb5<%{$l3Gk%Y3&Sl}sOIuF< zFOOt;9y7;Y-Se_q)Y>p@#tj{>=P_JRVPTaJ6iILiXb^N{bi>WLYs9WE=AG)g@aZJ> zD;H}DWi(%Yz4Ef;M=^XAV!x29Eoe0Y-acGiXWD{sGLk(HhkXE(pT!s&pS_U3QR z&5um@b3@bK76&sKC}|w%Siqp%#MHyVg~B;I-B#=DHDeLSg%69CKDLhSlfP~hwQ~8{ z!2aox%WnVfoU~;9;t)t31l*SycB{mJR@LkIEu zex@>NrT*-Uf2>2kEqMKL^1c0RZ(e?Q)9toq@_(xv_pcuOw=OPi=AsqvZsv5>ui2lY z$>I>p`o6qi78`B5)6>4#eBEGu zbkCW0o3we$cHdps(D5+ZpTVzlfr3YXfQkl(kO&JWR}%}XV^foYqvHf5;ojdo_j0yf zT^qLbZk6NQ%jPnCS!Oe@WL(+zo+rxwe#Cn7uUlf?+FDwKiC^~YJ-&F^#c2?U$?!o$okAmmZP1~*OLCNe)pW8-Eua}0a^d# zUVVHYd|Pn${jbIUmdEX5pL1pTZT+v6*UBO?KF$An-F978uV%QY&(r)~Z5Z}Gd=%l6goz4u$AOrwGs?6-jR^97q98?Rk`d-kr?f8WplB_Ogq zzbrPK-D;}09oBHTB6Fp{qT+1jf!$Zr-kaQb5<%{$l3Gk%Y3&Sl}sOIuF< zFOOt;9y7;Y-Se_q)Y>p@#tj{>=P_JRVPTaJ6iILiXb^N{bi>WLYs9WE=AG)g@aZJ> zD;H}DWi(%Yz4Ef;M=^XAV!x29Eoe0Y-acGiXWD{sGLk(HhkXE(pT!s&pS_U3QR z&5um@b3@bK76&sKC}|w%Siqp%#MHyVg~B;I-B#=DHDeLSg%69CKDLhSlfP~hwQ~8{ z!2aox%WnVfoU~;9;t)t31l*SycB{mJR@LkIEu zex@>NrT*-Uf2>2kEqMKL^1c0RZ(e?Q)9toq@_(xv_pcuOw=OPi=AsqvZsv5>ui2lY z$>I>p`o6qi78`B5)6>4#eBEGu zbkCW0o3we$cHdps(D5+ZpTVzlfr3YXfQkl(kO&JWR}%}XV^foYqvHf5;ojdo_j0yf zT^qLbZk6NQ%jPnCS!Oe@WL(+zo+rxwe#Cn7uUlf?+FDwKiC^~YJ-&F^#c2?U$?!o$okAmmZP1~*OLCNe)pW8-Eua}0a^d# zUVVHYd|Pn${jbIUmdEX5pL1pTZT+v6*UBO?KF$An-F978uV%QY&(r)~Z5Z}Gd=%l6goz4u$AOrwGs?6-jR^97q98?Rk`d-kr?f8WplB_Ogq zzbrPK-D;}09oBHTB6Fp{qT+1jf!$Zr-kaQ { element.value = 5; await visualDiff(div, `${dir}-step-buttons-visible`); }); + + it('step buttons visible disabled', async () => { + element.stepButtonsVisible = true; + element.disabled = true; + await visualDiff(div, `${dir}-step-buttons-visible-disabled`); + }); + + it('step buttons visible disabled value', async () => { + element.stepButtonsVisible = true; + element.value = 1; + element.disabled = true; + await visualDiff(div, `${dir}-step-buttons-visible-disabled-value`); + }); }); }); }); diff --git a/packages/number-field/test/visual/material/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled-value.png b/packages/number-field/test/visual/material/screenshots/number-field/baseline/ltr-step-buttons-visible-disabled-value.png new file mode 100644 index 0000000000000000000000000000000000000000..e9439988406a1244d0aae1f2735844c0598e2f70 GIT binary patch literal 504 zcmeAS@N?(olHy`uVBq!ia0vp^SAf`sgAGXj+#wweq!^2X+?^QKos)S9WN-3xaSW-L z^Y)fv@goPB_J{TPehL%Sl_yR;aboh+sWmHqoSLleuQbsk1qfpNLQ0>th5hk}dRHmJ z$+Nquylnc(!#3xO83pfOo5yfR*wJyq0tJr%0Tm4nArTf%t|k^%$EGF)(uMamWv)2= zG34-;Z!Q(*zi(APAo@69`sbB?e^ws8DCRgpu*RMa`TF3i6ODg-8j`0*xuxqy8{N!6JTQ9qM|EGz6FE1>+ zJ-df*^-kY_*~@MneyA4D8{Rv;>Syh*KVCLyjd=LDse6_Dj7Uo{an^LB{Ts57Qf8K#;*VOTi395`^_KOox`5~u#CHR@BEA%(!ZDgy>WNzY3{D8 z(a#Rg*#3L^D5z*~aB?{{A(-jxroNYFEIWDQ pM||J;r{0_#H$TC26Xm%V(!YE!P3p?5c?}F|22WQ%mvv4FO#sbRl(+x@ literal 0 HcmV?d00001 diff --git a/packages/number-field/test/visual/material/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled-value.png b/packages/number-field/test/visual/material/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled-value.png new file mode 100644 index 0000000000000000000000000000000000000000..e65dd3c7382ea8e08f93a66b33776a7b0815e4df GIT binary patch literal 504 zcmeAS@N?(olHy`uVBq!ia0vp^SAf`sgAGXj+#wweq!^2X+?^QKos)S9WN-3xaSW-L z^Y)hF22aQyN30JzJB`q^R3N4 zuPl2Q^S5ID#x()*SC_5)w)N-dsy&z2KMeFu_MQEkC$$yirVB>V`&O=h+@Jh4+-_67 z<(0hMCthrrmD+U6{PqkOA(77Ee%eT9H z`?7x#f4A*D-FHF~>dytsE9X7ms?O*=tF4%K_VcWF1#Lj@-u#5s_Y3OzR=wW!YS+1~ pum6AgCFbwtFhN(I#31|2cFyn3atYS2tAJ6-;OXk;vd$@?2>@Mj%Qyf4 literal 0 HcmV?d00001 diff --git a/packages/number-field/test/visual/material/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled.png b/packages/number-field/test/visual/material/screenshots/number-field/baseline/rtl-step-buttons-visible-disabled.png new file mode 100644 index 0000000000000000000000000000000000000000..46e89ea4038d8ee2c033a755c7c47bb14c4ba0fc GIT binary patch literal 409 zcmeAS@N?(olHy`uVBq!ia0vp^SAf`sgAGXj+#wweq!^2X+?^QKos)S9WCwe?IEGZr zd3#sa?}!6K!^Oy^h@I{ZMJ!L`7(1T?ef3arkLYw!(w?aOdYbTu=`}i@mFInpUS6qr zS#oK~?8`4pq#PbSTA$Bw%_TrUNTh{@RngJWgHqff;=t2gey-M>0__nrk2 zdsFRtD!1F8?mJ-(ciEczW#*4IxAR+0X_%l67e#jZufl-KCcT-ndV2pq{h_@Ns7_a& dB!Asw+{<)n(%u{CKY?M*;OXk;vd$@?2>=MUknI2f literal 0 HcmV?d00001 diff --git a/packages/number-field/theme/lumo/vaadin-number-field-styles.js b/packages/number-field/theme/lumo/vaadin-number-field-styles.js index 10e64340d91..bf2fe273c8b 100644 --- a/packages/number-field/theme/lumo/vaadin-number-field-styles.js +++ b/packages/number-field/theme/lumo/vaadin-number-field-styles.js @@ -13,7 +13,7 @@ const numberField = css` text-align: center; } - [part$='button'][disabled] { + :host(:not([disabled])) [part$='button'][disabled] { opacity: 0.2; } diff --git a/packages/number-field/theme/material/vaadin-number-field-styles.js b/packages/number-field/theme/material/vaadin-number-field-styles.js index 252201996da..a7e4274fe3d 100644 --- a/packages/number-field/theme/material/vaadin-number-field-styles.js +++ b/packages/number-field/theme/material/vaadin-number-field-styles.js @@ -12,7 +12,7 @@ const numberField = css` text-align: center; } - [part$='button'][disabled] { + :host(:not([disabled])) [part$='button'][disabled] { opacity: 0.2; }