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

Add tabs variants and remove blur (#501) 

* remove backdrop filter

* add tabs variants

* fix usage

* Create cold-jars-return.md

* f
This commit is contained in:
Pavel 2023-10-27 17:44:54 +02:00 committed by GitHub
parent 8aa1347f7d
commit 7afc447e69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 181 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/cold-jars-return.md Normal file
View File

@ -0,0 +1,6 @@
---
"@status-im/components": patch
---
- Add tabs variants
- Remove `backdrop-filter`

11
packages/components/src/button/button.tsx
View File

@ -240,23 +240,12 @@ const Base = styled(View, {
backgroundColor: '$neutral-80/5',
hoverStyle: { backgroundColor: '$neutral-80/10' },
pressStyle: { backgroundColor: '$neutral-80/20' },
'$platform-web': {
backdropFilter: 'blur(20px)',
// Tamagui does not accept this property even though it is valid (and works)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as unknown as any,
},
blur_outline: {
borderWidth: 1,
borderColor: '$neutral-80/10',
hoverStyle: { borderColor: '$neutral-80/20' },
pressStyle: { borderColor: '$neutral-80/30' },
'$platform-web': {
backdropFilter: 'blur(20px)',
// Tamagui does not accept this property even though it is valid (and works)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} as unknown as any,
},
},

2
packages/components/src/messages/components/reactions-dialog.tsx
View File

@ -63,7 +63,7 @@ export const ReactionsDialog = (props: Props) => {
<Dialog.Content width={352} borderRadius="$12">
<Tabs defaultValue={initialReactionType}>
<Stack padding={16}>
<Tabs.List size={24}>
<Tabs.List variant="grey" size={24}>
{Object.entries(reactions).map(([reaction, value]) => {
const Icon = REACTIONS_ICONS[reaction as keyof ReactionsType]
return (

110
packages/components/src/tabs/tabs.stories.tsx
View File

@ -18,14 +18,114 @@ const meta: Meta<typeof Tabs> = {
},
}
export const Default: StoryObj<TabsProps> = {
export const Grey: StoryObj<TabsProps> = {
args: {
defaultValue: '1',
},
render(args) {
return (
<Tabs {...args}>
<Tabs.List size={32}>
<Tabs.List variant="grey" size={32}>
<Tabs.Trigger type="default" value="1">
Tab 1
</Tabs.Trigger>
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
Tab 3
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="1">
<Text size={15}>Content 1</Text>
</Tabs.Content>
<Tabs.Content value="2">
<Text size={15}>Content 2</Text>
</Tabs.Content>
<Tabs.Content value="3">
<Text size={15}>Content 3</Text>
</Tabs.Content>
</Tabs>
)
},
}
export const GreyBlur: StoryObj<TabsProps> = {
args: {
defaultValue: '1',
},
render(args) {
return (
<Tabs {...args}>
<Tabs.List variant="blur_grey" size={32}>
<Tabs.Trigger type="default" value="1">
Tab 1
</Tabs.Trigger>
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
Tab 3
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="1">
<Text size={15}>Content 1</Text>
</Tabs.Content>
<Tabs.Content value="2">
<Text size={15}>Content 2</Text>
</Tabs.Content>
<Tabs.Content value="3">
<Text size={15}>Content 3</Text>
</Tabs.Content>
</Tabs>
)
},
}
export const DarkGrey: StoryObj<TabsProps> = {
args: {
defaultValue: '1',
},
render(args) {
return (
<Tabs {...args}>
<Tabs.List variant="darkGrey" size={32}>
<Tabs.Trigger type="default" value="1">
Tab 1
</Tabs.Trigger>
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
Tab 3
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="1">
<Text size={15}>Content 1</Text>
</Tabs.Content>
<Tabs.Content value="2">
<Text size={15}>Content 2</Text>
</Tabs.Content>
<Tabs.Content value="3">
<Text size={15}>Content 3</Text>
</Tabs.Content>
</Tabs>
)
},
}
export const DarkGreyBlur: StoryObj<TabsProps> = {
args: {
defaultValue: '1',
},
parameters: {
backgrounds: {
default: 'dark',
},
},
render(args) {
return (
<Tabs {...args}>
<Tabs.List variant="blur_darkGrey" size={32}>
<Tabs.Trigger type="default" value="1">
Tab 1
</Tabs.Trigger>
@ -57,7 +157,7 @@ export const Icon: StoryObj<TabsProps> = {
render(args) {
return (
<Tabs {...args}>
<Tabs.List size={32}>
<Tabs.List variant="grey" size={32}>
<Tabs.Trigger
type="icon"
value="1"
@ -101,7 +201,7 @@ export const Counter: StoryObj<TabsProps> = {
render(args) {
return (
<Tabs {...args}>
<Tabs.List size={32}>
<Tabs.List variant="grey" size={32}>
<Tabs.Trigger type="counter" value="1" count={5}>
Tab 1
</Tabs.Trigger>
@ -133,7 +233,7 @@ export const Step: StoryObj<TabsProps> = {
render(args) {
return (
<Tabs {...args}>
<Tabs.List size={32}>
<Tabs.List variant="grey" size={32}>
<Tabs.Trigger type="step" value="1" step={1}>
Tab 1
</Tabs.Trigger>

80
packages/components/src/tabs/tabs.tsx
View File

@ -40,6 +40,7 @@ const Tabs = (props: Props) => {
type ListProps = {
children: React.ReactElement[]
variant: Variants['variant']
size: Variants['size']
}
@ -51,7 +52,7 @@ const TabsList = (props: ListProps) => {
<Stack flexDirection="row" gap={8}>
{Children.map(children, child => (
<Trigger asChild value={child.props.value}>
{cloneElement(child, { size: props.size })}
{cloneElement(child, { size: props.size, variant: props.variant })}
</Trigger>
))}
</Stack>
@ -86,20 +87,21 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
const providedProps = props as TriggerProps & {
size: 24 | 32
'aria-selected': boolean
variant: Variants['variant']
}
const { size, 'aria-selected': selected, variant } = providedProps
const { color, pressableProps } = usePressableColors(
{
default: '$neutral-100',
hover: '$neutral-100',
press: '$neutral-100',
default: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
hover: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
press: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
active: '$white-100',
},
providedProps
)
const { size, 'aria-selected': selected } = providedProps
const textSize = triggerTextSizes[size]
return (
@ -108,6 +110,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
{...pressableProps}
ref={ref}
size={size}
variant={variant}
active={selected}
>
{props.type === 'icon' &&
@ -148,6 +151,34 @@ const TriggerBase = styled(View, {
justifyContent: 'center',
variants: {
variant: {
grey: {
backgroundColor: '$neutral-10',
hoverStyle: {
backgroundColor: '$neutral-20',
},
},
darkGrey: {
backgroundColor: '$neutral-20',
hoverStyle: {
backgroundColor: '$neutral-30',
},
},
blur_grey: {
backgroundColor: '$neutral-80/5',
hoverStyle: {
backgroundColor: '$neutral-80/10',
// backgroundColor: '$neutral-80/60',
},
},
blur_darkGrey: {
backgroundColor: '$white-5',
hoverStyle: {
backgroundColor: '$white-10',
},
},
},
size: {
32: {
height: 32,
@ -163,15 +194,38 @@ const TriggerBase = styled(View, {
},
},
active: {
true: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
true: (_v, { props }) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const variant = (props as any).variant as Variants['variant']
if (variant === 'grey' || variant === 'darkGrey') {
return {
cursor: 'default',
backgroundColor: '$neutral-50',
},
false: {
backgroundColor: '$neutral-10',
hoverStyle: {
backgroundColor: '$neutral-20',
},
hoverStyle: { backgroundColor: '$neutral-50' },
pressStyle: { backgroundColor: '$neutral-50' },
}
}
if (variant === 'blur_grey') {
return {
cursor: 'default',
backgroundColor: '$neutral-80/60',
hoverStyle: { backgroundColor: '$neutral-80/60' },
pressStyle: { backgroundColor: '$neutral-80/60' },
}
}
if (variant === 'blur_darkGrey') {
return {
cursor: 'default',
backgroundColor: '$white-20',
hoverStyle: { backgroundColor: '$white-20' },
pressStyle: { backgroundColor: '$white-20' },
}
}
},
},
} as const,