From ecfce51fb11b979168cd00ba2a5cd3b262a5213c Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Mon, 27 Mar 2023 15:31:33 +0300 Subject: [PATCH 01/11] Updated buttons example --- apps/website/public/favicon.ico | Bin 25041 -> 0 bytes .../src/examples/Button.borderless.tsx | 24 +++++ apps/website/src/examples/Button.cta.tsx | 24 +++++ apps/website/src/examples/Button.default.tsx | 6 +- .../src/examples/Button.highvisibility.tsx | 24 +++++ apps/website/src/examples/Button.size.tsx | 16 ++++ apps/website/src/examples/IconButton.main.tsx | 15 ++-- apps/website/src/examples/index.tsx | 4 + apps/website/src/pages/docs/button.mdx | 85 +++++++++++++++--- 9 files changed, 180 insertions(+), 18 deletions(-) delete mode 100644 apps/website/public/favicon.ico create mode 100644 apps/website/src/examples/Button.borderless.tsx create mode 100644 apps/website/src/examples/Button.cta.tsx create mode 100644 apps/website/src/examples/Button.highvisibility.tsx create mode 100644 apps/website/src/examples/Button.size.tsx diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico deleted file mode 100644 index f0c612a6c36907fc79f32ebea7e532aabaa569ee..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25041 zcmeIa2|QI@^gn#ADKi<%Or{K_6r#9_kPHctc}yajP#LaSR7CScDwNDJgj^(PQYjQ6 zgvd;0=fC%Tp3{5tq~RHU|Mz`Azw`O5_P%@XwbysAz0MxiIzkW}LWQuhA|Mq)T&NIa zGlC#OLVx^D0p;nSOiu34-(m=2$_W~P2ez*jN02#X1d#;4K~qrjM>$9k(Csfh8d3-= zpm?nn)F@sOLDeOZcv$u;%%GhopaBa_A@q1W0riR5i<;mCP`m^(0Q&J{}cr#Ql?GUMt zzP>&b(zUapq&_hIEvslTR#JMasg#sr_#sb0LnVn9>jRDj<2O)b`Gz0+LC%lyVd>BK zJ4Sm^*;{rb{b4-h>CgD3Q*2Qgz%P=p;~U&qALRVnD`_yuUsJ;ZU)23UEc(2+5uKi% zMu&!mzUhaYAL@Vp^KP&M&HM0(L|EO##01*k-%sj?oL_GZBYOXC64s2ALjLuc?j(YF z?3tUJL({Iup_(feebvA17V&66XoR;V+S~m{+mWd+=;7*1B!YSPz&h9lwzbj{iO1#- zrl1TDs0G$#-i$-XMu#wwq&zHxb$_Aw5J3i65QIpHAOzg65o`;2ATL~JgaF|I!S#pqd{@#RRloBuunSv2 zEt{4jD0t@~wQK@qzthLxX$xe^0V)NALegDLPg)0|&4G0c;(&E>f2Z#s@qj+zx=UKi zpj=3BO?yPlMepa`{)^msf5?DtE{>hvGS#aI2!Q{d;@eBbS86H64Ittfv(mHs>khF%!R3)Qr zADYp#k=`Wv7!EKeun+u?^h;g`+LHD-a=F<4@v!?fs+n_uw1;5($WkC5?jw-o6YWUr zIr)Bq%?ZE}5BnyUH9rsP|Dx;4;tbMy;aPe5t6V7id-5?H7TE!$wJ<;9`d{V*;IN%9 z7ybsa4avuh=^9(CFqz~j)W6gXtFPn7=r10mysN4ug2tJDY;xM zuaxfkQ~4MUI48DSWk|LG&kEm>PqJ@J-qa5W{>mb z!?T9oT1Kq0$ba;4pK^#Al4>A1gf#W4Vw=dLwa&i(K7#R2q zj(;j2lULsPl5~%OcNv)f-UH|4%aEg*QGBDI6}t7i|3 z=66Z@4fPFe5z<1shrEB@(Xjg#?EAa2F+8At{vGX``{#GT%qt|nk78p1>4JAXOg4E6 z+T*RYm(`H*|8PzqgzxG4&pzd;mg{81gj-2Pe$O9R0PFl!tz`X6>k%dkOqG;

Uj3 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 { + return ( + + + + + + + ); +}; diff --git a/apps/website/src/examples/Button.cta.tsx b/apps/website/src/examples/Button.cta.tsx new file mode 100644 index 00000000000..bb50f56266a --- /dev/null +++ b/apps/website/src/examples/Button.cta.tsx @@ -0,0 +1,24 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex } from '@itwin/itwinui-react'; +import { SvgAdd, SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; + +export default () => { + return ( + + + + + + + ); +}; diff --git a/apps/website/src/examples/Button.default.tsx b/apps/website/src/examples/Button.default.tsx index a3a55bae70f..0515fd7b5d2 100644 --- a/apps/website/src/examples/Button.default.tsx +++ b/apps/website/src/examples/Button.default.tsx @@ -4,13 +4,15 @@ *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; import { Button, Flex } from '@itwin/itwinui-react'; +import { SvgAdd, SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; export default () => { return ( - - + + + ); }; diff --git a/apps/website/src/examples/Button.highvisibility.tsx b/apps/website/src/examples/Button.highvisibility.tsx new file mode 100644 index 00000000000..cc4bb378bc9 --- /dev/null +++ b/apps/website/src/examples/Button.highvisibility.tsx @@ -0,0 +1,24 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex } from '@itwin/itwinui-react'; +import { SvgAdd, SvgCheckmarkSmall } from '@itwin/itwinui-icons-react'; + +export default () => { + return ( + + + + + + + ); +}; diff --git a/apps/website/src/examples/Button.size.tsx b/apps/website/src/examples/Button.size.tsx new file mode 100644 index 00000000000..a3a55bae70f --- /dev/null +++ b/apps/website/src/examples/Button.size.tsx @@ -0,0 +1,16 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Button, Flex } from '@itwin/itwinui-react'; + +export default () => { + return ( + + + + + + ); +}; diff --git a/apps/website/src/examples/IconButton.main.tsx b/apps/website/src/examples/IconButton.main.tsx index 5836ebe0e0f..03ad7620674 100644 --- a/apps/website/src/examples/IconButton.main.tsx +++ b/apps/website/src/examples/IconButton.main.tsx @@ -3,13 +3,18 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import { IconButton } from '@itwin/itwinui-react'; -import { SvgAdd } from '@itwin/itwinui-icons-react'; +import { IconButton, Flex } from '@itwin/itwinui-react'; +import { SvgAdd, SvgClose } from '@itwin/itwinui-icons-react'; export default () => { return ( - {}}> - - + + + + + + + + ); }; diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx index 8de49416650..7caf0123b63 100644 --- a/apps/website/src/examples/index.tsx +++ b/apps/website/src/examples/index.tsx @@ -37,7 +37,11 @@ export { default as BreadcrumbsLinkExample } from './Breadcrumbs.link'; export { default as BreadcrumbsMainExample } from './Breadcrumbs.main'; export { default as BreadcrumbsTruncationExample } from './Breadcrumbs.truncation'; +export { default as ButtonSizeExample } from './Button.size'; export { default as ButtonDefaultExample } from './Button.default'; +export { default as ButtonHighVisibilityExample } from './Button.highvisibility'; +export { default as ButtonBorderlessExample } from './Button.borderless'; +export { default as ButtonCTAExample } from './Button.cta'; export { default as ButtonMainExample } from './Button.main'; export { default as IconButtonMainExample } from './IconButton.main'; export { default as IdeasButtonMainExample } from './IdeasButton.main'; diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 3438d34e811..d7c2d19e2bb 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -18,51 +18,92 @@ import * as AllExamples from '~/examples';

