From 3d42bc1e6eed059b3579b6898c6ccfe663c47fe1 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Thu, 4 Apr 2024 09:29:09 -0400 Subject: [PATCH] add `stretch` prop to `Button` (#1971) This is achieved using a private inline CSS variable, which is made available globally to allow setting from all elements. --- .changeset/thin-eagles-sparkle.md | 5 +++++ .../baseline/Button.test.ts-Stretch.png | Bin 0 -> 5800 bytes apps/react-workshop/src/Button.stories.tsx | 11 +++++++++++ apps/react-workshop/src/Button.test.ts | 1 + apps/website/src/content/docs/button.mdx | 16 ++++++++++++---- .../src/core/Buttons/Button.test.tsx | 5 +++++ .../itwinui-react/src/core/Buttons/Button.tsx | 13 +++++++++++++ .../src/styles.js/styles.module.css | 8 ++++++++ 8 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 .changeset/thin-eagles-sparkle.md create mode 100755 apps/react-workshop/cypress-visual-screenshots/baseline/Button.test.ts-Stretch.png diff --git a/.changeset/thin-eagles-sparkle.md b/.changeset/thin-eagles-sparkle.md new file mode 100644 index 00000000000..de41a2a4d5d --- /dev/null +++ b/.changeset/thin-eagles-sparkle.md @@ -0,0 +1,5 @@ +--- +"@itwin/itwinui-react": minor +--- + +Added a new `stretch` prop to `Button` to allow it to span the full width of its container. diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Button.test.ts-Stretch.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Button.test.ts-Stretch.png new file mode 100755 index 0000000000000000000000000000000000000000..aca790567a6b8b0c775ef91e724c7a4b21f9393d GIT binary patch literal 5800 zcmeHLYfw|^89o-rSS-YqrP*C0aTh60SuP!PASNVrS4t^0v9b>9ZX|Z7&9n>~H{p^< zNCe$YSI0z0EV6`TT&hk-Hd(seLb!N>iU`4E0Toe9f}7;PBDtIhNyz2&J5DdtAGWsB zpZW8iGn4OoFVFkD&-a~tvWHca5dT^{1VIVKKi#z#f>wjqIB4w}@aXMLPJp2A^NV-w zd`Gluaj<0V=G7OnY_N53_*a*Da&k)e58fVc8vUa1$r-ylex99qTx(Brhsq;(ktG?eUn!BC0zLeGsPw!JY#L}uj_lbh184az=V%BE!^ zDj~~M;9jDNJO@F>NZsb)`$=s287!=nnWuT0cB2K0s-!FPt3iYK`5CtsRPX)T-$M@bX&mo@5=Ed7@3`e`F-h{%QGZPpF=+Db*2 zoFdKF$s!AJhdWhu7O^-mD+h(pVdpEMNQct-bdpUpbO~1GFC%^>17K}jg zCe0dnIzcWeD;FR70FEpJusz|#)ryG%|IFDo{#7cG?)foD{ruE`t46>4pi<}^A|cy# z;@u2SBhmiuj_SER7SG3dps_d}hhI*lFjSRV{SP#O8|i|`(iAe1t{H3aKWdp|(K2QJ zZ_D5vQyk%L#l;M5&l@0G*t%&g`6Er_36JV%E)^_(HRasz77f$T&OY~58aHr_gkGma zb7cPe6-r0%g4S3EhaRaU=!hO2&G6Zd5uLaBQlYlz@rkfkDI0rejV{mBKCIHue!LO& zX)roZE&eqlG;MYcxEuJZu(@n4lVb2TFs%7Wj^hHxxsuAbDqN7bdSexFHIJy9Hd zOo9P9j<)=1jpACH<>@8KdBk~&^J2GEt&=WYd4|a;z9dz588^u=GwM zIe$G~=4WflA)UmL;Tu;>HQt+^W$;XDYCE^ z?Lt)XMSEN$X&mQrt|>ni(a59^ zoHsY}$Bf)4$`OpDJu8N~Ui4BsJ~=^Wo9|Yt(%#Bbj}(#)G{66WK8-+3`5tgIY-%)| zoI{P-W=9J*1*Zn*Il4@)xU8;yPeG<`I9lPjbtaX%^yf)XHLgrFM1`HZE+-Of@9ME= zNNA!WKp#ZX+dryxi4jK&96sb4@LO<+gtD7cixhTCz5DicB2y(a*EjrKSqG01eA+rV zok(V=XxO3^4HZ!m4C`j^OtOqrM0K`qAXM;ACC+X-Mj$#r>+Vk@4LCAEy->O2Ihljs z{^dlWo$jdiKD6Kmk`3;TqsIU37=gn6|9twqsM_Kg{debD%=7#UgRq*HYu@5iA_puQewAU@cj~#f|wM { ); }; + +export const Stretch = () => { + return ; +}; +Stretch.decorators = [ + (Story: () => React.ReactNode) => ( +
+ +
+ ), +]; diff --git a/apps/react-workshop/src/Button.test.ts b/apps/react-workshop/src/Button.test.ts index c5e5349ef83..f8d801ec0d6 100644 --- a/apps/react-workshop/src/Button.test.ts +++ b/apps/react-workshop/src/Button.test.ts @@ -13,6 +13,7 @@ describe('Button', () => { 'With Icon', 'Call To Action', 'As Link', + 'Stretch', ]; tests.forEach((testName) => { diff --git a/apps/website/src/content/docs/button.mdx b/apps/website/src/content/docs/button.mdx index 1bb2678b87e..50112a7f369 100644 --- a/apps/website/src/content/docs/button.mdx +++ b/apps/website/src/content/docs/button.mdx @@ -18,9 +18,7 @@ thumbnail: Button 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. -## Variants - -### Default +## Usage The default button should be used in most circumstances. If you are unsure as to what button to use, use this button! @@ -65,6 +63,16 @@ There are 3 different sizes available, which can be applied to any button. The m +### Stretch + +To make a button stretch to the full width of its parent, use the `stretch` prop. + +```jsx + +``` + +This is useful in narrow containers and mobile views. Don't overuse this! + ## Button props @@ -119,7 +127,7 @@ If the button does obscure anything important, we suggest adding empty space at -## Usage +## Usage guidelines ### Style types diff --git a/packages/itwinui-react/src/core/Buttons/Button.test.tsx b/packages/itwinui-react/src/core/Buttons/Button.test.tsx index 2c0a38b8d35..418b5de442e 100644 --- a/packages/itwinui-react/src/core/Buttons/Button.test.tsx +++ b/packages/itwinui-react/src/core/Buttons/Button.test.tsx @@ -215,3 +215,8 @@ it('should render [x]Props correctly', () => { expect(labelElement).toBeTruthy(); expect(labelElement.style.width).toBe('80px'); }); + +it('should respect `stretch` prop', () => { + const { container } = render(); + expect(container.querySelector('button')).toHaveStyle('--_iui-width: 100%'); +}); diff --git a/packages/itwinui-react/src/core/Buttons/Button.tsx b/packages/itwinui-react/src/core/Buttons/Button.tsx index 7fed39b026c..e49413d7daa 100644 --- a/packages/itwinui-react/src/core/Buttons/Button.tsx +++ b/packages/itwinui-react/src/core/Buttons/Button.tsx @@ -39,6 +39,12 @@ export type ButtonProps = { * Passes props to the end icon. */ endIconProps?: React.ComponentProps<'span'>; + /** + * Whether the button should stretch to fill the width of the container. + * + * This is useful on narrow containers and mobile views. + */ + stretch?: boolean; } & Pick, 'htmlDisabled'>; /** @@ -61,6 +67,7 @@ export const Button = React.forwardRef((props, ref) => { labelProps, startIconProps, endIconProps, + stretch, ...rest } = props; @@ -71,6 +78,12 @@ export const Button = React.forwardRef((props, ref) => { data-iui-variant={styleType !== 'default' ? styleType : undefined} data-iui-size={size} {...rest} + style={ + { + '--_iui-width': stretch ? '100%' : undefined, + ...props.style, + } as React.CSSProperties + } > {startIcon && (