Switch icon button from aria button to regular button (#592)

* f icon button * f press * Create hungry-bulldogs-glow.md * f type * f types
status-im · Oct 9, 2024 · 15c9640 · 15c9640
1 parent a0a1071
commit 15c9640
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 17 deletions.
diff --git a/.changeset/hungry-bulldogs-glow.md 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
@@ -14,7 +14,7 @@ type Variants = VariantProps<typeof styles>
 type Props = {
   size?: Variants['size']
   variant?: Variants['variant']
-  onPress?: () => void
+  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => 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
@@ -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) => (
   <div className="flex items-center gap-4">
     {sizes.map(size => (
-      <IconButton {...props} key={size} variant={variant} icon={BoldIcon} />
+      <IconButton
+        {...props}
+        key={size}
+        variant={variant}
+        icon={<BoldIcon />}
+        onPress={action('press')}
+      />
     ))}
   </div>
 )
@@ -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
@@ -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<typeof styles>
 
-type Props = AriaButtonProps & {
+type Props = {
   variant?: Variants['variant']
   icon: IconElement
+  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
-const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
-  const { variant = 'default', icon, ...buttonProps } = props
+type ButtonProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>
+
+const IconButton = (
+  props: Props & ButtonProps,
+  ref: Ref<HTMLButtonElement>,
+) => {
+  const { variant = 'default', onPress: onClick, icon, ...buttonProps } = props
 
   return (
-    <AriaButton {...buttonProps} ref={ref} className={styles({ variant })}>
+    <button
+      {...buttonProps}
+      onClick={onClick}
+      ref={ref}
+      className={styles({ variant })}
+    >
       {icon}
-    </AriaButton>
+    </button>
   )
 }
 
@@ -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
@@ -16,7 +16,7 @@ type Props = {
 }
 
 type ButtonProps = {
-  onPress: () => void
+  onPress: (event: React.MouseEvent<HTMLButtonElement>) => void
   selected?: boolean
   disabled?: boolean
 } & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>