{frontmatter.description}

- - - + -Buttons are the recipients of a user onClick action (a mouse click for browsers and a finger press on touch-sensitive devices). Buttons have states and events and should be used when a form is submitted (post) or where the button represents a clear call to action on a page. In some cases, buttons can also be used in place of href links to draw special attention to that action. +## Appearance + +### Default -## Button +The default button should be used in most circumstances. If you are unsure as to what button to use, use this button! -### Props +### High visibility + +This is the button to emphasize an action applicable to an area of the page or a [dialog](dialog). High visibility buttons are used to draw the user’s attention to the main action of the page. +There should only be one high visibility button per area of the user interface. + + + + + +### Call to action + +The call to action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in stepper-like interactions). This is the biggest and most noticeable button. +One CTA button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. + + + + + +### Borderless + +The borderless button is useful in tighter areas where using a default button would visibly cause too many boxes. + +The borderless button is often used by actionable icons in relation to another component. +They are commonly used within [table](table) rows and widgets. A good example would be the close icon within a modal, toast notification, or alert. + + + + + +### Size + +There are 3 different sizes available, which can be applied to any button. + +The medium size should always be the first choice, unless there are good reasons to use the small or large version. + + + + + +## Button props ## Split button +Pressing this left side of the button will commit the action. Pressing the right side of the button will open a menu. + -Pressing this left side of the button will commit the action. Pressing the right side of the button will open a menu. Upon selecting an option from the menu, the action immediately takes place, and the left side of the button’s label will change to match the recent selection. - ### Props ## Dropdown button +Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The menu button should only be styled as default buttons and borderless buttons. + -Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The label of the button is not effected from your selection within the menu. The menu button can only be applied to default buttons and borderless buttons. - ### Props ## Icon button - +Icon button gives the icon the correct styling as well as adds some clickable padding within the button, ensuring icons meet the necessary touch target size. + + @@ -72,6 +113,10 @@ Pressing this button will always open a menu. Upon selecting an option from the ## Ideas button +The Ideas button is unique and should only be used under certain circumstances. You will need to perform an audit of your application to ensure that the feedback button does not cover / obscure any tools. + +If the button does obscure anything important, we suggest adding empty space at the bottom of the page so the user can scroll far enough down that the button doesn’t overlap the underlying tools. + @@ -79,3 +124,21 @@ Pressing this button will always open a menu. Upon selecting an option from the ### Props + +## Usage + +### Style types + +- Use default button just about everywhere. The default button can display a text label, an icon, or a text label & icon in combination. + +- Use high visibility Button when you want to draw the user’s attention to a specific action applicable to a section of a UI or “Page”. Remember, there should be only 1 high visibility button per section (e.g. in a modal dialog, or above the table). The high visibility button can display a text label, or a text label & icon in combination. Icon buttons should not have this styletype. + +- The call to action button is the primary function on the page. There should only ever be one CTA on a page at a time. The call to action always appears within a dedicated page footer so as to make it very clear that the application is awaiting this main input before it can switch modes or views. The call to action button can display a text label, or a text label & icon in combination. Icon buttons should not have this styletype. + +### Labels + +Strive for a single action word with a well-understood meaning. Verbs do the best. The button should describe what it is going to do and nothing else. Remember that all labels will need translation, so if the button absolutely requires a longer string, adhere to the _twentycharacterlimit_ rule. + +### Icon and label buttons + +To reinforce the meaning of a button it can be useful to display both an icon and a label. Use this option sparingly, and reserve if for the most important / frequently used buttons only. If you are unsure if an icon should be used, probably it shouldn’t. From da246f335c559f240a84d9a10eed1771c7431143 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Mon, 27 Mar 2023 17:46:24 +0300 Subject: [PATCH 02/11] undo delete --- apps/website/public/favicon.ico | Bin 0 -> 25041 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 apps/website/public/favicon.ico diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..f0c612a6c36907fc79f32ebea7e532aabaa569ee GIT binary patch literal 25041 zcmeIa2|QI@^gn#ADKi<%Or{K_6r#9_kPHctc}yajP#LaSR7CScDwNDJgj^(PQYjQ6 zgvd;0=fC%Tp3{5tq~RHU|Mz`Azw`O5_P%@XwbysAz0MxiIzkW}LWQuhA|Mq)T&NIa zGlC#OLVx^D0p;nSOiu34-(m=2$_W~P2ez*jN02#X1d#;4K~qrjM>$9k(Csfh8d3-= zpm?nn)F@sOLDeOZcv$u;%%GhopaBa_A@q1W0riR5i<;mCP`m^(0Q&J{}cr#Ql?GUMt zzP>&b(zUapq&_hIEvslTR#JMasg#sr_#sb0LnVn9>jRDj<2O)b`Gz0+LC%lyVd>BK zJ4Sm^*;{rb{b4-h>CgD3Q*2Qgz%P=p;~U&qALRVnD`_yuUsJ;ZU)23UEc(2+5uKi% zMu&!mzUhaYAL@Vp^KP&M&HM0(L|EO##01*k-%sj?oL_GZBYOXC64s2ALjLuc?j(YF z?3tUJL({Iup_(feebvA17V&66XoR;V+S~m{+mWd+=;7*1B!YSPz&h9lwzbj{iO1#- zrl1TDs0G$#-i$-XMu#wwq&zHxb$_Aw5J3i65QIpHAOzg65o`;2ATL~JgaF|I!S#pqd{@#RRloBuunSv2 zEt{4jD0t@~wQK@qzthLxX$xe^0V)NALegDLPg)0|&4G0c;(&E>f2Z#s@qj+zx=UKi zpj=3BO?yPlMepa`{)^msf5?DtE{>hvGS#aI2!Q{d;@eBbS86H64Ittfv(mHs>khF%!R3)Qr zADYp#k=`Wv7!EKeun+u?^h;g`+LHD-a=F<4@v!?fs+n_uw1;5($WkC5?jw-o6YWUr zIr)Bq%?ZE}5BnyUH9rsP|Dx;4;tbMy;aPe5t6V7id-5?H7TE!$wJ<;9`d{V*;IN%9 z7ybsa4avuh=^9(CFqz~j)W6gXtFPn7=r10mysN4ug2tJDY;xM zuaxfkQ~4MUI48DSWk|LG&kEm>PqJ@J-qa5W{>mb z!?T9oT1Kq0$ba;4pK^#Al4>A1gf#W4Vw=dLwa&i(K7#R2q zj(;j2lULsPl5~%OcNv)f-UH|4%aEg*QGBDI6}t7i|3 z=66Z@4fPFe5z<1shrEB@(Xjg#?EAa2F+8At{vGX``{#GT%qt|nk78p1>4JAXOg4E6 z+T*RYm(`H*|8PzqgzxG4&pzd;mg{81gj-2Pe$O9R0PFl!tz`X6>k%dkOqG;

