feat(tab-bar-island): glass-like view

.changeset/lucky-weeks-allow.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-tab-bar-island': minor
+---
+
+- Добавлен эффект прозрачности

packages/tab-bar-island/src/components/entry-content/index.module.css

@@ -8,7 +8,7 @@
 
 .label {
     @mixin action_secondary_small;
-
+    position: relative;
     margin: 0 var(--gap-10) var(--gap-6);
     white-space: nowrap;
     overflow: hidden;

packages/tab-bar-island/src/components/tab-list/index.module.css

@@ -7,12 +7,6 @@
     position: relative;
 }
 
-.underlay {
-    border-radius: var(--tab-bar-island-border-radius);
-    background: var(--tab-bar-island-background);
-    box-shadow: var(--tab-bar-island-box-shadow);
-}
-
 .wrapper {
     display: flex;
     max-width: 100%;
@@ -54,7 +48,7 @@
     left: 0;
     height: 100%;
     width: 100%;
-    background: var(--color-light-neutral-translucent-200);
+    background: var(--tab-bar-island-tab-tracker-background-color);
     will-change: width, height, border-radius;
 }
 

packages/tab-bar-island/src/components/tab-list/index.tsx

@@ -1,5 +1,6 @@
 import React, { type FC, useMemo, useState } from 'react';
 
+import { Underlay } from '@alfalab/core-components-tab-bar-island/components/underlay';
 import { usePillAnimation } from '@alfalab/core-components-tab-bar-island/hooks/use-pill-animation';
 import { type TabBarIslandTabListProps } from '@alfalab/core-components-tab-bar-island/types';
 
@@ -40,7 +41,7 @@ export const TabBarIslandTabList: FC<TabBarIslandTabListProps> = ({
 
     return (
         <div role='tablist' className={styles.list} ref={listRef}>
-            <div className={styles.underlay} ref={underlayRef} />
+            <Underlay className={styles.underlay} ref={underlayRef} />
             <div
                 className={styles.wrapper}
                 ref={wrapperRef}

packages/tab-bar-island/src/components/trailing-icon-button/index.module.css

@@ -1,10 +1,17 @@
 @import '@alfalab/core-components-tab-bar-island/src/vars.css';
 
 .component {
-    border-radius: var(--tab-bar-island-border-radius);
-    background: var(--tab-bar-island-background);
-    box-shadow: var(--tab-bar-island-box-shadow);
     padding: var(--gap-4);
     margin-left: var(--gap-8);
+    position: relative;
+}
+
+.underlay {
+    position: absolute;
+    inset: 0;
+}
+
+.button {
+    position: relative;
     max-width: calc(var(--tab-bar-island-tab-max-size) - 2 * var(--gap-4));
 }

packages/tab-bar-island/src/components/trailing-icon-button/index.tsx

@@ -2,6 +2,7 @@ import React, { type FC } from 'react';
 import cn from 'classnames';
 
 import { TabBarIslandEntry } from '@alfalab/core-components-tab-bar-island/components/entry';
+import { Underlay } from '@alfalab/core-components-tab-bar-island/components/underlay';
 import { type TabBarIslandTrailingIconButtonProps } from '@alfalab/core-components-tab-bar-island/types';
 
 import styles from './index.module.css';
@@ -10,5 +11,8 @@ export const TabBarIslandTrailingIconButton: FC<TabBarIslandTrailingIconButtonPr
     className,
     ...restProps
 }) => (
-    <TabBarIslandEntry {...restProps} role='button' className={cn(styles.component, className)} />
+    <div className={styles.component}>
+        <Underlay className={styles.underlay} />
+        <TabBarIslandEntry {...restProps} role='button' className={cn(styles.button, className)} />
+    </div>
 );

packages/tab-bar-island/src/components/underlay/index.module.css

@@ -0,0 +1,71 @@
+@import '@alfalab/core-components-tab-bar-island/src/vars.css';
+
+.component {
+    background: var(--tab-bar-island-background);
+    border-radius: var(--tab-bar-island-border-radius);
+    box-shadow: var(--tab-bar-island-box-shadow);
+    backdrop-filter: var(--tab-bar-island-backdrop-filter);
+
+    &:before {
+        top: 0;
+    }
+
+    &:after {
+        bottom: 0;
+    }
+
+    &:before,
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        height: var(--tab-bar-island-border-width);
+        right: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+        left: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+        background: linear-gradient(
+            95deg,
+            var(--tab-bar-island-border-color-from),
+            var(--tab-bar-island-border-color-to)
+        );
+    }
+}
+
+.border {
+    width: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+    overflow: hidden;
+
+    &,
+    &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+    }
+
+    &:before {
+        content: '';
+        display: block;
+        width: calc(var(--tab-bar-island-border-radius) - var(--tab-bar-island-border-width));
+    }
+
+    &[data-position='start'] {
+        left: 0;
+
+        &:before {
+            left: 0;
+            border: var(--tab-bar-island-border-width) solid var(--tab-bar-island-border-color-from);
+            border-top-left-radius: var(--tab-bar-island-border-radius);
+            border-bottom-left-radius: var(--tab-bar-island-border-radius);
+        }
+    }
+
+    &[data-position='end'] {
+        right: 0;
+
+        &:before {
+            right: 0;
+            border: var(--tab-bar-island-border-width) solid var(--tab-bar-island-border-color-to);
+            border-top-right-radius: var(--tab-bar-island-border-radius);
+            border-bottom-right-radius: var(--tab-bar-island-border-radius);
+        }
+    }
+}

