status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix ContextTag style (#478) 

* u stories

* f

* ch
This commit is contained in:
Felicio Mununga 2023-09-25 12:35:58 +02:00 committed by GitHub
parent 19384e1027
commit b560d62194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/sharp-planes-grab.md Normal file
View File

@ -0,0 +1,5 @@
---
'@status-im/components': patch
---
fix ContextTag style

62
packages/components/src/context-tag/context-tag.stories.tsx
View File

@ -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 = {
<Stack space flexDirection="row">
<Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={20}>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -112,7 +115,7 @@ export const AllVariants: Story = {
/>
<ContextTag type="address" address="0x045...1ah" size={20} />
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={20}
@ -121,6 +124,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={13}>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -201,7 +207,7 @@ export const AllVariants: Story = {
textSize={13}
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
@ -216,6 +222,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={15}>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -296,7 +305,7 @@ export const AllVariants: Story = {
textSize={15}
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
@ -311,6 +320,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={32}>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -378,7 +390,7 @@ export const AllVariants: Story = {
/>
<ContextTag type="address" address="0x045...1ah" size={32} />
<ContextTag
icon={<PendingIcon size={16} />}
icon={<PlaceholderIcon size={16} />}
type="icon"
label="Context"
size={32}
@ -389,6 +401,9 @@ export const AllVariants: Story = {
<Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={20} outline>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -464,7 +479,7 @@ export const AllVariants: Story = {
/>
<ContextTag type="address" address="0x045...1ah" size={20} outline />
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={20}
@ -474,6 +489,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={13} outline>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -563,7 +581,7 @@ export const AllVariants: Story = {
outline
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
@ -580,6 +598,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={15} outline>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -669,7 +690,7 @@ export const AllVariants: Story = {
outline
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
@ -686,6 +707,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={32} outline>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -761,7 +785,7 @@ export const AllVariants: Story = {
/>
<ContextTag type="address" address="0x045...1ah" size={32} outline />
<ContextTag
icon={<PendingIcon size={16} />}
icon={<PlaceholderIcon size={16} />}
type="icon"
label="Context"
size={32}
@ -773,6 +797,9 @@ export const AllVariants: Story = {
<Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={20} blur>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -848,7 +875,7 @@ export const AllVariants: Story = {
/>
<ContextTag type="address" address="0x045...1ah" size={20} blur />
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={20}
@ -858,6 +885,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={13} blur>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -947,7 +977,7 @@ export const AllVariants: Story = {
blur
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
@ -964,6 +994,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={15} blur>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -1053,7 +1086,7 @@ export const AllVariants: Story = {
blur
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
@ -1070,6 +1103,9 @@ export const AllVariants: Story = {
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={32} blur>
Name
</ContextTag>
<ContextTag
type="user"
user={{
@ -1145,7 +1181,7 @@ export const AllVariants: Story = {
/>
<ContextTag type="address" address="0x045...1ah" size={32} blur />
<ContextTag
icon={<PendingIcon size={16} />}
icon={<PlaceholderIcon size={16} />}
type="icon"
label="Context"
size={32}

38
packages/components/src/context-tag/context-tag.tsx
View File

@ -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<NonNullable<Props['size']>, IconProps['size']> = {
'20': 12,
}
const chevronIconSize: Record<
NonNullable<Props['size']>,
ComponentProps<typeof ChevronRightIcon>['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<TextProps['size'], 13 | 15>
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) => {
/>
<Stack flexDirection="row" gap="$0" alignItems="center">
<Label size={textSize}>{props.channel.communityName}</Label>
<ChevronRightIcon color="$neutral-50" size={20} />
<ChevronRightIcon
color="$neutral-50"
size={chevronIconSize[size]}
/>
<Label size={textSize}>{`# ` + props.channel.name}</Label>
</Stack>
</>
@ -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()}
</Base>
@ -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,
})