feat(docs): tabs examples (#DS-2907)

apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html

@@ -1,6 +1,6 @@
 <div class="docs-live-example__container">
     @if (exampleData) {
-        <div class="docs-live-example__example">
+        <div class="docs-live-example__example docs-live-example__example_{{ exampleId }}">
             @if (exampleComponentType && exampleModuleFactory) {
                 <ng-template
                     [ngComponentOutlet]="exampleComponentType"

packages/components/tabs/_tabs-common.scss

@@ -75,16 +75,16 @@
         position: absolute;
         left: 0;
         right: 0;
-        top: -8px;
-        bottom: -8px;
+        top: -10px;
+        bottom: -10px;
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-selected:after {
         content: '';
         position: absolute;
         left: 0;
         right: 0;
-        bottom: -11px;
+        bottom: -10px;
         height: 3px;
         border-radius: 2px 2px 0 0;
         background: rgba(33, 34, 44, 1);
@@ -94,6 +94,7 @@
         justify-content: flex-start;
 
         & .kbq-tab-label__content {
+            display: block;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

packages/components/tabs/_tabs-theme.scss

@@ -19,6 +19,10 @@
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
+    &.kbq-tab-label_empty {
+        color: kbq-css-variable(foreground-contrast-secondary);
+    }
+
     &.kbq-selected {
         @include kbq-tab-item-state($type, $sub-type, states-selected);
 

packages/components/tabs/tab-header.scss

@@ -25,8 +25,18 @@
 }
 
 .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
+    position: relative;
     padding: 8px 0;
-    border-bottom: 1px solid rgba(13, 14, 18, 0.12);
+}
+
+.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 1px;
+    background: rgba(13, 14, 18, 0.12);
 }
 
 .kbq-tab-header__pagination {

packages/components/tabs/tabs.md

@@ -1,23 +1,65 @@
-### Default tabs
+Вкладки — способ отображения связанной информации на отдельных подписанных областях экрана.
 
 <!-- example(tabs-overview) -->
 
-### Vertical tabs
+### Состояния
+
+#### Вертикальные вкладки
+
+Длинный список вкладок можно разместить вертикально, чтобы все элементы были видны без прокрутки.
 
 <!-- example(tabs-vertical) -->
 
-### Stretch tabs
+Вертикальный вкладки можно использовать и без подписи. Добавляйте тултип иконкам, чтобы пояснить название раздела.
 
-<!-- example(tabs-stretch) -->
+<!-- example(tabs-vertical-icons) -->
 
-### Tabs with scroll
+#### Вкладки с полоской
 
-<!-- example(tabs-with-scroll) -->
+<!-- example(tabs-underlined) -->
+
+#### Disabled
+
+Неактивный таб нельзя выбрать, а выбранный неактивный нельзя переключить.
 
-### Empty tab
+<!-- example(tabs-disabled) -->
+
+#### Пустая вкладка
+
+Вкладка, внутри которой нет контента, может оформляться по‑особенному, чтобы заранее обозначить для пользователя, что нет нужды изучать содержимое: она будет серой в невыбранном состоянии.
 
 <!-- example(tabs-empty) -->
 
-### Old tabs
+#### Прокрутка
+
+Горизонтальные вкладки скрываются за областью видимости без переноса на новую строку или колонку (для вертикальных вкладок) и появляется прокрутка.
+
+<!-- example(tabs-with-scroll) -->
+
+### Примеры использования
+
+#### Выравнивание по ширине
+
+По умолчанию ширина горизонтальных вкладов зависит от подписей внутри элементов, но при необходимости панель табов может заполнять все пространство контейнера.
+
+<!-- example(tabs-stretch) -->
+
+#### Кнопки в строке вкладок
+
+Кнопки действий удобно разместить в строке с более высокими подчеркнутыми вкладками.
+
+<!-- example(tabs-actionbar) -->
+
+### Рекомендации
+
+Используйте для навигации по контенту на странице, когда важно дать быстрый доступ его к отдельным частям.
+
+По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять примечания для разработчика, например: обрати внимание, это не вкладки, а шаги формы.
+
+Не используйте вкладки:
 
-<!-- example(tabs-old) -->
+-   Когда весь контент можно разместить на одной странице, на одном экране. Незачем прятать его части под вкладки. Когда предполагается всего одна вкладка, то панель вкладок вовсе не нужна.
+-   Для выбора значения в формах. Не путайте вкладки с полями ввода: [радиокнопками](/components/radio), [кнопками-переключателями](/components/button-toggle). Вкладки — это навигация.
+-   Для основной навигации, для этого есть компонент [Navbar](/components/navbar). Используйте вкладки для второстепенной навигации.
+-   Когда надо изменить представление одних и тех же данных (список, плитка, таблица). Взамен используйте [кнопку-меню](/components/dropdown) или [кнопку-переключатель](/components/button-toggle).
+-   Когда контент уже вложен во вкладку. В том числе нельзя одновременно использовать вертикальные и горизонтальные вкладки. Вместо этого сократите количество вкладок, используйте только один вид вкладок или кнопку-переключатель, кнопку-меню.

packages/docs-examples/components/tabs/index.ts

@@ -2,31 +2,41 @@ import { NgModule } from '@angular/core';
 import { KbqButtonModule } from '@koobiq/components/button';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { KbqTabsModule } from '@koobiq/components/tabs';
+import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { TabActiveTabIndexExample } from './tab-active-tab-index/tab-active-tab-index-example';
 import { TabActiveTabExample } from './tab-active-tab/tab-active-tab-example';
+import { TabsActionbarExample } from './tabs-actionbar/tabs-actionbar-example';
+import { TabsDisabledExample } from './tabs-disabled/tabs-disabled-example';
 import { TabsEmptyExample } from './tabs-empty/tabs-empty-example';
-import { TabsOldExample } from './tabs-old/tabs-old-example';
 import { TabsOverviewExample } from './tabs-overview/tabs-overview-example';
 import { TabsStretchExample } from './tabs-stretch/tabs-stretch-example';
+import { TabsUnderlinedExample } from './tabs-underlined/tabs-underlined-example';
+import { TabsVerticalIconsExample } from './tabs-vertical-icons/tabs-vertical-icons-example';
 import { TabsVerticalExample } from './tabs-vertical/tabs-vertical-example';
 import { TabsWithScrollExample } from './tabs-with-scroll/tabs-with-scroll-example';
 
 export {
     TabActiveTabExample,
     TabActiveTabIndexExample,
+    TabsActionbarExample,
+    TabsDisabledExample,
     TabsEmptyExample,
-    TabsOldExample,
     TabsOverviewExample,
     TabsStretchExample,
+    TabsUnderlinedExample,
     TabsVerticalExample,
+    TabsVerticalIconsExample,
     TabsWithScrollExample
 };
 
 const EXAMPLES = [
+    TabsActionbarExample,
     TabsOverviewExample,
-    TabsOldExample,
+    TabsDisabledExample,
     TabsStretchExample,
+    TabsUnderlinedExample,
     TabsVerticalExample,
+    TabsVerticalIconsExample,
     TabsWithScrollExample,
     TabsEmptyExample,
     TabActiveTabExample,
@@ -37,7 +47,8 @@ const EXAMPLES = [
     imports: [
         KbqTabsModule,
         KbqIconModule,
-        KbqButtonModule
+        KbqButtonModule,
+        KbqToolTipModule
     ],
     declarations: EXAMPLES,
     exports: EXAMPLES

packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.css

@@ -0,0 +1,47 @@
+.docs-live-example__example_tabs-actionbar {
+    padding-right: 0;
+}
+
+.tabs-actionbar-example {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+
+.tabs-actionbar-example__center {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    min-width: 16px;
+
+    &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 1px;
+        background: rgba(13, 14, 18, 0.12);
+    }
+}
+
+.tabs-actionbar-example__controls {
+    position: relative;
+    display: flex;
+    padding: 8px 20px 8px 0;
+
+    &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 20px;
+        height: 1px;
+        background: rgba(13, 14, 18, 0.12);
+    }
+
+    button + button {
+        margin-left: 8px;
+    }
+}

packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.html

@@ -0,0 +1,37 @@
+<div class="tabs-actionbar-example">
+    <kbq-tab-group underlined>
+        <kbq-tab [label]="'BitDefender'" />
+        <kbq-tab [label]="'Fortinet'" />
+        <kbq-tab [label]="'Kaspersky'" />
+    </kbq-tab-group>
+    <div class="tabs-actionbar-example__center"></div>
+    <div class="tabs-actionbar-example__controls">
+        <button
+            kbq-button
+            class="kbq-button_transparent"
+            [color]="'contrast'"
+        >
+            <i
+                kbq-icon="kbq-list_16"
+                [color]="'theme'"
+            ></i>
+        </button>
+        <button
+            kbq-button
+            class="kbq-button_transparent"
+            [color]="'contrast'"
+        >
+            <i
+                kbq-icon="kbq-filter_16"
+                [color]="'theme'"
+            ></i>
+        </button>
+        <button
+            kbq-button
+            [color]="'contrast'"
+        >
+            <i kbq-icon="kbq-plus_16"></i>
+            Создать дашборд
+        </button>
+    </div>
+</div>

packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.ts

@@ -0,0 +1,12 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * @title Tabs actionbar
+ */
+@Component({
+    selector: 'tabs-actionbar-example',
+    templateUrl: 'tabs-actionbar-example.html',
+    styleUrls: ['tabs-actionbar-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsActionbarExample {}

packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.css

@@ -0,0 +1,5 @@
+.tabs-disabled-example {
+    kbq-tab-group + kbq-tab-group {
+        margin-top: 16px;
+    }
+}

packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.html

@@ -0,0 +1,30 @@
+<div class="tabs-disabled-example">
+    <kbq-tab-group>
+        <kbq-tab [label]="'Bruteforce'" />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'Complex Attack'"
+        />
+        <kbq-tab [label]="'DDoS'" />
+        <kbq-tab [label]="'DoS'" />
+    </kbq-tab-group>
+
+    <kbq-tab-group>
+        <kbq-tab
+            [disabled]="true"
+            [label]="'Bruteforce'"
+        />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'Complex Attack'"
+        />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'DDoS'"
+        />
+        <kbq-tab
+            [disabled]="true"
+            [label]="'DoS'"
+        />
+    </kbq-tab-group>
+</div>

packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.ts

@@ -0,0 +1,12 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * @title Tabs disabled
+ */
+@Component({
+    selector: 'tabs-disabled-example',
+    templateUrl: 'tabs-disabled-example.html',
+    styleUrls: ['tabs-disabled-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TabsDisabledExample {}

packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.css

@@ -1,3 +1,8 @@
-.empty-tab-content {
-    text-align: center;
+.tabs-empty-example {
+    .empty-tab-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+    }
 }