feat(tabs): add new tabs components

CODEOWNERS

@@ -50,7 +50,7 @@
 /src/components/Stories @DarkGenius
 /src/components/Switch @zamkovskaya
 /src/components/Table @Raubzeug
-/src/components/Tabs @sofiushko
+/src/components/tabs @sofiushko
 /src/components/Text @IsaevAlexandr
 /src/components/TreeList @IsaevAlexandr
 /src/components/TreeSelect @IsaevAlexandr

package.json

@@ -79,6 +79,11 @@
                 "default": "./build/cjs/unstable.js"
             }
         },
+        "./deprecated": {
+            "types": "./build/esm/deprecated.d.ts",
+            "require": "./build/cjs/deprecated.js",
+            "import": "./build/esm/deprecated.js"
+        },
         "./server": {
             "node": {
                 "types": "./build/cjs/server.d.ts",

src/components/index.ts

@@ -51,7 +51,7 @@ export * from './Spin';
 export * from './Switch';
 export * from './Table';
 export * from './TableColumnSetup';
-export * from './Tabs';
+export * from './tabs';
 export * from './Text';
 export * from './Toaster';
 export * from './Toc';

src/components/Tabs/README.md → src/components/lab/Tabs/README.md

@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {deprecated_Tabs as Tabs} from '@gravity-ui/uikit/deprecated';
 ```
 
 Tabs is used to explore, organize content and switch between different views.
@@ -297,7 +297,7 @@ LANDING_BLOCK-->
 | meta     | Tab description                |          `string`          |         |
 | hint     | HTML title attribute           |          `string`          |         |
 | icon     | Icon displayed at the start    |     `React.ReactNode`      |         |
-| counter  | Number displayed at the end    |     `React.ReactNode`      |         |
+| counter  | Number displayed at the end    |     `number` `string`      |         |
 | label    | `<Label>` displayed at the end |     `React.ReactNode`      |         |
 | disabled | Inactive state                 |         `boolean`          |         |
 

src/components/Tabs/Tabs.scss → src/components/lab/Tabs/Tabs.scss

@@ -1,5 +1,5 @@
-@use '../variables';
-@use '../../../styles/mixins';
+@use '../../variables';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns}tabs';
 

src/components/Tabs/Tabs.tsx → src/components/lab/Tabs/Tabs.tsx

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import type {QAProps} from '../types';
-import {block} from '../utils/cn';
+import type {QAProps} from '../../types';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 import {TabsItem} from './TabsItem';

src/components/Tabs/TabsItem.tsx → src/components/lab/Tabs/TabsItem.tsx

@@ -2,9 +2,9 @@
 
 import React from 'react';
 
-import {Label} from '../Label';
-import type {LabelProps} from '../Label';
-import {block} from '../utils/cn';
+import {Label} from '../../Label';
+import type {LabelProps} from '../../Label';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 

src/components/Tabs/__stories__/Tabs.stories.tsx → src/components/lab/Tabs/__stories__/Tabs.stories.tsx

@@ -10,7 +10,7 @@ import {getTabsMock} from './getTabsMock';
 import type {StoryParams} from './types';
 
 const meta: Meta<typeof Tabs> = {
-    title: 'Components/Navigation/Tabs',
+    title: 'Deprecated/Tabs',
     component: Tabs,
     args: {
         direction: TabsDirection.Horizontal,

src/components/Tabs/__tests__/Tabs.test.tsx → src/components/lab/Tabs/__tests__/Tabs.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {Tabs, TabsDirection} from '../Tabs';
 import type {TabsItemProps, TabsSize} from '../Tabs';
 

src/components/Tabs/__tests__/TabsItem.test.tsx → src/components/lab/Tabs/__tests__/TabsItem.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Flame} from '@gravity-ui/icons';
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {TabsItem} from '../TabsItem';
 
 const tabId = 'tab-id';

src/components/tabs/README.md

@@ -0,0 +1,5 @@
+<!--GITHUB_BLOCK-->
+
+# tabs
+
+<!--/GITHUB_BLOCK-->

src/components/tabs/Tab.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+
+import {KeyCode} from '../../constants';
+import {Label} from '../Label';
+import type {LabelProps} from '../Label';
+import type {AriaLabelingProps, DOMProps, QAProps} from '../types';
+import {filterDOMProps} from '../utils/filterDOMProps';
+
+import {bTabList} from './constants';
+import {TabInnerContext} from './contexts/TabInnerContext';
+import type {TabTriggerProps} from './types';
+
+export interface TabProps extends AriaLabelingProps, DOMProps, QAProps, TabTriggerProps {
+    value: string;
+    title?: string;
+    icon?: React.ReactNode;
+    counter?: number | string;
+    href?: string;
+    label?: {
+        content: React.ReactNode;
+        theme?: LabelProps['theme'];
+    };
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+
+export const Tab = React.forwardRef<HTMLAnchorElement | HTMLDivElement, TabProps>((props, ref) => {
+    const {value, className, icon, counter, label, disabled, href, style, children, title, qa} =
+        props;
+
+    const {activeTabId, onUpdate} = React.useContext(TabInnerContext);
+    const isActive = activeTabId === value;
+
+    const handleClick = (event: React.MouseEvent | React.KeyboardEvent) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        onUpdate?.(value);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === KeyCode.SPACEBAR) {
+            onUpdate?.(value);
+        }
+    };
+
+    const tabProps = {
+        'aria-selected': isActive,
+        'aria-disabled': disabled === true,
+        'aria-controls': props['aria-controls'],
+        ...filterDOMProps(props, {labelable: true}),
+        role: 'tab',
+        style,
+        title,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        id: props.id,
+        'data-qa': qa,
+        className: bTabList('item', {active: isActive, disabled}, className),
+    };
+
+    const content = (
+        <div className={bTabList('item-content')}>
+            {icon && <div className={bTabList('item-icon')}>{icon}</div>}
+            <div className={bTabList('item-title')}>{children || value}</div>
+            {counter !== undefined && <div className={bTabList('item-counter')}>{counter}</div>}
+            {label && (
+                <Label className={bTabList('item-label')} theme={label.theme}>
+                    {label.content}
+                </Label>
+            )}
+        </div>
+    );
+
+    if (href) {
+        return (
+            <a {...tabProps} href={href} ref={ref as React.Ref<HTMLAnchorElement>}>
+                {content}
+            </a>
+        );
+    }
+
+    return (
+        <div {...tabProps} tabIndex={disabled ? -1 : 0} ref={ref as React.Ref<HTMLDivElement>}>
+            {content}
+        </div>
+    );
+});
+
+Tab.displayName = 'Tab';

src/components/tabs/TabList.scss

@@ -0,0 +1,142 @@
+@use '../variables';
+@use '../../../styles/mixins';
+
+$block: '.#{variables.$ns}tab-list';
+
+#{$block} {
+    --_--vertical-item-padding: var(--g-tabs-vertical-item-padding, 6px 20px);
+    --_--vertical-item-height: var(--g-tabs-vertical-item-height, 18px);
+
+    &_size {
+        &_m {
+            --_--item-height: 36px;
+            --_--item-gap: 24px;
+            --_--item-border-width: 2px;
+
+            #{$block}__item-title,
+            #{$block}__item-counter {
+                @include mixins.text-body-1();
+            }
+        }
+
+        &_l {
+            --_--item-height: 40px;
+            --_--item-gap: 28px;
+            --_--item-border-width: 2px;
+
+            #{$block}__item-title,
+            #{$block}__item-counter {
+                @include mixins.text-body-2();
+            }
+        }
+
+        &_xl {
+            --_--item-height: 44px;
+            --_--item-gap: 32px;
+            --_--item-border-width: 3px;
+
+            #{$block}__item-title,
+            #{$block}__item-counter {
+                @include mixins.text-subheader-3();
+            }
+        }
+    }
+
+    &__item {
+        cursor: pointer;
+        user-select: none;
+        outline: none;
+        color: inherit;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        height: var(--g-tabs-item-height, var(--_--item-height));
+        border-block-end: var(--g-tabs-item-border-width, var(--_--item-border-width)) solid
+            transparent;
+        padding-block-start: var(--_--item-border-width);
+
+        &-content {
+            display: flex;
+            align-items: center;
+            border-radius: var(--g-focus-border-radius);
+            min-width: 0;
+            height: 100%;
+        }
+
+        &-icon {
+            margin-inline-end: 8px;
+        }
+
+        &-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &-counter,
+        &-label {
+            margin-inline-start: 8px;
+        }
+
+        &-icon > svg {
+            display: block;
+        }
+
+        &:focus-visible {
+            #{$block}__item-content {
+                outline: 2px solid var(--g-color-line-focus);
+                outline-offset: -2px;
+            }
+        }
+
+        &-title {
+            color: var(--g-color-text-secondary);
+        }
+
+        &-icon,
+        &-counter {
+            color: var(--g-color-text-hint);
+        }
+
+        &_active,
+        &:hover,
+        &:focus-visible {
+            #{$block}__item-title {
+                color: var(--g-color-text-primary);
+            }
+
+            #{$block}__item-icon,
+            #{$block}__item-counter {
+                color: var(--g-color-text-secondary);
+            }
+        }
+
+        &_active,
+        &_active:hover,
+        &_active:focus-visible {
+            border-color: var(--g-color-line-brand);
+        }
+
+        &_disabled {
+            pointer-events: none;
+
+            #{$block}__item-title {
+                color: var(--g-color-text-hint);
+            }
+        }
+    }
+
+    &__tabs {
+        display: flex;
+        align-items: flex-end;
+        flex-wrap: wrap;
+        box-shadow: inset 0 calc(var(--g-tabs-border-width, 1px) * -1) 0 0
+            var(--g-color-line-generic);
+        overflow: hidden;
+
+        > :not(:last-child) {
+            margin-inline-end: var(--g-tabs-item-gap, var(--_--item-gap));
+        }
+    }
+}

src/components/tabs/TabList.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+
+import type {QAProps} from '../types';
+
+import {bTabList} from './constants';
+import {TabContext} from './contexts/TabContext';
+import {TabInnerContext} from './contexts/TabInnerContext';
+import type {TabSize} from './types';
+
+export interface TabListProps extends QAProps {
+    onUpdate?: (value: string) => void;
+    value?: string;
+    size?: TabSize;
+    contentOverflow?: 'wrap';
+    className?: string;
+    children?: React.ReactNode;
+}
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+    ({size = 'm', value, children, className, onUpdate, qa}, ref) => {
+        const activeTabId = React.useContext(TabContext).activeTabId || value;
+
+        const tabInnerContextValue = React.useMemo(
+            () => ({onUpdate, activeTabId}),
+            [onUpdate, activeTabId],
+        );
+
+        return (
+            <div className={bTabList({size}, className)} data-qa={qa} ref={ref}>
+                <div
+                    role="tablist"
+                    className={bTabList('tabs', className)}
+                    aria-orientation="horizontal"
+                >
+                    <TabInnerContext.Provider value={tabInnerContextValue}>
+                        {children}
+                    </TabInnerContext.Provider>
+                </div>
+            </div>
+        );
+    },
+);
+
+TabList.displayName = 'TabList';