diff --git a/.changeset/sharp-planes-grab.md b/.changeset/sharp-planes-grab.md new file mode 100644 index 00000000..6229c710 --- /dev/null +++ b/.changeset/sharp-planes-grab.md @@ -0,0 +1,5 @@ +--- +'@status-im/components': patch +--- + +fix ContextTag style diff --git a/packages/components/src/context-tag/context-tag.stories.tsx b/packages/components/src/context-tag/context-tag.stories.tsx index dfa702a0..51a09223 100644 --- a/packages/components/src/context-tag/context-tag.stories.tsx +++ b/packages/components/src/context-tag/context-tag.stories.tsx @@ -1,4 +1,4 @@ -import { MembersIcon, PendingIcon } from '@status-im/icons' +import { MembersIcon, PlaceholderIcon } from '@status-im/icons' import { Stack } from 'tamagui' import { ContextTag } from './context-tag' @@ -45,6 +45,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={20} @@ -121,6 +124,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={24} @@ -216,6 +222,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={24} @@ -311,6 +320,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={32} @@ -389,6 +401,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={20} @@ -474,6 +489,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={24} @@ -580,6 +598,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={24} @@ -686,6 +707,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={32} @@ -773,6 +797,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={20} @@ -858,6 +885,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={24} @@ -964,6 +994,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={24} @@ -1070,6 +1103,9 @@ export const AllVariants: Story = { + + Name + } + icon={} type="icon" label="Context" size={32} diff --git a/packages/components/src/context-tag/context-tag.tsx b/packages/components/src/context-tag/context-tag.tsx index e0ef2ae5..0e4d045c 100644 --- a/packages/components/src/context-tag/context-tag.tsx +++ b/packages/components/src/context-tag/context-tag.tsx @@ -10,6 +10,7 @@ import { Text } from '../text' import type { AvatarProps } from '../avatar' import type { TextProps } from '../text' import type { IconProps } from '@status-im/icons' +import type { ComponentProps } from 'react' type Props = { blur?: boolean; outline?: boolean } & ( | { @@ -74,6 +75,15 @@ const iconSizes: Record, IconProps['size']> = { '20': 12, } +const chevronIconSize: Record< + NonNullable, + ComponentProps['size'] +> = { + '32': 20, + '24': 16, + '20': 12, +} + const Label = (props: { children: string size: 13 | 15 @@ -95,8 +105,10 @@ const ContextTag = (props: Props) => { const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label' let textSize: Extract + let paddingHorizontal: number | undefined if (size === 24) { textSize = 'textSize' in props ? props.textSize : 13 // default if props.size not set but fallbacked to 24 + paddingHorizontal = textSize === 13 ? 8 : 6 } else { textSize = textSizes[size] } @@ -140,7 +152,10 @@ const ContextTag = (props: Props) => { /> - + @@ -256,8 +271,9 @@ const ContextTag = (props: Props) => { blur={blur} borderRadius={rounded ? '$8' : '$full'} size={size} - textSize={textSize} - {...(hasAvatar && { paddingLeft: 1 })} + {...(paddingHorizontal && { paddingHorizontal })} + {...(hasAvatar && { paddingLeft: 2 })} + {...(hasAvatar && outline && { paddingLeft: 1 })} > {renderContent()} @@ -272,17 +288,13 @@ const Base = styled(View, { display: 'inline-flex', flexDirection: 'row', alignItems: 'center', - borderWidth: '1px', - borderStyle: 'solid', - borderColor: 'transparent', variants: { outline: { true: { + borderWidth: '1px', borderColor: '$primary-50', - }, - false: { - borderColor: 'transparent', + borderStyle: 'solid', }, }, blur: { @@ -309,13 +321,5 @@ const Base = styled(View, { paddingHorizontal: 12, }, }, - textSize: { - 13: { - paddingHorizontal: 8, - }, - 15: { - paddingHorizontal: 6, - }, - }, } as const, })