Fix tag and tabs (#584)

.changeset/few-suits-rescue.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+Fix tag and tabs

packages/components/src/tabs/tabs.tsx

@@ -101,7 +101,7 @@ Trigger.displayName = Tabs.Trigger.displayName
 const tabStyles = cva({
   base: [
     'group inline-flex items-center gap-1 whitespace-nowrap',
-    'disabled:pointer-events-none disabled:opacity-[.3]',
+    'disabled:opacity-[.3]',
   ],
   variants: {
     variant: {

packages/components/src/tag/tag.stories.tsx

@@ -1,15 +1,17 @@
 import { PlaceholderIcon } from '@status-im/icons/20'
+import { action } from '@storybook/addon-actions'
 
 import { Tag } from './tag'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-const meta = {
+const meta: Meta<typeof Tag> = {
   component: Tag,
   title: 'Components/Tag',
   args: {
     label: 'Tag',
     disabled: false,
+    selected: false,
     icon: <PlaceholderIcon />,
     iconPlacement: 'left',
   },
@@ -24,17 +26,17 @@ const meta = {
   render: props => (
     <div className="flex flex-col items-start gap-4">
       <Tag {...props} />
-      <Tag {...props} selected />
+      <Tag {...props} onPress={action('pressed')} selected />
-      <Tag {...props} disabled />
+      <Tag {...props} onPress={action('pressed')} disabled />
       <Tag {...props} size="24" />
-      <Tag {...props} size="24" selected />
+      <Tag {...props} size="24" onPress={action('pressed')} selected />
-      <Tag {...props} size="24" disabled />
+      <Tag {...props} size="24" onPress={action('pressed')} disabled />
       <Tag {...props} icon={undefined} />
       <Tag {...props} label={undefined} />
       <Tag {...props} iconPlacement="right" />
     </div>
   ),
-} satisfies Meta<typeof Tag>
+}
 
 type Story = StoryObj<typeof Tag>
 

packages/components/src/tag/tag.tsx

@@ -8,62 +8,91 @@ import type { Ref } from 'react'
 
 type Variants = VariantProps<typeof styles>
 
-type Props = React.ComponentProps<'button'> & {
+type Props = {
   size?: Variants['size']
   label?: string
   icon?: IconElement
   iconPlacement?: 'left' | 'right'
-  selected?: boolean
-  onPress?: () => void
 }
 
-const Tag = (props: Props, ref: Ref<HTMLButtonElement>) => {
+type ButtonProps = {
+  onPress: () => void
+  selected?: boolean
+  disabled?: boolean
+} & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>
+
+type DivProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>
+
+function Tag(
+  props: Props & (ButtonProps | DivProps),
+  ref: Ref<HTMLButtonElement | HTMLDivElement>,
+) {
   const {
     size = '32',
     icon,
     iconPlacement = 'left',
     label,
-    selected = false,
+    ...rest
-    disabled = false,
-    onPress: onClick,
-    ...buttonProps
   } = props
 
   const iconOnly = Boolean(icon && !label)
 
-  return (
+  const content = (
-    <button
+    <>
-      onClick={onClick}
-      {...buttonProps}
-      disabled={disabled}
-      ref={ref}
-      data-selected={selected}
-      className={styles({ size, selected, disabled, iconOnly })}
-    >
       {icon && iconPlacement === 'left' && (
         <span className={iconStyles({ size, placement: 'left', iconOnly })}>
           {cloneElement(icon)}
         </span>
       )}
-
       {label && <span className="flex-1 whitespace-nowrap">{label}</span>}
-
       {icon && iconPlacement === 'right' && (
         <span className={iconStyles({ size, placement: 'right', iconOnly })}>
           {cloneElement(icon)}
         </span>
       )}
+    </>
+  )
+
+  if ('onPress' in props) {
+    const { selected, disabled, ...buttonProps } = props as ButtonProps
+
+    return (
+      <button
+        {...buttonProps}
+        onClick={props.onPress}
+        ref={ref as Ref<HTMLButtonElement>}
+        data-selected={selected ? selected : undefined}
+        className={styles({
+          size,
+          selected,
+          disabled,
+          iconOnly,
+        })}
+      >
+        {content}
       </button>
     )
   }
 
+  return (
+    <div
+      {...(rest as DivProps)}
+      ref={ref as Ref<HTMLDivElement>}
+      className={styles({
+        size,
+        iconOnly,
+      })}
+    >
+      {content}
+    </div>
+  )
+}
+
 const styles = cva({
   base: [
     'inline-flex shrink-0 items-center justify-center gap-1 border border-neutral-20 font-medium transition-all hover:border-neutral-30',
     'outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-customisation-50 focus-visible:ring-offset-2',
     'disabled:cursor-default disabled:opacity-[.3]',
-
-    // dark
     'dark:border-neutral-80 dark:text-white-100 dark:hover:border-neutral-60',
   ],
   variants: {