From 6b0daf9c3107fe8afbd36ade4d2429d8abea0f53 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 13 Nov 2024 11:39:30 -0600 Subject: [PATCH] Checkbox error state HLD update (#2467) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale During development of #2018, I realized that implementing the error state of the checkbox the way it was spec'ed out would be much more difficult than originally thought because making only the label and square checked indicator clickable would break a number of tests (inside & outside of nimble) and would be against ARIA guidelines. Therefore, we decided to keep the effort of the feature more in line with what our original estimates were by deferring the work to update which portion of the control was clickable. ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Update HLD ## ๐Ÿงช Testing None ## โœ… Checklist - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. --- ...-b2fe6cda-830f-4aea-8378-049b1f65f3be.json | 7 +++++++ .../src/checkbox/specs/error-state.md | 18 +++++++----------- .../spec-images/checkbox-error,no_wrap.PNG | Bin 2443 -> 0 bytes .../specs/spec-images/checkbox-error,wrap.PNG | Bin 5186 -> 0 bytes .../specs/spec-images/checkbox-long_error.PNG | Bin 3489 -> 0 bytes .../spec-images/checkbox-no_error,no_wrap.PNG | Bin 1537 -> 0 bytes .../spec-images/checkbox-no_error,wrap.PNG | Bin 4286 -> 0 bytes .../specs/spec-images/checkbox-with-error.PNG | Bin 0 -> 2239 bytes .../spec-images/checkbox-with-long-error.PNG | Bin 0 -> 2779 bytes 9 files changed, 14 insertions(+), 11 deletions(-) create mode 100644 change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json delete mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,no_wrap.PNG delete mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,wrap.PNG delete mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-long_error.PNG delete mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,no_wrap.PNG delete mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,wrap.PNG create mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-error.PNG create mode 100644 packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-long-error.PNG diff --git a/change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json b/change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json new file mode 100644 index 0000000000..1779231130 --- /dev/null +++ b/change/@ni-nimble-components-b2fe6cda-830f-4aea-8378-049b1f65f3be.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update checkbox error state HLD to move plan to update clickable region of the control to future work", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/nimble-components/src/checkbox/specs/error-state.md b/packages/nimble-components/src/checkbox/specs/error-state.md index 7bc762ba6a..970b35c8e6 100644 --- a/packages/nimble-components/src/checkbox/specs/error-state.md +++ b/packages/nimble-components/src/checkbox/specs/error-state.md @@ -25,20 +25,12 @@ At a high-level, the design of the component will be: - The `title` of the text is the full error string - Red error icon (`nimble-icon-exclamation-mark`) on the right side of the label with a 4px margin between the icon and the right edge of the control - Control indicator (checkbox square) and error icon will both be center-aligned with the first line of label text, both when the label text wraps and when it fits on a single line. -- Control indicator and label will both be interactable -- hovering over them will put the component in the "mouseover" state and clicking them will activate the control -- The error icon along with the space between the label and the error icon will not be interactable -Below are some examples of how the checkbox will look and behave with different configurations. The blue outline shows the bounds of the control, and the blue background indicates the interactable regions of the control. +Below are some examples of how the checkbox will look with an error. -![](spec-images/checkbox-no_error,no_wrap.PNG) +![](spec-images/checkbox-with-error.PNG) -![](spec-images/checkbox-no_error,wrap.PNG) - -![](spec-images/checkbox-error,no_wrap.PNG) - -![](spec-images/checkbox-error,wrap.PNG) - -![](spec-images/checkbox-long_error.PNG) +![](spec-images/checkbox-with-long-error.PNG) ### API @@ -66,6 +58,10 @@ The styling changes include (but may not be limited to): - Verifying the label wraps when the label is longer than the allocated space for the control - Ensuring the checked/selected indicator is center aligned with the first line of text +### Future Work + +There are additional changes that should be made to the `nimble-checkbox` to align it with the design spec. Specifically, only the control indicator and the label should be interactable. Any other space within the `nimble-checkbox` should not be interactable, such as any whitespace to the right of the label or between the label and the error icon. This change however, has both unit test implications (because unit tests today simply call `click()` on the `nimble-checkbox` element) and ARIA implications (because the element with a role of `checkbox` should be clickable). Therefore, it is being considered out of scope for the error state feature. + ## Open Issues _None_ diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,no_wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,no_wrap.PNG deleted file mode 100644 index 3422b5df0b3552ad134a70583c7332f74f14ecc0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2443 zcmai0YdjMU7ame&;+N&WCeO;w2}W{h~)i0RX^$J6nj$cI0du zc<=6Qe~w#uZaWAOTx`IAnm+lNZL$+%_c4?8i-^3pSKsfc zNiA$H6`w*&jYM2hb3%`b+4SAOIZAcWU5l5)cE;pyy&DuddCER-_LV?>eJd|zri(1! zF}T?|5ONU#H+bRMeDA?*IcX*t<`%~u68e>sg;?;MGa3~i<=x+%R!HxBs7k`kLxeF- z3T-tCQbSjc6=MaTxCZg0OjGBo^~y2Eu-C%DJ4jAE(rs7fHy>o zpv@sfuU+Dwb#CgO%YR|m6Dn-am%yMm@a6sEub>8^qTogz1AtCcf<|5M=M%OPpEeEq`@3654{}ZlhHj3 zp^}D;)3k=4*}LZ-TF-uvCdV~C2ROB^bEI!p)4(r}*F($6Rwq`w2-Cxi7YpI)=GsB& zn^#}1&hL%7m!7>vhKQ=Sg zvK9`%KVL)<`#9T8)pg6Oo9gXI@@)yUPyH6y%gyguqKm1HhZfPoub_rI9`U9W&6gUD z@35nytvmUZOuo1B@z`l~i?Pp=$MIzZzD@@t`sA9ADgN-+bPTAkGV}~RH@Am{@dk(UWVkx}B z5GPlIlaDuR#yZVo++IIl?UW;nxiv%S6P#{M-^QnX5#*5Q!;P>rUhE>zy4EZ6ON1J# zc7JJWx%jB*89kEN+Wf67WKF8%2P@dq$zn+;$YdmuZSN1iif~sR9n^kZLAL#d2)2iC zjV}?jkFoTEd)-IsL*SvY12=Soq8-$2)1!u54dmPIQVP14Kjf1_`P_CIg=#avk5M1` zS}N@tn%WRVwcMeQ)-dcOsPlAt+=K_nOkGWEu6oYSCXym$nXHqro=Ae-R|oixuFxx^ zBeO?-uhHt0KhHBb_AHV2+~1bax6#)hHy0fEEsPpjg4(v((hp~})JulV1&@whwq;(+ zy*XDtLe*$#iEHmNmbqL$^K>i2Z{=%rSuE0Tk+MP(WIdb^c|f8X)c1LqyU7Ha>n5^sY*BFbxn^-xXgM7zE2p8r)^;sf&3Mg6E-`7$Ra zooPPok#9rxAt9|`FeSZ(Yi}r5&cnG66DOI*#bJe2L|7BS<9LnVlB4;`QDy(LgUBQC z%U|(Y#7$&{NaA}@LHyfaA?=op9uM_rYUjfIrsu91>`s=$>&(o4ky^}!B~`IwI|+*i zpYH~q;2=vB_=WBprYDN%6U-(pjJ~2=$6tBQ=F!+!E4n||)bbt8vh-3|8+Bpmj7+|F z+neNHIZ3@7Z!hIdA7Gt#q^#K~Y)7UEu8C(*7shF?>#Sv`dSR_zlKBj=wCld+nYA9( zMi|_+wv;v14z;;+d`!>UUJY^U+KR3$XSHlq+Y8|qA4uP;)i{dQ4@QnMT+h!olOk!u zs=rJ$5I4~9)lLrw*}AYTgqh?!Cpl8qkMj;*v9YD*38xSKm`T(qDXU(_{dG-OuBx8}b?TOJneUIGCU)G&{Svch`+)3FZ~9|5 zX-6;lFG8F|TfZ#RnYA*TUy*{H>ngTcC}@pzbOL)(u3KKn-Sg z9R@LdqHEDwXM3^&OZN`PGd*&;C*6$b_>M=|mZs;OGA%oA^YU19^Q>tybnokR+4GiZlCEDznt)yWz-jF)}Q}y-?Z8BNM%U zeU5emVFP33^ceDXii z{F(X9Lq}+*uMmLH)xkr%sEi;v*y|h~)8C7iWp6{Qv*} diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-error,wrap.PNG deleted file mode 100644 index b99baf52fabe260e19cb06ebd5288ad00af3ef16..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5186 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 F{{tsB4OIXD diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-long_error.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-long_error.PNG deleted file mode 100644 index fd825ef8ddc8ac8f71faca1caa641efaa9f32bc5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3489 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 YT?Yl{K2PlJuT^~Ja3rkmirb_A0BpS9>;M1& diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,no_wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,no_wrap.PNG deleted file mode 100644 index 003128bce6b8331a43e88a4ecc8c969a5bcc12e8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1537 zcmZ{kX)xOf6u?8>>WU++vne%Hdi)htbp|Dg60`=j5sAA>9j$Az>PpnjwjmN*MBOIT zRh8D9!rH=tYZtg; zASA%mrBBYSa}7_ZgB2W9JE*wCb@+VDZkmBW^i0tM4}PvMeBat76a*6QJQkkbpmI+T zi2n(~!t7QAW-Z?xrGPq>awx+Vjqnf>A_|@)=`}7pdL#XVA~0D+9I&wJ_{6tH>%+&`wP!xyK$@#R3=({H3`95W_f%o^3?GeK$vS95r$!F6oYk$K#gc zqiqp8Xq!!J%U^k6c0s9;_MO`vvgGMHG`;8p-SAW9cwI)+PT6fHp1GIfY|J?yEo89E z4bxtb6NBbIwmcltT%syVb3|AwIU9m_l3SmLzxK&E!_0vKSP4nSQ6&n=oa4+tIT!-mHsa7aOx$rpg_SCptXU_@=R^ zMrf)sN^AXNyk+VZ`2jorC&=IRa1$YJiuj|kvrp{4wC8wu#7Q8=2erz^iY_HCl6jlb zDL)ySygmJ(-@Dx*SZd@|PDy;#x~tgTs?bvk!sQI7%7^>g_|~4mKsozyCvOE6+ci~C z_s@z^R?G&Yu9&m;zMj8=7LCM?<}KGJr?nJKyw>j18Z-P|N^4EFZQThxQsY_@aQQ-F zo8I63(}M$+Yk4Kf^S9t`RR+jpQ1N<|#ve*wok3Ez;`<|Df1lLTVeuwo-&hvD z*+6(;Z>ilv(EXg!K}0cgRXxR5kmdcMFdM$hp%KmWJY(8y^Obb1Y9IW=JE^<+TNxyG zPBA7Lpi~su#H4VZ&+W;tpbn9IRScP!D2a0oFvgvrym4osj^3Kn@vYW%QKS*2OUtyn z_AM}7Ggc#30^8(2_5H%0$^bOi4tL;K#rQOowAH9p-5%N#q$@Wb#Csb5^lJ7rO;h#w z1_8ay2WsBpZ*LhvmxSdu(y>`wG z60#ec`<3z)<_26`ady9nhZ(1Q@#kr%V-fr^E!WD-gFpB{ma40*0F{&}DNe8Ef)!Nx=zd1c9%~mu2rOjHleKEP1JW#GgKCxD@f^=@Z4bXGq*;V?56!z6&hcQO;MBQuA4io#1jFzXkO#V*) zRX;XfZLn+r*CdY;yBj3Eky);zrOok#~T4@36 z2_N84yT`|*@Ks%iVY_O4@naW2MwNzc*ubgM|4*$0Z9o`W!wz}wXaLTY+|)Uy*pH<8 h0d)UaG7+5coo7#H6V~^ekSQ12AcUo@MJ*ir=pR{b$teH; diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,wrap.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-no_error,wrap.PNG deleted file mode 100644 index 102442152923ea452c8898c9abb3d46b97f45c0f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 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 KL27iJV*UlzL|}3N diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-error.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-error.PNG new file mode 100644 index 0000000000000000000000000000000000000000..f7016f6131969b713157c0475f9dfa47193bf621 GIT binary patch literal 2239 zcma);XEYlO7spd=m4=$FO;N2H4J~S`m@#YC-n+IMC5g8PL1R`+tyYXGB35i_L~2u1 zj3%urYL6JfQ;+98=l$}2c+dOccmL;q?z#7#dq3U8$3{AgSGlhO002gauBPd^7M>$Z zM|&O}^Ax1Rs0O2hRe53yX+` zm?pj?(b&3t5ipR2<{B;w7$nHk{-0>$cbn}vj1cw)OTIy3)b-6bG=l^>E7elb z&eNUS4*5#ef&*cGVn3oaI?(biATV8Zg|6*kCfzfKPb;IQt!8GT9-QcVOf*Vip;Pbj zrp>5!858_X+TFNNsyuqP90}V}x7Pqh!ZcP|gXlx2byzI5_y(8bpl7_C^?qjbh4s)K z0{+YxNWm)k?*OIgyw{4ovSiz=lF5I9ojp^W_QbA>X?w=}~+J>#< zB&7+n)ECc_LfN|?X$TZ}*A6azE*t7P6DrpaX-nxpu$hOM%-Usi`A=Fa#V3um->3)> z+5KxRp)+5a3g<5g!~e=`yjx@F$d_uOfJ)nn=^%PU35IwAAZU!MVorITlxryqzqiJ8 zeMh!pB(8sU^+x>n0iH}%hR$ldS8o%kXs4Q?OKnsA33iOwdn!f>7~Tkb?u zc*e)!k|DOv2{LMUrtoE^?UPktiXSc&jj!q4`UD*)#nGa-`^MQJmkEj01O`o}$A~ofWp?4K4IiqRM zM~=2RmuGybyQ3m0 zbo+Mo+HP-I>o^qTOaBgrSOi*6dz_6qNv^I4x}z|NwkpOql;&tH0eMAnkHIHi_bA2l zY{?MuZX-9Y4-%xx5Wie`WB&`Z z8B3zoFk=M{KMRPY)lxgXMzEe6=nvBA)v5Z>_HmXcdHXG!+ep zkFQ4=;9p4;ewj*YKn?A;mWN4P-hkh{LsAA)l6A^5z%VM^j}u-{AJgNU01y(7vF1ev`|#`Ysc$5#w||$ijJCm(^qBQIU_?EW_O>)of`~T< z))xY?B?`pXl-$CepgHtYhvgLKI`*vKkYCemNKyfwKasnTVWH|Y*KI^To&2qPcajEo zQB_Q>*ET}}-pa=lKsgZTwY#0Q5b}CJ47MT^9f{n~Wgl=7cc_6{pkH3Oc0HHRLG+c$ z7vn8mFukd~d6CsgElb6MTDX21NLqdF!0h^!6B^cW-+(kp0Z5s9EpKpNKk~iP&toZE zc^-VTr%3t_uG(Hvkv+T4!V(*{acu!?w5K}wM0Ox;RDM~-a9k*|(zlkQO@k|lMlbIE zL?NTIURuE1Ar~Z6V6cZa6BubJi(N$TcJ)bEw$AP|h&J?t9BFtQS9ZN!Nz8sjogzas zVrGRQ9=t#Q-8I9wjhftXax11r_fCaXd$x666+DXSz{qWkOvqso6K6wW&yS!?t;fq(=jT$M4#f0S zArDNKS~i5=GCGU8+EJX$kQqrX)IAT0gA=UG5%b_*eKZrVODQ-P6SvN}MqP%J2joA- zs+vlhkHd<6_ua8ELponHH-&?{o~qouo?pj)n0Blkt-;kvPR2VNfBI*f0d<|aFSV@n zs4GZpO+cQ!Of}lp(8He;oe_1H>!9Sjmb!OCM$)>Y_T~xZsE?lsQdysNrBk~8H`jt< a&Hyye74GuVTGpID9RP@yktPQ06!SMLJ97X4 literal 0 HcmV?d00001 diff --git a/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-long-error.PNG b/packages/nimble-components/src/checkbox/specs/spec-images/checkbox-with-long-error.PNG new file mode 100644 index 0000000000000000000000000000000000000000..e01fb66cf6fb842ab016daacbab614baff2a7152 GIT binary patch literal 2779 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 VS!s&?dq67WaoWeV!TG|Ce*==rTWJ6Q literal 0 HcmV?d00001