Skip to content

Commit

Permalink
Add tabs variants and remove blur (#501)
Browse files Browse the repository at this point in the history 
* remove backdrop filter

* add tabs variants

* fix usage

* Create cold-jars-return.md

* f
  • Loading branch information
@prichodko
prichodko authored Oct 27, 2023
1 parent 8aa1347 commit 7afc447
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 32 deletions.
6 changes: 6 additions & 0 deletions .changeset/cold-jars-return.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@status-im/components": patch
---

- Add tabs variants
- Remove `backdrop-filter`
11 changes: 0 additions & 11 deletions packages/components/src/button/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/messages/components/reactions-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
110 changes: 105 additions & 5 deletions packages/components/src/tabs/tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
84 changes: 69 additions & 15 deletions packages/components/src/tabs/tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const Tabs = (props: Props) => {

type ListProps = {
children: React.ReactElement[]
variant: Variants['variant']
size: Variants['size']
}

Expand All @@ -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>
Expand Down Expand Up @@ -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 (
Expand All @@ -108,6 +110,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
{...pressableProps}
ref={ref}
size={size}
variant={variant}
active={selected}
>
{props.type === 'icon' &&
Expand Down Expand Up @@ -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,
Expand All @@ -163,15 +194,38 @@ const TriggerBase = styled(View, {
},
},
active: {
true: {
cursor: 'default',
backgroundColor: '$neutral-50',
},
false: {
backgroundColor: '$neutral-10',
hoverStyle: {
backgroundColor: '$neutral-20',
},
// 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',
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,
Expand Down

2 comments on commit 7afc447

@vercel
Copy link

@vercel vercel bot commented on 7afc447 Oct 27, 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-git-main-status-im-web.vercel.app
status-components-status-im-web.vercel.app
status-components.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 7afc447 Oct 27, 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.vercel.app
status-web-status-im-web.vercel.app
status-web-git-main-status-im-web.vercel.app

Please sign in to comment.