Uj3 z*9ifFcftYa$M}=rJsXw@{m0_}cJ}}qydM()k?t!nh1lV~h7q`9!aCT7^=}LM4;TR+ zc*ku4^c6eI8z?Z7{74vnY>x)xf^7}|11P`MCBOh}r4(YFPmxD#(bvx(fOV)CCG0c* zItSQT;C>7IFpyX1w}k!+je*R+*b0Up`c#_gYf$WgzF>Gpefp^E8-Eryj{j+!0yu2} z!TJA2=Z1=`B>xwNJHM?OH7^cEC2m@x&eDHr$isKZDqz4+F+B;5~W+@Q3rn|8bAPC-3YSXuhaZju#-`@m6pWc+?*x{DcLU0{{oRQGJPX*Ui5A?l9c*Q|#S_ z>3knAHWzTch1h;H7oZ-l=ik^1w3VOv9)E;iI?3j@@MB|{?<0oe_;Ui_TJhvWF3j~VRU@jt--6+7HNfA(NFu@uH0PQ1MJ)vo5_hyGXi z?*7PrF#VIKYWU_stl{v3@U)`4^xK z{VM*S=^oZArte0f{~PXEp!TKf^Vj zT%W(2|DV*q;Ef$9Z=x|Nj`9B`{KHdYXc&k;U~wRko8~CbwLk7J|8LhnjGe7b+eN|- z@xwS8oCCNPEjh1G+HZf?X2{$B*Y*Q3W3=q%&ac=>YblJyo&WFcUw1VfY5)2=>(3uL zw;;vv6w+MKmEhf71Lgw~%%G*p)_*zNy1_7K(p;4>Nh$uj0qXfXVyS)S%$#H@J=O1$^@@A9+9Di=UBW{a*fe z@c*6j8+ptLi@lO#{$3u7zkLty{IdTVKm2wP#%>pimwgXERt9}^gM))V+~59d{1_JU z6viHZ7JnpfKR!PGO-z=24*n{08}4l+Rb++>h>$CL6fpb>tSI zFy3yhE&9{ADkg(G{WtMraa%*B#iV=tCTR+Ey9#Hl1>w$>M*c*y}>Ea&p{Q z{@=2n`7w5@&B7?89coK|=tqR{N^<;Ip8Q*H4C_KE{0@EocL=cTSDpo8^q5X<7t%d> zIl#PNJb3=M<_lqh-!4E~g7hozEoLj2zUHN+5ED7ZU&#ZWZ({sdpD>>Py;%Q3WBFP6 zd|Scffb^%|W&CU$ppUx z9)QCTP|E@szlR;RHT*X*{L{Vwo&{}c-njm+*vhYt4`78h6%Pom-I(rS9+nCHYCpf) z4n+sSALGG~hlrGaq0GouzUhR1YtS|J~VI<{HZE+O*tju0eANr4Crodc9

zUui8y&p5w*J7gQp$FPx($Us1 zf?sPvqNM?e<^B|B1QEZeqoHo>^RDm8(Sybx-w%}Lj6dxVprB%lcoFDH7q+o&F;%6q zr^CiQ9coDr@dp>J7T(%GNvYWYkLC)nukS z&A}ST!N|&H8~apDK4<*uNR{Kp6>)Oa>yN4(t(o(yd(5_4zGklPR9Aj!OV{vG8KKy7 zm%2K(dNvue#X2V2mKmGLFf$m6&~AL1FC7^qXBg~RpikEx@l5L8{gmn3G=xjzX{_ugW8iW8){2&Q`udWq}S(if1KTB#NibG%sGupEcizG>JN<{iyefPw0bZo z)f#O-D-~(f+{muFjYBg~i1y4}9#J1z(LBCY^rX}4_fdzd@S^ygu956SWkmnP%D&-z zY6SvY;I*t_X2Oys_wxwLB&4rX;Fl(|Ufz9cxxV??)TXp%6Qsu{Ktcn}Vl45)4J?W9 zkG*mstJ#?|fL18nTc)pIQ*1Fc@knzZ>ukkp=YF>4Rjm8$b0YQ4w|PYbwYKu>$~bD? zV$gXdg_smO2)9*8Nv{T-@W#02t2mm!#Sxd^UPG*+*v872`2PNmvz+H7>7U^9@Z)CN z`@BF`C4-vpcdTRQQ`~S<^0D%^*B(^^CxIF?w>_s1%KQ*@FGC?XiTMyi8s&@S*R_~e z>fUXXMwEQ2VucR5mkGV4xMII_Lzg<}=Ssw5Khr3mQHr+|ejB;)5=%__s~G;sFH)i( ze%zA}1fRn(}9C)5{ zC*7mKJI8bRbYknx)7rKdJA61U58CaF?RaLIT7Yw8SQD;5xqGV|hZMJF)<%vHzUHiM zI`eH!*)kabgkBcSCgJ8)=Y#NuQq_;OQ!^Xg^sQHI* zx_^!CsG2h2ipliLwy_~vUPp%9KpDcl)08PlvYv`=*R#sV@J?ZsWq$a0kD;l-$BomO z2U`3EK5R1O$QP03Mcg{s2y~gp3&&f0s$vdmXMfIZbmvSIIz3o0H=4n1_l$+h;Z?)S zt?yL)JNXpmT)CO&W~rhZ1Mf(#EwgpuO! zbC=C;=a!B~$J@7Ocn#%HXIt*(tTYj_ATnkn$7w@vB)ci}DlahxbK_xw5c%nK92u6V za|x-B3XR)Xj?ESyeoRTAshSsCdCgxn!+Gv@FmoMad&I-&;ytQ+i z8C&sMam~I$)we+pgc#(Ijj>Pfiq^-mocZwK@c8W&c=UpnpwxI#>Pa(+e7nZ6Shn{srh!W$I3=fW+Np;i~gDmhZ*YDXPf2kSF`Tny_h*vUo==% z!+Zdux-ZP|f<0X3iRH(+sMPz>pKMmP&2EtU*xF)Xd#IAv(mim=1=*DLS*vckEl8h+ z?tWaW)cB6|O3~vxu1RIgcnK<6yztKxJ|o&ob%u%(r7y1j0~KN-)lYnF5_ot=tDb40 z;K~_yoQageP3msTz#VDVbEnH?02Z(Q#^@c*&02W`%A_2m_~YEnx}40;MNv$OX~_z* z)`D~;%W zDuay2T1pFC48J+jIXox8NNr$&oKF@tHY{Rxxa#fYE44n*I_maL? zs4$+RyNpY8&&{?Qx9RVM(-*s*?O3hSq#G-CO;($S0cdfLN$iu)gDZ5zr6VmkLT+SH zSH~b*SeKXdb?n<$$LVuyqSflw62g-ft_CF7WA$n`9l2()Lhb%u%KkiJt5`MTE##?D z;JFBv<~)QZ-PkSVHt|RbQFp&h>0lo9<~zo2v``3l$H%tnMO~+w6lsffW0zKQbvILh zH|t0$QTIXk3Mo!rB3E}EMT48Egvj-2vGwU0_j#^@{>OYhB>1fJCsk|BtsBj zZj#%slYX6Bt?b;6+uK@Z#PrviRQc9SG#PO)@`Uf(q`S)L!Ik1ob&OZfM3%kfa@mX9 zx!zh!->cKwI_mIKRYLDm0n0I~p88$kH@Yg;c`e?{>nHfi?Lx7K=AnbO z46eR&#MLgvAI)m}h>?k>nI1oGz%d*6_l%;))V8NxeiVvL9U()nAp04&7LObqX2u8rwY65>QMN z@F>pHVlHM;c&}QJ&9LpO!A75!i#;42AMHOC7iOBtDDCUyqqr7x_MCxUR^ww1%`DoW zN-`WHp( z>STACdWeZs>X=lGu0&EQO}D-eD1@s?L3b5vzw=Z1qZS5BQwKIg~1GJWUXi^=|{^HUYux+@KgOP`yx zh}AX(N`ggoqTZusvzN2-$;(RDFUV@^Wu1Ez`AUYi+=g16z@v6H=q-AC%b=`)hfed0 zvNt=g6gza%7i+Eb52|NLe>r;bNwUY9XGGgwx#`AtBnY?-4yx+SM|6Y|Z9n~J`o!TVen9LaJ5OIXds0J`=sB7Ov z#1v8wB|meeej?bJgUDLjyv-~N{&IWy>@%71qMW&k(2Hub*BNzcs-}(xR832_GDpQa z3d9Qr+R_Hvik`aB;I5t37<1uj-H?EH)Gp2?_1u|^@ncp=Het`4H(WY(wkKk4gJ|{O z#LVE-%-~&W<>qtt`F5UOT-oyN0}qU2Q>E7z2Y5eK=3zA-aYfkb-QD)>XZVVqec6N*)U}mydNXin7JlgRb;r$&Y}}-Ews$Xo3WdkO zYsG+S6)LL-35uOH7ebFZH?!4pJ(#xrtS_{rd{XzsqZ-*xZ$qj)Sc;t!0x}^ zqq~*=+{N^=_7Rp8CUsUhUv1`W`Px;xKfBD--yVo-8VEi!Jt|z1|9pGEY~Z$aUO)yobGf%ZI7@MLZ7oo79`3jo%g*7_tcdCpdDOwXz+kkBV`-3w&1)!xb)aM`|I&%M zw-X=lC3oKnpp?Wd3D>GKX&pmH{0BT}rSVF9lj;Sv3|x3tEBx_>X?^HavHm)0-tTDi8(sMh54xo4Fpx&0rsHPdcXoHJM@WkGkJ|Dk{DTpD!mSv`_d&c%-PoNd!6mh-eZ2X%f9Tu}hQMD40jsR~dQ?;k#pkzI*Q;3Q{gt#D3VveVvo@A3iGgNuWkPl?i{rKJrXDWMIo zD7c=xB&u}7Q9|0GZA{NK92`y|N#gH__o@V)S;HnJm#jJIO?xjwJtL&T&ZopWH#b-4 zwR@)D(5$z_E6-5_y73KMbP1xTSh^gYUeyK=j`Kc7Kc$8*8I5Qe2yg5=`DkuQ)3%+* zUoHz{xii!|wwCYM!|DwF>yy*sjL8%J(lUgAx$xikK8RnZ^# z6>@eHaodfIAE{7nI?&iXU64Wm{T8^7`W1V`t94+HBl!lVNsv z5k7Ml=zED`?rG*ldWhz>){#k8Mw-LniBhML*wf3G^*;b>xw1fUJeZl>yLXo!aV%BK zl%zWwvx2_f|IxIH95q~SS7sPrzd!lJx`u@>-Xbzcy*ZvB_$s>=r>u9Bb0XSW#dckFuYta9H8#2y)cU7wURfo<<^Wh%2Yn*VQ>6DHLSb zf+)A%9$-^dDlBnG_Xm4w|D}ly>6NOnfwpqA@iobxa<9HjpdwzF>fGLN#8zxZ*x+0X z+SjzmlWWBTKlajHw?ma=1Fn@Imk)O}gr{007LC1o_s%EWUJ|SkA*uIueTt4O%i}jY zw$dYJ&C?K39hbd(_20ce;=0KJp=meXz80K293DrgWZ4dHsb%JniliuQ@#rz}l}Vto zH9ToOLj|?mxVdH5y(wS+()gsYCF*p<))|0X>BtZ}nA@^-UUo(j6c_6pSWe(XaW4bQ z_0pYm))_8ID;yZ|Ng0t31JSwzK?z-{yJ2bBH?+!m17lqE9+?tf>yqc+&r+uC9e2s#!&tN!Gm`s zU+)p=?v-@kxM7U}@_MpJM4BxuDf+?b8I@H^?n>!XJf4-_rwV0Xj6|06^54`;2~VOU zCmJY?a-EKA-waB%i!hhm0S~>1d6Rn7Wb-IKJrV*RMXnc-jiSs zFbMLRpYr_TDm&-@X}jf+72fo*ZPR5%%4InWCU>cK_?=Uxq3^w9u=_|&WFoPBXcR)? zU!wycd2GcGw|{=K^RnCekUHYp<4*;m+KQKI=R4hUW*|Jme-N)9hexhAyBL)PZ|a>n zJQ~;oA-0%>u2|drlBXan?nJm}_7E$D5wAFN5oddte&~&m7p?2UJM*NUy5m@vf=Sq! z^bT()#EL&~AZIr?gVNs?M|x%yAFfCed2^BZrHI$0UzbMA-kNftmQ$Bju{GPuuQ>X= zjN8>oAc}`F^a@aPVTPKqEhSttvtY9IJzzw*gJkP+sfx9 z?PgEkG`AV3K*P|v)G%oT|KVj+JYx!z)N?yV<4@OKPc90RG&?13CcIodq(i9uioVsJ zVQYNcIK_VX&554f#s#w{3SR8z!Bt0d?BU5aqN!MswE9FBc*m^O3TWC7=t(y~ffgmXft#-<*{h@)gy|Kux6ld~_BQ!+X~^yEHnwzGM`@G7iK}M0QgZH60s$tsL3&Xv@;$G&So0W-vVDg!Wx$p~{Q&MdxWQxd<9EsuwZ|uOlc_hZ8!g zZq_OLPE>kiy7bf*l)9{2{rN4Dq7;70uFm4tNNRAU2ysPHxl{vdEM-hZeSCVh$cK$j zc1LWi87R>k_A*zCvDXWB$?_`R!EuLQo;8-O=e+%KGZt#xt?`#r8?^js>OXC0@EjP3 zS>9>1kD0RKMwL<5j`(i;wL99hQn(NmJ?e)!stFm)8(4WR*0d)JrW13#w^iCNi}TF5 z`8-3`kBP%Il#g)}bLhU}KB0k(VC|TYqbm;itB$TUOyRM^(}!Gp1a39dJtZ_?>g){n z_O4bXUY28Z-JVb`q7k&rm`#Q*(~RndS*;!ScH6+vS?ZJ#3E9(#(#W%8x)<&`aeiKP zj#DC%gK>M8fsrK6(|N9g^ZXiL<(w~xu0$zDxBgO8C1G@$-+;)mLy8O3pX zFbKMQr>O1JA!j0}g<=J_AT)NM%xBU@b&Jbm!_0^cQp}Y>XQwVM0yQFv*O8j{v*H5x zoSqTD>0HT~>b2#zt=(X+py{~8F3>-I8cx<@_kAWDrW{6yb08Z*{h0pJFQIIvtfw1W zSq`(t%*LEHJl9uYzC73=AZDs`cfxyuP8gf12&aF!(YZuns>Pr)9lX*VJhLun*%Tf& zIyEY>m0Ao5t`$FQvTk{V+@du!ww@^??8oqQ#0QQy89(q-lr7zYP}$joy)ER}H7Z-9 zSMKJ;n}iM`Vo01wUOc_Vd0z5*JgayZ8=`)G$reOhye_LPq!4Tl_AXK}AOWlwFxHK| z2rbx})X(!Q!2SP-By~y9x#ovZ;kzi#p9Si7)NJFYDO+lUh=&;?>U0F5t&CzwklZRu zcD#1%;TAQ}?K8cEJCd}aq9LMmksBAiWT!F!>t-a|X6;y3#?X{n_K=f?vN#PDKS@z_ z({3t@pcl)wvV)^Bs9#L46XQ5MPIb-uyePp|J4jS#O^OyP&9V);&pxSjm-yhFAuM-sU3^Xs7A82me(^WcmU-59btB)j3G(xd~ zt^TMN-_G!=@#n;{ky?7izO(ZyE}d#v!c7!mQkR>yl^?dmwIU&VWh*KZVw+rWX3 zQLo_hy6AJ3En54Ux5`|cS`#_qJj|@aec5G(&*W}K+k=la;DolkYlU?ue-JYpF;q86 z2ifMzt6Fhywq@-s-p+&4*ZITD&CSiig9eE6!#k9riaf2$_TrTo&1AM-Y*VEfOs=d^f|abey(4`!PXAfgDBBV+0}PxweB4gl8}y5mwecj z-L>9&^2u%HJqZu-c9CoKa;8`HA~x&!lq@f~u&+I)K-`F%S^knnD)oyz?XtoMW{&$E zQ>tLtqKWm}QzaV`CRpt@3Zl=UL|-Gr6?7dKend0*_;%4E3%Ii&502-qqz6|8(o)08Ig z)TWTR-<0KgOzgRC{0A^aANlF651wfs3*G~axr;wic;Y#`n*P&i3*~!moKZezVuUSR zCthDxI^nb@pj`4shs4eRg2Wmkx0>|TmN188w)4~Z2S25&m_K+Rg?k+sD2OB6j-Cs8 z`>`g5O(-_ZIhtG7v^2tMAmFmuCaaGDOi>MH=~RxfrwEVU5ne44(0q2Rma$?PZQnYt z9+~?i52A^ulzp^j?NTyq#fn3qd(rjwRgj>polpva%wkors83nG?ne+p* zpKKP{Zg_J3O#@TGmQV$pr68|a-WLf+2HN*8%=-nE))SdjOY9aatIb{*mtD(7U?4hk zzUxcKc2#@WR1{*$!qznTvEO^?liBBHi2CuloAit&0UURGaBc*8(*$`iA*Ll045w8G zB`xD?&)RRaU^cFA1EX{3JKN{>(SKLEH~3FlpBNX0D4(i$FOX?*^NUK#x_vx3PvV6w z@GcvHIyh@QD!i{w*tl&TKe~xkrDnP&e2bsXvq=0}!{vJ_gWPb}6t)${4+dT36^^*# zhptXZNqVz_&Xk%d4tYzlk!j7T>1|Yd#-H2V>in21NzYRf$j@WRKs;n&=vC8~;`3!+ ztqFfW%Nnr;74V`z)b;pmiXLOp=(sPGSnFl;Mnx^bYTJt~E-6%r#(tyRa2yIVmL;>F zHfQvCbZDx(3b0PS;w}1MIhCt$#fEj6f&U4>;%?Hq1^N`i?sa}MJWBx^jJ?Qi-etc)3X!r zsO+FfU=uaeJ}6XRQPN<3S5Qm;>civ96_-g|(p&uMa_$F7+4Co+I#<5zp55}qVoSuS zx1k7uL3Y=XV)5|u;)>olxY=Kt+}>p5$&#Z`V^w^dbER7aI#=njrhDS-BX%3s7oTp~ z1V5r2&gii&mfk6W2*rN%%4<1HhvaE~+Dkl^)0LIuszy=9dbu`f^=^3ycO|g&2RUf3 z0+*>&qoU}woArbkZO532rF6@ z$?I!4)A3oZP<5B`Djr;xltX=@qiBJJLiPu2+WT88T9p`9;M2bnX1p?YMjPMDuu z?d-m}V@~>WeP2~#SGTICpHsZZtVqps)m`ced94p~I!|y>)Q9R_7spcWY%$$BdKq~gGd+M# z3JF-398-6?s?_~y1jqkq)~vgd;z9W_(Ol}IC+{DRK4kdHBASahvEQa!HJhbdyT59q z2YrJ4p@@bcXGA_mG|zS_#p9Y1>h;xMTsZ@ z92PU*nIE&D@7ED8w4rNN?H;|=vUGz5!AuEfOxPrXh~y>Mk2ySL!?CXGOCElq{LCHa z!4Pw48)1>|Ri}IByBcognB_QyhwZodJlDvhar;ZbYZe02W<%u4txXzCo;lPReTTW9 zrCC2cuYBy7Y-ZH*^Qt`-=T)aHE~blj+(I5l#uJA>t(3EPTKjpZO)X%E_m0mT=ZTO0 zi}q@C%&qP=>#r(zp%bFtVKG>Ly=v%P|9DKiO2`GCh;(tjtLy0RGR5E8%itr5tnHWs zd(gu~6Z9D6o4Y-J=E%LRy-Pu?t~`YfLEf>hiyJhEc*>!)ro=}s!VjJ0p7}I#9om6^ zKdX43au|n0e@OUZBMPNA2hHwI+}(;4E~Pe8ou!t!JUpPiD|cTH9OwOXii|%09kV9B zSt|ZaB9y)stdsdJ+Q$`WUT}YmIL^{BSTM0&m&^7&yKYQerE}ckgnrj@aLd;O_v$xQ zq_IN%?|owb${Lv0x#os6qs7nnKDb(UU|HLU^cxnu-|;)hz3ssfvf7%CzWD8lc|vO| zPcGdqv1+&cy^Dq?^fnhRU3SV|Z@V52t_WA>9`2zzJ6&gXB|u&z>hPNPS;^wnrx8K~ z$26r#T>>qiTbZEhh7dShjuZUUTI#BCUT+#4Zpm&iAGI*KCWiPpa>s7O|r|NuT5Px`Gd+TJ2#B1g~3}6_*npoh8 z&w2da=OO#P&OV+q9g*wOx;C>_&zgx|qUhFVQhFD3kv-WYi`rYMQ>?f;;wDAG%~pXs z#SYT7>t=2G{kd5(nnO0-wUOH+FP@b=Mi4zcy~;zaniIc^FXFST=Wu}!FkRqYeRzjf z=QKEmJv>?!@P0r;ZeK$hxY5H{$kAf142p=8{oG8K9)9)*8jLb<`~9YzY;}c(0AS(Fp!0xf@!U!za_8(jQPbTI|z#vp&=7i5KwXJHK+y z(1`NfX}|Z~VP>M(A<7pl&RdXe`a-d^6s-v~uKJgqtz+GUE*%HX0t$R7JAr3E3JzE8 zrvyvyoM;-@86y9fCdC&Cw_X)T9T7^&=N@=nh(*PEV(|fs!RDd*tgh~wsa$II@b~nH z(p#UDsy$gU#O})?>&@<6ENrp?M}f<=Hfm|iaOS-L0Rt$uI5b*)G6Xk5SeB=87?ft?OGCz`}? zjtx0kE{|)^U&trCU3*Am{E$U#l%gZ)X)54O)732gW_QkU&I$UBqPyAO`EQPSKYrfNN+5Y^|8y<@b`h6`UyUtIFUZ>G0d8kawT-aG#H$4&cbl|4bm`o+4Y3(jxr+_;sg|*JX5+ zjY0i%c=^JX>0E0j?fz5>G33zlaGW%!7CRw{)5jsB?ZC2X@X0{fL*(^M8s!vYKH9L> zB^Ly}7stl!nmbnir8r8Lr2bxrd}ykMeY7QCu4lrHPmiV$eHt0n zki`kUvTzoVxW;oDIUdSzN}`uWbl8z89B0mh@5;A4H{G436+r33WXnbwmV`TTjDfgU zBQlPwa`sjx+tSaxo>c>PDF%FFY7|9pAjft2(;F#v%n0TPJ*2t3#3Lt{yEF64-N@)C zBH}^(xl1Jvds3K1&KWQ3aqnn(wJRt^!|`Qo)HoCSu}ySBlaJIpkhsIP-Z46y1iwD? z(8zuDAbt?K5ZpCgW2_MyJVG Date: Mon, 27 Mar 2023 18:03:34 +0300 Subject: [PATCH 03/11] update bullet points --- apps/website/src/pages/docs/button.mdx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index d7c2d19e2bb..9c70d75aaee 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -129,15 +129,14 @@ If the button does obscure anything important, we suggest adding empty space at ### Style types -- Use default button just about everywhere. The default button can display a text label, an icon, or a text label & icon in combination. - -- Use high visibility Button when you want to draw the user’s attention to a specific action applicable to a section of a UI or “Page”. Remember, there should be only 1 high visibility button per section (e.g. in a modal dialog, or above the table). The high visibility button can display a text label, or a text label & icon in combination. Icon buttons should not have this styletype. - -- The call to action button is the primary function on the page. There should only ever be one CTA on a page at a time. The call to action always appears within a dedicated page footer so as to make it very clear that the application is awaiting this main input before it can switch modes or views. The call to action button can display a text label, or a text label & icon in combination. Icon buttons should not have this styletype. +- Use default button just about everywhere. +- One high visibility button per section (e.g. in a modal dialog, or above the table). +- One CTA button on a page at a time and should always appear within a dedicated page footer. +- Icon buttons should not have be high visibility or CTA styletypes. ### Labels -Strive for a single action word with a well-understood meaning. Verbs do the best. The button should describe what it is going to do and nothing else. Remember that all labels will need translation, so if the button absolutely requires a longer string, adhere to the _twentycharacterlimit_ rule. +Strive for a single action word with a well-understood meaning. Verbs do the best. Remember that all labels will need translation, so if the button absolutely requires a longer string, adhere to the _twentycharacterlimit_ rule. ### Icon and label buttons From bf6138eeaa5cde3db329e8f6a868127f50731921 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 28 Mar 2023 09:06:42 +0300 Subject: [PATCH 04/11] Update apps/website/src/pages/docs/button.mdx Co-authored-by: Jon Graft <849817+FlyersPh9@users.noreply.github.com> --- apps/website/src/pages/docs/button.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 9c70d75aaee..525a9dea091 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -130,7 +130,7 @@ If the button does obscure anything important, we suggest adding empty space at ### Style types - Use default button just about everywhere. -- One high visibility button per section (e.g. in a modal dialog, or above the table). +- One high visibility button per section such as within a [dialog](dialog), or above a [table](table). - One CTA button on a page at a time and should always appear within a dedicated page footer. - Icon buttons should not have be high visibility or CTA styletypes. From 8bf1088f26d3f16ca9e677f82590ba919e05f141 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 28 Mar 2023 12:45:39 +0300 Subject: [PATCH 05/11] Updated docs --- apps/website/src/examples/Button.size.tsx | 2 +- apps/website/src/pages/docs/button.mdx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/website/src/examples/Button.size.tsx b/apps/website/src/examples/Button.size.tsx index a3a55bae70f..6b9c45a54aa 100644 --- a/apps/website/src/examples/Button.size.tsx +++ b/apps/website/src/examples/Button.size.tsx @@ -9,7 +9,7 @@ export default () => { return ( - + ); diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 525a9dea091..4efd8e06c6c 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -43,8 +43,8 @@ There should only be one high visibility button per area of the user interface. ### Call to action -The call to action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in stepper-like interactions). This is the biggest and most noticeable button. -One CTA button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. +The call-to-action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in stepper-like interactions). This is the biggest and most noticeable button. +One call-to-action button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. @@ -65,7 +65,7 @@ They are commonly used within [table](table) rows and widgets. A good example wo There are 3 different sizes available, which can be applied to any button. -The medium size should always be the first choice, unless there are good reasons to use the small or large version. +The medium size is a default and should always be the first choice, unless there are good reasons to use the small or large version. @@ -131,8 +131,9 @@ If the button does obscure anything important, we suggest adding empty space at - Use default button just about everywhere. - One high visibility button per section such as within a [dialog](dialog), or above a [table](table). -- One CTA button on a page at a time and should always appear within a dedicated page footer. -- Icon buttons should not have be high visibility or CTA styletypes. +- One call-to-action button on a page at a time and should always appear within a dedicated page footer. +- Borderless buttons should be used in places where a default and icon button could cause too much visual clutter. +- Icon buttons should not have be high visibility or call-to-action styletypes. ### Labels From 611d12b466c03bf8dcc51c36b519fa6182eddd9f Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:35:07 +0300 Subject: [PATCH 06/11] Update apps/website/src/pages/docs/button.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/button.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 4efd8e06c6c..7b8f1663269 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -77,7 +77,7 @@ The medium size is a default and should always be the first choice, unless there ## Split button -Pressing this left side of the button will commit the action. Pressing the right side of the button will open a menu. +Pressing the left side of this button will commit the action. Pressing the right side of the button will open a menu. From b2b057e747988a6d89058fdc1b8b0a0fe8aedb55 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:35:23 +0300 Subject: [PATCH 07/11] Update apps/website/src/pages/docs/button.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/button.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 7b8f1663269..757747c17fb 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -133,7 +133,7 @@ If the button does obscure anything important, we suggest adding empty space at - One high visibility button per section such as within a [dialog](dialog), or above a [table](table). - One call-to-action button on a page at a time and should always appear within a dedicated page footer. - Borderless buttons should be used in places where a default and icon button could cause too much visual clutter. -- Icon buttons should not have be high visibility or call-to-action styletypes. +- Icon buttons should not have high visibility or call-to-action styletypes. ### Labels From e9afc24061407401d084025b5037539c4d4c8ac7 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:35:35 +0300 Subject: [PATCH 08/11] Update apps/website/src/pages/docs/button.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/button.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 757747c17fb..8ac65f28951 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -131,7 +131,7 @@ If the button does obscure anything important, we suggest adding empty space at - Use default button just about everywhere. - One high visibility button per section such as within a [dialog](dialog), or above a [table](table). -- One call-to-action button on a page at a time and should always appear within a dedicated page footer. +- One call-to-action button on a page at a time, and it should always appear within a dedicated page footer. - Borderless buttons should be used in places where a default and icon button could cause too much visual clutter. - Icon buttons should not have high visibility or call-to-action styletypes. From 95a264c081a7c03bdfb11fd85c97e920044a73fe Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:35:44 +0300 Subject: [PATCH 09/11] Update apps/website/src/pages/docs/button.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/button.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 8ac65f28951..63ab8ccd54d 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -41,7 +41,7 @@ There should only be one high visibility button per area of the user interface. -### Call to action +### Call-to-action The call-to-action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in stepper-like interactions). This is the biggest and most noticeable button. One call-to-action button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. From 58d84f76a49ddbfa71c2087c199d3d8d70a573cf Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:35:59 +0300 Subject: [PATCH 10/11] Update apps/website/src/pages/docs/button.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/button.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index 63ab8ccd54d..b5affc18df4 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -137,7 +137,7 @@ If the button does obscure anything important, we suggest adding empty space at ### Labels -Strive for a single action word with a well-understood meaning. Verbs do the best. Remember that all labels will need translation, so if the button absolutely requires a longer string, adhere to the _twentycharacterlimit_ rule. +Strive for a single action word with a well-understood meaning such as a verb. Remember that all labels will need translation, so if the button absolutely requires a longer string, adhere to the _twentycharacterlimit_ rule. ### Icon and label buttons From a1b9cad6632809c19e436b3b959cf9b5ec67ab6a Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 15:16:09 +0300 Subject: [PATCH 11/11] Text updates --- apps/website/src/pages/docs/button.mdx | 55 +++++++++++++------------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/apps/website/src/pages/docs/button.mdx b/apps/website/src/pages/docs/button.mdx index b5affc18df4..a6b538fd8f2 100644 --- a/apps/website/src/pages/docs/button.mdx +++ b/apps/website/src/pages/docs/button.mdx @@ -22,105 +22,106 @@ import * as AllExamples from '~/examples'; -## Appearance +Buttons have states and events and should be used when a form is submitted or where the button represents a clear call to action on a page. +In some cases, buttons can also be used in place of href links to draw special attention to that action. -### Default +## Variants -The default button should be used in most circumstances. If you are unsure as to what button to use, use this button! +### Default -### High visibility +The default button should be used in most circumstances. If you are unsure as to what button to use, use this button! -This is the button to emphasize an action applicable to an area of the page or a [dialog](dialog). High visibility buttons are used to draw the user’s attention to the main action of the page. -There should only be one high visibility button per area of the user interface. +### High visibility -### Call-to-action +This is the button to emphasize an action applicable to an area of the page or a [dialog](dialog). High visibility buttons are used to draw the user’s attention to the main action of the page. +There should only be one high visibility button per area of the user interface. -The call-to-action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in stepper-like interactions). This is the biggest and most noticeable button. -One call-to-action button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. +### Call-to-action -### Borderless - -The borderless button is useful in tighter areas where using a default button would visibly cause too many boxes. +The call-to-action button, also referred to as the CTA, is the button that is used for most full page layouts and whole-page overlays (think Next in [stepper](stepper) interactions). This is the biggest and most noticeable button. +One call-to-action button per visible page is the rule. Treat it as a large, “CLICK HERE” guide for the user. -The borderless button is often used by actionable icons in relation to another component. -They are commonly used within [table](table) rows and widgets. A good example would be the close icon within a modal, toast notification, or alert. +### Borderless -### Size +The borderless button is useful in tighter areas where using a default button would visibly cause too many boxes. -There are 3 different sizes available, which can be applied to any button. +The borderless button is often used by actionable icons in relation to another component. +They are commonly used within [table](table) rows and widgets. -The medium size is a default and should always be the first choice, unless there are good reasons to use the small or large version. +### Size +There are 3 different sizes available, which can be applied to any button. The medium size is a default and should always be the first choice, unless there are good reasons to use the small or large version. + ## Button props ## Split button -Pressing the left side of this button will commit the action. Pressing the right side of the button will open a menu. - +Pressing the left side of this button will commit the action. Pressing the right side of the button will open a menu. + ### Props ## Dropdown button -Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The menu button should only be styled as default buttons and borderless buttons. - +Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The menu button should only be styled as default buttons and borderless buttons. + ### Props ## Icon button -Icon button gives the icon the correct styling as well as adds some clickable padding within the button, ensuring icons meet the necessary touch target size. - +Icon button gives the icon the correct styling as well as adds some clickable padding within the button, ensuring icons meet the necessary touch target size. + ### Props ## Ideas button -The Ideas button is unique and should only be used under certain circumstances. You will need to perform an audit of your application to ensure that the feedback button does not cover / obscure any tools. - -If the button does obscure anything important, we suggest adding empty space at the bottom of the page so the user can scroll far enough down that the button doesn’t overlap the underlying tools. - +The Ideas button is unique and should only be used under certain circumstances. You will need to perform an audit of your application to ensure that the feedback button does not cover / obscure any tools. + +If the button does obscure anything important, we suggest adding empty space at the bottom of the page so the user can scroll far enough down that the button doesn’t overlap the underlying tools. + ### Props