From 15c9640ae17c0ecce42b0f02e65fd2c43887e9ec Mon Sep 17 00:00:00 2001 From: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Date: Wed, 9 Oct 2024 17:49:16 +0200 Subject: [PATCH] Switch icon button from aria button to regular button (#592) * f icon button * f press * Create hungry-bulldogs-glow.md * f type * f types --- .changeset/hungry-bulldogs-glow.md | 5 +++ packages/components/src/button/button.tsx | 2 +- .../src/icon-button/icon-button.stories.tsx | 11 ++++-- .../src/icon-button/icon-button.tsx | 35 ++++++++++++------- packages/components/src/tag/tag.tsx | 2 +- 5 files changed, 38 insertions(+), 17 deletions(-) create mode 100644 .changeset/hungry-bulldogs-glow.md diff --git a/.changeset/hungry-bulldogs-glow.md b/.changeset/hungry-bulldogs-glow.md new file mode 100644 index 00000000..77d2b0c8 --- /dev/null +++ b/.changeset/hungry-bulldogs-glow.md @@ -0,0 +1,5 @@ +--- +"@status-im/components": patch +--- + +Switch icon button from aria button to regular button diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx index 5e20c3e7..2d19c7de 100644 --- a/packages/components/src/button/button.tsx +++ b/packages/components/src/button/button.tsx @@ -14,7 +14,7 @@ type Variants = VariantProps type Props = { size?: Variants['size'] variant?: Variants['variant'] - onPress?: () => void + onPress?: (event: React.MouseEvent) => void } & ( | { children: React.ReactNode diff --git a/packages/components/src/icon-button/icon-button.stories.tsx b/packages/components/src/icon-button/icon-button.stories.tsx index 983f5788..54f79bf1 100644 --- a/packages/components/src/icon-button/icon-button.stories.tsx +++ b/packages/components/src/icon-button/icon-button.stories.tsx @@ -1,4 +1,5 @@ import { BoldIcon } from '@status-im/icons/20' +import { action } from '@storybook/addon-actions' import { IconButton } from './icon-button' @@ -10,7 +11,13 @@ const sizes = ['40', '32', '24'] as const const renderVariant = (variant: string) => (props: any) => (
{sizes.map(size => ( - + } + onPress={action('press')} + /> ))}
) @@ -19,7 +26,7 @@ const meta = { component: IconButton, title: 'Components/Icon Button', args: { - isDisabled: false, + disabled: false, }, parameters: { diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx index 9d40d9f4..0ddbad1b 100644 --- a/packages/components/src/icon-button/icon-button.tsx +++ b/packages/components/src/icon-button/icon-button.tsx @@ -3,27 +3,36 @@ import { forwardRef } from 'react' import { cva } from 'cva' -import { Button as AriaButton } from 'react-aria-components' import type { IconElement } from '../types' import type { VariantProps } from 'cva' import type { Ref } from 'react' -import type { ButtonProps as AriaButtonProps } from 'react-aria-components' type Variants = VariantProps -type Props = AriaButtonProps & { +type Props = { variant?: Variants['variant'] icon: IconElement + onPress?: (event: React.MouseEvent) => void } -const IconButton = (props: Props, ref: Ref) => { - const { variant = 'default', icon, ...buttonProps } = props +type ButtonProps = Omit, 'children'> + +const IconButton = ( + props: Props & ButtonProps, + ref: Ref, +) => { + const { variant = 'default', onPress: onClick, icon, ...buttonProps } = props return ( - + ) } @@ -37,16 +46,16 @@ const styles = cva({ variants: { variant: { default: [ - 'border-transparent bg-neutral-10 text-neutral-50 hover:bg-neutral-20 pressed:border-neutral-20 pressed:bg-neutral-10 pressed:text-neutral-100', - 'dark:bg-neutral-90 dark:text-neutral-40 dark:hover:bg-neutral-80 dark:pressed:border-neutral-60 dark:pressed:bg-neutral-80/70 dark:pressed:text-white-100', + 'border-transparent bg-neutral-10 text-neutral-50 active:border-neutral-20 active:bg-neutral-10 active:text-neutral-100 hover:bg-neutral-20', + 'dark:bg-neutral-90 dark:text-neutral-40 dark:active:border-neutral-60 dark:active:bg-neutral-80/70 dark:active:text-white-100 dark:hover:bg-neutral-80', ], outline: [ - 'border-neutral-30 text-neutral-50 hover:border-neutral-40 pressed:border-neutral-20 pressed:bg-neutral-10 pressed:text-neutral-100', - 'dark:border-neutral-70 dark:text-neutral-40 dark:hover:bg-neutral-60 dark:pressed:border-neutral-60 dark:pressed:bg-neutral-80/70 dark:pressed:text-white-100', + 'border-neutral-30 text-neutral-50 active:border-neutral-20 active:bg-neutral-10 active:text-neutral-100 hover:border-neutral-40', + 'dark:border-neutral-70 dark:text-neutral-40 dark:active:border-neutral-60 dark:active:bg-neutral-80/70 dark:active:text-white-100 dark:hover:bg-neutral-60', ], ghost: [ - 'border-transparent text-neutral-50 hover:bg-neutral-10 pressed:border-neutral-20 pressed:bg-neutral-10 pressed:text-neutral-100', - 'dark:text-neutral-40 dark:hover:bg-neutral-80/70 dark:pressed:border-neutral-60 dark:pressed:bg-neutral-80/70 dark:pressed:text-white-100', + 'border-transparent text-neutral-50 active:border-neutral-20 active:bg-neutral-10 active:text-neutral-100 hover:bg-neutral-10', + 'dark:text-neutral-40 dark:active:border-neutral-60 dark:active:bg-neutral-80/70 dark:active:text-white-100 dark:hover:bg-neutral-80/70', ], }, }, diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx index 64399675..74b9b6d6 100644 --- a/packages/components/src/tag/tag.tsx +++ b/packages/components/src/tag/tag.tsx @@ -16,7 +16,7 @@ type Props = { } type ButtonProps = { - onPress: () => void + onPress: (event: React.MouseEvent) => void selected?: boolean disabled?: boolean } & Omit, 'children'>