From 7afc447e697f61c7da11c07ec3114ffb8c9da674 Mon Sep 17 00:00:00 2001 From: Pavel <14926950+prichodko@users.noreply.github.com> Date: Fri, 27 Oct 2023 17:44:54 +0200 Subject: [PATCH] Add tabs variants and remove blur (#501) * remove backdrop filter * add tabs variants * fix usage * Create cold-jars-return.md * f --- .changeset/cold-jars-return.md | 6 + packages/components/src/button/button.tsx | 11 -- .../messages/components/reactions-dialog.tsx | 2 +- packages/components/src/tabs/tabs.stories.tsx | 110 +++++++++++++++++- packages/components/src/tabs/tabs.tsx | 84 ++++++++++--- 5 files changed, 181 insertions(+), 32 deletions(-) create mode 100644 .changeset/cold-jars-return.md diff --git a/.changeset/cold-jars-return.md b/.changeset/cold-jars-return.md new file mode 100644 index 00000000..d9e957d5 --- /dev/null +++ b/.changeset/cold-jars-return.md @@ -0,0 +1,6 @@ +--- +"@status-im/components": patch +--- + +- Add tabs variants +- Remove `backdrop-filter` diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx index 2bb22bdb..0bd6bd73 100644 --- a/packages/components/src/button/button.tsx +++ b/packages/components/src/button/button.tsx @@ -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, }, }, diff --git a/packages/components/src/messages/components/reactions-dialog.tsx b/packages/components/src/messages/components/reactions-dialog.tsx index dfc76805..c9e73bfb 100644 --- a/packages/components/src/messages/components/reactions-dialog.tsx +++ b/packages/components/src/messages/components/reactions-dialog.tsx @@ -63,7 +63,7 @@ export const ReactionsDialog = (props: Props) => { - + {Object.entries(reactions).map(([reaction, value]) => { const Icon = REACTIONS_ICONS[reaction as keyof ReactionsType] return ( diff --git a/packages/components/src/tabs/tabs.stories.tsx b/packages/components/src/tabs/tabs.stories.tsx index de12a3ff..e9aece45 100644 --- a/packages/components/src/tabs/tabs.stories.tsx +++ b/packages/components/src/tabs/tabs.stories.tsx @@ -18,14 +18,114 @@ const meta: Meta = { }, } -export const Default: StoryObj = { +export const Grey: StoryObj = { args: { defaultValue: '1', }, render(args) { return ( - + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + + Content 1 + + + Content 2 + + + Content 3 + + + ) + }, +} + +export const GreyBlur: StoryObj = { + args: { + defaultValue: '1', + }, + render(args) { + return ( + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + + Content 1 + + + Content 2 + + + Content 3 + + + ) + }, +} + +export const DarkGrey: StoryObj = { + args: { + defaultValue: '1', + }, + render(args) { + return ( + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + + Content 1 + + + Content 2 + + + Content 3 + + + ) + }, +} +export const DarkGreyBlur: StoryObj = { + args: { + defaultValue: '1', + }, + parameters: { + backgrounds: { + default: 'dark', + }, + }, + render(args) { + return ( + + Tab 1 @@ -57,7 +157,7 @@ export const Icon: StoryObj = { render(args) { return ( - + = { render(args) { return ( - + Tab 1 @@ -133,7 +233,7 @@ export const Step: StoryObj = { render(args) { return ( - + Tab 1 diff --git a/packages/components/src/tabs/tabs.tsx b/packages/components/src/tabs/tabs.tsx index 84426c17..e0471ca2 100644 --- a/packages/components/src/tabs/tabs.tsx +++ b/packages/components/src/tabs/tabs.tsx @@ -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) => { {Children.map(children, child => ( - {cloneElement(child, { size: props.size })} + {cloneElement(child, { size: props.size, variant: props.variant })} ))} @@ -86,20 +87,21 @@ const TabsTrigger = (props: TriggerProps, ref: Ref) => { 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) => { {...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: { - 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,