Skip to content

Commit

Permalink
fix ContextTag style (#478)
Browse files Browse the repository at this point in the history 
* u stories

* f

* ch
  • Loading branch information
@felicio
felicio authored Sep 25, 2023
1 parent 19384e1 commit b560d62
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 30 deletions.
5 changes: 5 additions & 0 deletions .changeset/sharp-planes-grab.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@status-im/components': patch
---

fix ContextTag style
62 changes: 49 additions & 13 deletions packages/components/src/context-tag/context-tag.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -563,7 +581,7 @@ export const AllVariants: Story = {
outline
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
Expand All @@ -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={{
Expand Down Expand Up @@ -669,7 +690,7 @@ export const AllVariants: Story = {
outline
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -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={{
Expand Down Expand Up @@ -947,7 +977,7 @@ export const AllVariants: Story = {
blur
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
Expand All @@ -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={{
Expand Down Expand Up @@ -1053,7 +1086,7 @@ export const AllVariants: Story = {
blur
/>
<ContextTag
icon={<PendingIcon size={12} />}
icon={<PlaceholderIcon size={12} />}
type="icon"
label="Context"
size={24}
Expand All @@ -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={{
Expand Down Expand Up @@ -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}
Expand Down
38 changes: 21 additions & 17 deletions packages/components/src/context-tag/context-tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 } & (
| {
Expand Down Expand Up @@ -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
Expand All @@ -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]
}
Expand Down Expand Up @@ -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>
</>
Expand Down Expand Up @@ -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>
Expand All @@ -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: {
Expand All @@ -309,13 +321,5 @@ const Base = styled(View, {
paddingHorizontal: 12,
},
},
textSize: {
13: {
paddingHorizontal: 8,
},
15: {
paddingHorizontal: 6,
},
},
} as const,
})

2 comments on commit b560d62

@vercel
Copy link

@vercel vercel bot commented on b560d62 Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

status-components – ./packages/components

status-components-status-im-web.vercel.app
status-components.vercel.app
status-components-git-main-status-im-web.vercel.app

@vercel
Copy link

@vercel vercel bot commented on b560d62 Sep 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

status-web – ./apps/web

status-web-git-main-status-im-web.vercel.app
status-web.vercel.app
status-web-status-im-web.vercel.app

Please sign in to comment.