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

View File

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

View File

@ -240,23 +240,12 @@ const Base = styled(View, {
backgroundColor: '$neutral-80/5', backgroundColor: '$neutral-80/5',
hoverStyle: { backgroundColor: '$neutral-80/10' }, hoverStyle: { backgroundColor: '$neutral-80/10' },
pressStyle: { backgroundColor: '$neutral-80/20' }, 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: { blur_outline: {
borderWidth: 1, borderWidth: 1,
borderColor: '$neutral-80/10', borderColor: '$neutral-80/10',
hoverStyle: { borderColor: '$neutral-80/20' }, hoverStyle: { borderColor: '$neutral-80/20' },
pressStyle: { borderColor: '$neutral-80/30' }, 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,
}, },
}, },

View File

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

View File

@ -18,14 +18,114 @@ const meta: Meta<typeof Tabs> = {
}, },
} }
export const Default: StoryObj<TabsProps> = { export const Grey: StoryObj<TabsProps> = {
args: { args: {
defaultValue: '1', defaultValue: '1',
}, },
render(args) { render(args) {
return ( return (
<Tabs {...args}> <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"> <Tabs.Trigger type="default" value="1">
Tab 1 Tab 1
</Tabs.Trigger> </Tabs.Trigger>
@ -57,7 +157,7 @@ export const Icon: StoryObj<TabsProps> = {
render(args) { render(args) {
return ( return (
<Tabs {...args}> <Tabs {...args}>
<Tabs.List size={32}> <Tabs.List variant="grey" size={32}>
<Tabs.Trigger <Tabs.Trigger
type="icon" type="icon"
value="1" value="1"
@ -101,7 +201,7 @@ export const Counter: StoryObj<TabsProps> = {
render(args) { render(args) {
return ( return (
<Tabs {...args}> <Tabs {...args}>
<Tabs.List size={32}> <Tabs.List variant="grey" size={32}>
<Tabs.Trigger type="counter" value="1" count={5}> <Tabs.Trigger type="counter" value="1" count={5}>
Tab 1 Tab 1
</Tabs.Trigger> </Tabs.Trigger>
@ -133,7 +233,7 @@ export const Step: StoryObj<TabsProps> = {
render(args) { render(args) {
return ( return (
<Tabs {...args}> <Tabs {...args}>
<Tabs.List size={32}> <Tabs.List variant="grey" size={32}>
<Tabs.Trigger type="step" value="1" step={1}> <Tabs.Trigger type="step" value="1" step={1}>
Tab 1 Tab 1
</Tabs.Trigger> </Tabs.Trigger>

View File

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