diff --git a/.changeset/few-suits-rescue.md b/.changeset/few-suits-rescue.md new file mode 100644 index 00000000..66665220 --- /dev/null +++ b/.changeset/few-suits-rescue.md @@ -0,0 +1,5 @@ +--- +"@status-im/components": patch +--- + +Fix tag and tabs diff --git a/packages/components/src/tabs/tabs.tsx b/packages/components/src/tabs/tabs.tsx index 99f62d8b..871fe7e1 100644 --- a/packages/components/src/tabs/tabs.tsx +++ b/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: { diff --git a/packages/components/src/tag/tag.stories.tsx b/packages/components/src/tag/tag.stories.tsx index dd6cae44..b54606fb 100644 --- a/packages/components/src/tag/tag.stories.tsx +++ b/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 = { component: Tag, title: 'Components/Tag', args: { label: 'Tag', disabled: false, + selected: false, icon: , iconPlacement: 'left', }, @@ -24,17 +26,17 @@ const meta = { render: props => (
- - + + - - + +
), -} satisfies Meta +} type Story = StoryObj diff --git a/packages/components/src/tag/tag.tsx b/packages/components/src/tag/tag.tsx index 144cfc18..64399675 100644 --- a/packages/components/src/tag/tag.tsx +++ b/packages/components/src/tag/tag.tsx @@ -8,52 +8,83 @@ import type { Ref } from 'react' type Variants = VariantProps -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) => { +type ButtonProps = { + onPress: () => void + selected?: boolean + disabled?: boolean +} & Omit, 'children'> + +type DivProps = Omit, 'children'> + +function Tag( + props: Props & (ButtonProps | DivProps), + ref: Ref, +) { const { size = '32', icon, iconPlacement = 'left', label, - selected = false, - disabled = false, - onPress: onClick, - ...buttonProps + ...rest } = props const iconOnly = Boolean(icon && !label) - return ( - + + ) + + if ('onPress' in props) { + const { selected, disabled, ...buttonProps } = props as ButtonProps + + return ( + + ) + } + + return ( +
} + className={styles({ + size, + iconOnly, + })} + > + {content} +
) } @@ -62,8 +93,6 @@ const styles = cva({ '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: {