From d18930f70bcd8d3c5b4dcc08a035866b2dce30ca Mon Sep 17 00:00:00 2001 From: karina Date: Fri, 22 Jul 2022 15:44:00 +0200 Subject: [PATCH 1/4] feat: add a possibility to use button component as link + update tests --- packages/button/src/Button.stories.tsx | 7 +++++++ packages/button/src/Button.tsx | 5 ++++- packages/button/src/ButtonStyles.tsx | 2 ++ packages/button/src/__snapshots__/Button.test.tsx.snap | 3 +++ packages/button/src/types.tsx | 1 + 5 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/button/src/Button.stories.tsx b/packages/button/src/Button.stories.tsx index e52898f1..f2ef45f2 100644 --- a/packages/button/src/Button.stories.tsx +++ b/packages/button/src/Button.stories.tsx @@ -38,6 +38,13 @@ export default { options: getOptions(ButtonColor), control: 'inline-radio', }, + href: { + options: ['', '#'], + control: { + type: 'inline-radio', + labels: { '#': 'Yes', '': 'No' }, + }, + }, }, } as Meta diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx index 872549c4..19a295e6 100644 --- a/packages/button/src/Button.tsx +++ b/packages/button/src/Button.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react' +import React, { ForwardedRef, forwardRef } from 'react' import { ButtonStyle, ButtonContentStyle, @@ -27,6 +27,7 @@ function Button(props: ButtonProps, ref?: ForwardedRef) { onClick, disabled, children, + href, ...rest } = props @@ -35,6 +36,7 @@ function Button(props: ButtonProps, ref?: ForwardedRef) { return ( ) { disabled={disabled || loading} type='button' ref={ref} + href={href} {...rest} > {children} diff --git a/packages/button/src/ButtonStyles.tsx b/packages/button/src/ButtonStyles.tsx index 8345f101..c0fe83fc 100644 --- a/packages/button/src/ButtonStyles.tsx +++ b/packages/button/src/ButtonStyles.tsx @@ -169,6 +169,7 @@ const variants = { } export const ButtonStyle = styled.button` + display: inline-block; box-sizing: border-box; margin: 0; border: none; @@ -179,6 +180,7 @@ export const ButtonStyle = styled.button` background: transparent; font-family: inherit; font-weight: 700; + text-decoration: none; width: ${({ $fullwidth }) => ($fullwidth ? ' 100%' : 'auto')}; :before { diff --git a/packages/button/src/__snapshots__/Button.test.tsx.snap b/packages/button/src/__snapshots__/Button.test.tsx.snap index d9bbb522..4abd1260 100644 --- a/packages/button/src/__snapshots__/Button.test.tsx.snap +++ b/packages/button/src/__snapshots__/Button.test.tsx.snap @@ -2,6 +2,7 @@ exports[`renders correctly 1`] = ` .c0 { + display: inline-block; box-sizing: border-box; margin: 0; border: none; @@ -12,6 +13,8 @@ exports[`renders correctly 1`] = ` background: transparent; font-family: inherit; font-weight: 700; + -webkit-text-decoration: none; + text-decoration: none; width: auto; line-height: 1em; font-size: 14px; diff --git a/packages/button/src/types.tsx b/packages/button/src/types.tsx index d5d3dfda..39c2498f 100644 --- a/packages/button/src/types.tsx +++ b/packages/button/src/types.tsx @@ -39,6 +39,7 @@ export type ButtonProps = LidoComponentProps< loading?: boolean active?: boolean as?: never + href?: string } > From 9ce56cf0cef73a1aa644cba8263bb35d1ea24015 Mon Sep 17 00:00:00 2001 From: karina Date: Fri, 22 Jul 2022 16:09:25 +0200 Subject: [PATCH 2/4] refactor: button component --- packages/button/src/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx index 19a295e6..755c1eb5 100644 --- a/packages/button/src/Button.tsx +++ b/packages/button/src/Button.tsx @@ -36,7 +36,7 @@ function Button(props: ButtonProps, ref?: ForwardedRef) { return ( Date: Mon, 25 Jul 2022 12:09:56 +0200 Subject: [PATCH 3/4] feat: divide link and button props --- packages/button/src/Button.tsx | 9 ++++++--- packages/button/src/types.tsx | 21 +++++++++++++++++++-- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx index 755c1eb5..e5924d17 100644 --- a/packages/button/src/Button.tsx +++ b/packages/button/src/Button.tsx @@ -4,7 +4,7 @@ import { ButtonContentStyle, ButtonLoaderStyle, } from './ButtonStyles' -import { ButtonProps } from './types' +import { ButtonButtonProps, ButtonProps } from './types' import { useRipple } from './useRipple' const loaderSizes = { @@ -15,7 +15,10 @@ const loaderSizes = { lg: 'medium', } as const -function Button(props: ButtonProps, ref?: ForwardedRef) { +function Button( + props: ButtonProps, + ref?: ForwardedRef +) { const { size = 'md', variant = 'filled', @@ -29,7 +32,7 @@ function Button(props: ButtonProps, ref?: ForwardedRef) { children, href, ...rest - } = props + } = props as ButtonButtonProps const { handleClick, ripple } = useRipple(props) const loaderSize = loaderSizes[size] diff --git a/packages/button/src/types.tsx b/packages/button/src/types.tsx index 39c2498f..84a36000 100644 --- a/packages/button/src/types.tsx +++ b/packages/button/src/types.tsx @@ -28,7 +28,7 @@ export enum ButtonColor { } export type ButtonColors = keyof typeof ButtonColor -export type ButtonProps = LidoComponentProps< +export type ButtonButtonProps = LidoComponentProps< 'button', { size?: ButtonSizes @@ -39,10 +39,27 @@ export type ButtonProps = LidoComponentProps< loading?: boolean active?: boolean as?: never - href?: string + href?: never | undefined } > +type ButtonLinkProps = LidoComponentProps< + 'a', + { + size?: ButtonSizes + variant?: ButtonVariants + color?: ButtonColors + fullwidth?: boolean + square?: boolean + loading?: boolean + active?: boolean + as?: never + href: string + } +> + +export type ButtonProps = ButtonButtonProps | ButtonLinkProps + export type ButtonIconProps = { icon: React.ReactNode } & ButtonProps From e2d77782f2bf5cab0c3cbc4ea2eb677986d36fd4 Mon Sep 17 00:00:00 2001 From: karina Date: Mon, 25 Jul 2022 12:21:50 +0200 Subject: [PATCH 4/4] fix: ripple event types --- packages/button/src/Button.tsx | 2 +- packages/button/src/useRipple.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/button/src/Button.tsx b/packages/button/src/Button.tsx index e5924d17..8404b985 100644 --- a/packages/button/src/Button.tsx +++ b/packages/button/src/Button.tsx @@ -17,7 +17,7 @@ const loaderSizes = { function Button( props: ButtonProps, - ref?: ForwardedRef + ref?: ForwardedRef ) { const { size = 'md', diff --git a/packages/button/src/useRipple.tsx b/packages/button/src/useRipple.tsx index 6ab35b97..1c373723 100644 --- a/packages/button/src/useRipple.tsx +++ b/packages/button/src/useRipple.tsx @@ -11,7 +11,10 @@ export const useRipple: UseRipple = ({ onClick }) => { const [ripple, setRipple] = useState(null) const handleClick = useCallback( - (event: React.MouseEvent) => { + ( + event: React.MouseEvent & + React.MouseEvent + ) => { const button = event.currentTarget const rect = button.getBoundingClientRect() const diameter = Math.max(button.clientWidth, button.clientHeight)