packages/tab-bar-island/src/components/underlay/index.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+import styles from './index.module.css';
+
+export interface UnderlayProps {
+    className?: string;
+}
+
+export const Underlay = forwardRef<HTMLDivElement, UnderlayProps>(({ className }, ref) => (
+    <div ref={ref} className={cn(styles.component, className)}>
+        <div className={styles.border} data-position='start' />
+        <div className={styles.border} data-position='end' />
+    </div>
+));

packages/tab-bar-island/src/docs/description.mdx

@@ -1,9 +1,9 @@
 ## Icon
 
-```jsx live mobileOnly mobileHeight={100}
+```jsx live
 render(() => {
     return (
-        <div style={{ margin: '0 -20px -20px' }}>
+        <div style={{ padding: '20px', background: 'url("./images/test.png")' }}>
             <TabBarIsland
                 items={[
                     { key: 'money', icon: <DiamondsMIcon />, label: 'Деньги' },
@@ -21,7 +21,7 @@ render(() => {
 
 ## Image
 
-```jsx live mobileOnly mobileHeight={100}
+```jsx live
 const IconComponent = ({ style, children, ...restProps }) => (
     <div {...restProps} style={{ ...style, width: 48 }}>
         {children}
@@ -30,7 +30,7 @@ const IconComponent = ({ style, children, ...restProps }) => (
 
 render(() => {
     return (
-        <div style={{ margin: '10px -20px -20px' }}>
+        <div style={{ padding: '20px', background: 'url("./images/test.png")' }}>
             <TabBarIsland
                 items={[
                     { key: 'money', icon: <DiamondsMIcon />, label: 'Деньги' },
@@ -66,7 +66,7 @@ render(() => {
 
 ## Full Image
 
-```jsx live mobileOnly mobileHeight={100}
+```jsx live
 const IconComponent = ({ style, children, ...restProps }) => (
     <div {...restProps} style={{ ...style, width: 48 }}>
         {children}
@@ -75,7 +75,7 @@ const IconComponent = ({ style, children, ...restProps }) => (
 
 render(() => {
     return (
-        <div style={{ margin: '0 -20px -20px' }}>
+        <div style={{ padding: '20px', background: 'url("./images/test.png")' }}>
             <TabBarIsland
                 items={[
                     { key: 'money', icon: <DiamondsMIcon />, label: 'Деньги' },

packages/tab-bar-island/src/vars.css

@@ -6,8 +6,13 @@
     --tab-bar-island-tab-default-size: 92px;
     --tab-bar-island-tab-max-size: 120px;
     --tab-bar-island-border-radius: 40px;
-    --tab-bar-island-background: var(--color-light-modal-bg-primary);
+    --tab-bar-island-background: rgba(255, 255, 255, 0.56);
     --tab-bar-island-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.14);
     --tab-bar-island-tab-color: var(--color-light-text-secondary);
     --tab-bar-island-tab-active-color: var(--color-light-accent-secondary);
+    --tab-bar-island-tab-tracker-background-color: var(--color-light-neutral-translucent-200);
+    --tab-bar-island-backdrop-filter: blur(5px);
+    --tab-bar-island-border-width: 1px;
+    --tab-bar-island-border-color-from: transparent;
+    --tab-bar-island-border-color-to: var(--color-light-neutral-translucent-700-inverted);
 }