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 { Stack } from 'tamagui'
import { ContextTag } from './context-tag' import { ContextTag } from './context-tag'
@ -45,6 +45,9 @@ export const AllVariants: Story = {
<Stack space flexDirection="row"> <Stack space flexDirection="row">
<Stack space flexDirection="column" alignItems="flex-start" gap={12}> <Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={20}>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -112,7 +115,7 @@ export const AllVariants: Story = {
/> />
<ContextTag type="address" address="0x045...1ah" size={20} /> <ContextTag type="address" address="0x045...1ah" size={20} />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={20} size={20}
@ -121,6 +124,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={13}>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -201,7 +207,7 @@ export const AllVariants: Story = {
textSize={13} textSize={13}
/> />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
@ -216,6 +222,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={15}>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -296,7 +305,7 @@ export const AllVariants: Story = {
textSize={15} textSize={15}
/> />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
@ -311,6 +320,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={32}>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -378,7 +390,7 @@ export const AllVariants: Story = {
/> />
<ContextTag type="address" address="0x045...1ah" size={32} /> <ContextTag type="address" address="0x045...1ah" size={32} />
<ContextTag <ContextTag
icon={<PendingIcon size={16} />} icon={<PlaceholderIcon size={16} />}
type="icon" type="icon"
label="Context" label="Context"
size={32} 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" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={20} outline>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -464,7 +479,7 @@ export const AllVariants: Story = {
/> />
<ContextTag type="address" address="0x045...1ah" size={20} outline /> <ContextTag type="address" address="0x045...1ah" size={20} outline />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={20} size={20}
@ -474,6 +489,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={13} outline>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -563,7 +581,7 @@ export const AllVariants: Story = {
outline outline
/> />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
@ -580,6 +598,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={15} outline>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -669,7 +690,7 @@ export const AllVariants: Story = {
outline outline
/> />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
@ -686,6 +707,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={32} outline>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -761,7 +785,7 @@ export const AllVariants: Story = {
/> />
<ContextTag type="address" address="0x045...1ah" size={32} outline /> <ContextTag type="address" address="0x045...1ah" size={32} outline />
<ContextTag <ContextTag
icon={<PendingIcon size={16} />} icon={<PlaceholderIcon size={16} />}
type="icon" type="icon"
label="Context" label="Context"
size={32} 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" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={20} blur>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -848,7 +875,7 @@ export const AllVariants: Story = {
/> />
<ContextTag type="address" address="0x045...1ah" size={20} blur /> <ContextTag type="address" address="0x045...1ah" size={20} blur />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={20} size={20}
@ -858,6 +885,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={13} blur>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -947,7 +977,7 @@ export const AllVariants: Story = {
blur blur
/> />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
@ -964,6 +994,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={24} textSize={15} blur>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -1053,7 +1086,7 @@ export const AllVariants: Story = {
blur blur
/> />
<ContextTag <ContextTag
icon={<PendingIcon size={12} />} icon={<PlaceholderIcon size={12} />}
type="icon" type="icon"
label="Context" label="Context"
size={24} size={24}
@ -1070,6 +1103,9 @@ export const AllVariants: Story = {
</Stack> </Stack>
<Stack space flexDirection="column" alignItems="flex-start"> <Stack space flexDirection="column" alignItems="flex-start">
<ContextTag type="label" size={32} blur>
Name
</ContextTag>
<ContextTag <ContextTag
type="user" type="user"
user={{ user={{
@ -1145,7 +1181,7 @@ export const AllVariants: Story = {
/> />
<ContextTag type="address" address="0x045...1ah" size={32} blur /> <ContextTag type="address" address="0x045...1ah" size={32} blur />
<ContextTag <ContextTag
icon={<PendingIcon size={16} />} icon={<PlaceholderIcon size={16} />}
type="icon" type="icon"
label="Context" label="Context"
size={32} 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 { AvatarProps } from '../avatar'
import type { TextProps } from '../text' import type { TextProps } from '../text'
import type { IconProps } from '@status-im/icons' import type { IconProps } from '@status-im/icons'
import type { ComponentProps } from 'react'
type Props = { blur?: boolean; outline?: boolean } & ( type Props = { blur?: boolean; outline?: boolean } & (
| { | {
@ -74,6 +75,15 @@ const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
'20': 12, '20': 12,
} }
const chevronIconSize: Record<
NonNullable<Props['size']>,
ComponentProps<typeof ChevronRightIcon>['size']
> = {
'32': 20,
'24': 16,
'20': 12,
}
const Label = (props: { const Label = (props: {
children: string children: string
size: 13 | 15 size: 13 | 15
@ -95,8 +105,10 @@ const ContextTag = (props: Props) => {
const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label' const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label'
let textSize: Extract<TextProps['size'], 13 | 15> let textSize: Extract<TextProps['size'], 13 | 15>
let paddingHorizontal: number | undefined
if (size === 24) { if (size === 24) {
textSize = 'textSize' in props ? props.textSize : 13 // default if props.size not set but fallbacked to 24 textSize = 'textSize' in props ? props.textSize : 13 // default if props.size not set but fallbacked to 24
paddingHorizontal = textSize === 13 ? 8 : 6
} else { } else {
textSize = textSizes[size] textSize = textSizes[size]
} }
@ -140,7 +152,10 @@ const ContextTag = (props: Props) => {
/> />
<Stack flexDirection="row" gap="$0" alignItems="center"> <Stack flexDirection="row" gap="$0" alignItems="center">
<Label size={textSize}>{props.channel.communityName}</Label> <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> <Label size={textSize}>{`# ` + props.channel.name}</Label>
</Stack> </Stack>
</> </>
@ -256,8 +271,9 @@ const ContextTag = (props: Props) => {
blur={blur} blur={blur}
borderRadius={rounded ? '$8' : '$full'} borderRadius={rounded ? '$8' : '$full'}
size={size} size={size}
textSize={textSize} {...(paddingHorizontal && { paddingHorizontal })}
{...(hasAvatar && { paddingLeft: 1 })} {...(hasAvatar && { paddingLeft: 2 })}
{...(hasAvatar && outline && { paddingLeft: 1 })}
> >
{renderContent()} {renderContent()}
</Base> </Base>
@ -272,17 +288,13 @@ const Base = styled(View, {
display: 'inline-flex', display: 'inline-flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'transparent',
variants: { variants: {
outline: { outline: {
true: { true: {
borderWidth: '1px',
borderColor: '$primary-50', borderColor: '$primary-50',
}, borderStyle: 'solid',
false: {
borderColor: 'transparent',
}, },
}, },
blur: { blur: {
@ -309,13 +321,5 @@ const Base = styled(View, {
paddingHorizontal: 12, paddingHorizontal: 12,
}, },
}, },
textSize: {
13: {
paddingHorizontal: 8,
},
15: {
paddingHorizontal: 6,
},
},
} as const, } as const,
}) })