feat(core): Dropdown add appearance option

projects/addon-mobile/components/sheet/directives/sheet-close/sheet-close.directive.ts

@@ -1,8 +1,9 @@
 import {Directive, ElementRef, Inject, NgZone, Output} from '@angular/core';
 import {WINDOW} from '@ng-web-apis/common';
 import {tuiIfMap, tuiIsFalsy, tuiTypedFromEvent, tuiZonefull} from '@taiga-ui/cdk';
-import {merge, Observable} from 'rxjs';
-import {distinctUntilChanged, filter, startWith} from 'rxjs/operators';
+import {TUI_ANIMATIONS_DURATION} from '@taiga-ui/core';
+import {merge, Observable, timer} from 'rxjs';
+import {distinctUntilChanged, filter, startWith, switchMap} from 'rxjs/operators';
 
 import {TuiSheetComponent} from '../../components/sheet/sheet.component';
 import {TUI_SHEET_CLOSE} from '../../components/sheet-heading/sheet-heading.component';
@@ -16,7 +17,8 @@ export class TuiSheetCloseDirective {
     // eslint-disable-next-line @angular-eslint/no-output-native
     readonly close: Observable<unknown> = merge(
         tuiTypedFromEvent(this.el.nativeElement, TUI_SHEET_CLOSE),
-        this.dragged$.pipe(
+        timer(this.duration).pipe(
+            switchMap(() => this.dragged$),
             startWith(false),
             tuiIfMap(
                 () => this.scroll$.pipe(startWith(this.el.nativeElement.scrollTop)),
@@ -30,6 +32,7 @@ export class TuiSheetCloseDirective {
 
     constructor(
         @Inject(NgZone) private readonly ngZone: NgZone,
+        @Inject(TUI_ANIMATIONS_DURATION) private readonly duration: number,
         @Inject(TUI_SHEET_DRAGGED) private readonly dragged$: Observable<boolean>,
         @Inject(TUI_SHEET_SCROLL) private readonly scroll$: Observable<number>,
         @Inject(WINDOW) private readonly win: Window,

projects/core/directives/dropdown/dropdown-options.directive.ts

@@ -22,6 +22,7 @@ export interface TuiDropdownOptions {
     readonly minHeight: number;
     readonly maxHeight: number;
     readonly offset: number;
+    readonly appearance: string;
 }
 
 /** Default values for dropdown options */
@@ -32,6 +33,7 @@ export const TUI_DROPDOWN_DEFAULT_OPTIONS: TuiDropdownOptions = {
     maxHeight: 400,
     minHeight: 80,
     offset: 4,
+    appearance: '',
 };
 
 /**
@@ -57,7 +59,7 @@ export const tuiDropdownOptionsProvider: (
 
 @Directive({
     selector:
-        '[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',
+        '[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',
     providers: [
         {
             provide: TUI_DROPDOWN_OPTIONS,
@@ -69,6 +71,9 @@ export class TuiDropdownOptionsDirective implements TuiDropdownOptions {
     @Input('tuiDropdownAlign')
     align = this.options.align;
 
+    @Input('tuiDropdownAppearance')
+    appearance = this.options.appearance;
+
     @Input('tuiDropdownDirection')
     direction = this.options.direction;
 

projects/core/directives/dropdown/dropdown.component.ts

@@ -21,9 +21,10 @@ import {
     tuiRectAccessorFor,
 } from '@taiga-ui/core/abstract';
 import {tuiDropdownAnimation} from '@taiga-ui/core/animations';
+import {MODE_PROVIDER} from '@taiga-ui/core/providers';
 import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services';
-import {TUI_ANIMATION_OPTIONS} from '@taiga-ui/core/tokens';
-import {TuiPoint} from '@taiga-ui/core/types';
+import {TUI_ANIMATION_OPTIONS, TUI_MODE} from '@taiga-ui/core/tokens';
+import {TuiBrightness, TuiPoint} from '@taiga-ui/core/types';
 import {Observable} from 'rxjs';
 import {map, takeUntil} from 'rxjs/operators';
 
@@ -45,9 +46,14 @@ import {TUI_DROPDOWN_OPTIONS, TuiDropdownOptions} from './dropdown-options.direc
         TuiPositionService,
         tuiPositionAccessorFor('dropdown'),
         tuiRectAccessorFor('dropdown', TuiDropdownDirective),
+        MODE_PROVIDER,
     ],
     animations: [tuiDropdownAnimation],
-    host: {'[@tuiDropdownAnimation]': 'animation'},
+    host: {
+        '[@tuiDropdownAnimation]': 'animation',
+        '[attr.data-appearance]': 'options.appearance',
+        '($.data-mode.attr)': 'mode$',
+    },
     // @bad TODO: OnPush
     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
     changeDetection: ChangeDetectionStrategy.Default,
@@ -64,7 +70,8 @@ export class TuiDropdownComponent implements OnDestroy {
         private readonly host: AbstractTuiPortalHostComponent,
         @Inject(TuiRectAccessor) private readonly accessor: TuiRectAccessor,
         @Inject(WINDOW) private readonly win: Window,
-        @Inject(TUI_DROPDOWN_OPTIONS) private readonly options: TuiDropdownOptions,
+        @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
+        @Inject(TUI_DROPDOWN_OPTIONS) readonly options: TuiDropdownOptions,
         @Optional()
         @Inject(TuiDropdownHoverDirective)
         private readonly hoverDirective: TuiDropdownHoverDirective | null,

projects/core/directives/dropdown/dropdown.module.ts

@@ -1,7 +1,6 @@
 import {NgModule} from '@angular/core';
 import {TuiActiveZoneModule, TuiHoveredModule, TuiOverscrollModule} from '@taiga-ui/cdk';
 import {TuiScrollbarModule} from '@taiga-ui/core/components/scrollbar';
-import {TuiModeModule} from '@taiga-ui/core/directives/mode';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiDropdownComponent} from './dropdown.component';
@@ -22,7 +21,6 @@ import {TuiDropdownSelectionDirective} from './dropdown-selection.directive';
         TuiActiveZoneModule,
         TuiOverscrollModule,
         TuiScrollbarModule,
-        TuiModeModule,
         TuiHoveredModule,
     ],
     declarations: [

projects/core/directives/dropdown/dropdown.style.less

@@ -5,7 +5,7 @@
     .shadow(2);
     position: absolute;
     display: flex;
-    background-color: var(--tui-elevation-01);
+    background: var(--tui-elevation-01);
     border-radius: var(--tui-radius-m);
     overflow: hidden;
     border: 1px solid var(--tui-base-04);
@@ -20,17 +20,18 @@
     &:not([style*='top']) {
         visibility: hidden;
     }
-}
 
-.t-wrapper {
-    flex-grow: 1;
-    max-width: 100%;
-    max-height: inherit;
-    overflow: visible;
+    &[data-mode='onDark'] {
+        --tui-text-01: var(--tui-text-01-night);
+        --tui-clear: var(--tui-clear-inverse);
+        background: #222;
+        border: 1px solid #808080;
+    }
 }
 
 .t-scroll {
-    height: 100%;
+    flex-grow: 1;
+    max-width: 100%;
 }
 
 .t-primitive {

projects/core/directives/dropdown/dropdown.template.html

@@ -1,25 +1,22 @@
-<div
+<tui-scrollbar
     #activeZone="tuiActiveZone"
     tuiActiveZone
     tuiOverscroll="all"
-    class="t-wrapper"
-    [tuiMode]="null"
+    class="t-scroll"
     (tuiHoveredChange)="onHoveredChange($event)"
 >
-    <tui-scrollbar class="t-scroll">
-        <div
-            tabindex="0"
-            (focus)="onTopFocus()"
-        ></div>
-        <div
-            *polymorpheusOutlet="directive.content as text; context: {$implicit: activeZone}"
-            class="t-primitive"
-        >
-            {{ text }}
-        </div>
-        <div
-            tabindex="0"
-            (focus)="onBottomFocus()"
-        ></div>
-    </tui-scrollbar>
-</div>
+    <div
+        tabindex="0"
+        (focus)="onTopFocus()"
+    ></div>
+    <div
+        *polymorpheusOutlet="directive.content as text; context: {$implicit: activeZone}"
+        class="t-primitive"
+    >
+        {{ text }}
+    </div>
+    <div
+        tabindex="0"
+        (focus)="onBottomFocus()"
+    ></div>
+</tui-scrollbar>

projects/demo/src/modules/components/tabs/tabs.component.ts

@@ -8,7 +8,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc';
     changeDetection,
 })
 export class ExampleTuiTabsComponent {
-    buttons = ['button 1', 'button 2', 'button 3', 'button 4'];
+    buttons = ['Button 1', 'Button 2', 'Button 3', 'Button 4'];
 
     readonly exampleModule = import('./examples/import/import-module.md?raw');
     readonly exampleHtml = import('./examples/import/insert-template.md?raw');

projects/demo/src/modules/directives/dropdown/dropdown.component.ts

@@ -36,6 +36,12 @@ export class ExampleTuiDropdownComponent extends AbstractExampleTuiDropdown {
         HTML: import('./examples/3/index.html?raw'),
     };
 
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
     open = false;
 
     onClick(): void {

projects/demo/src/modules/directives/dropdown/dropdown.module.ts

@@ -4,7 +4,12 @@ import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiActiveZoneModule, TuiObscuredModule} from '@taiga-ui/cdk';
-import {TuiButtonModule, TuiDropdownModule, TuiLinkModule} from '@taiga-ui/core';
+import {
+    TuiButtonModule,
+    TuiDropdownModule,
+    TuiLinkModule,
+    TuiNotificationModule,
+} from '@taiga-ui/core';
 import {
     TuiAvatarModule,
     TuiInputModule,
@@ -18,6 +23,7 @@ import {ExampleTuiDropdownComponent} from './dropdown.component';
 import {TuiDropdownExample1} from './examples/1';
 import {TuiDropdownExample2} from './examples/2';
 import {TuiDropdownExample3} from './examples/3';
+import {TuiDropdownExample4} from './examples/4';
 
 @NgModule({
     imports: [
@@ -33,15 +39,17 @@ import {TuiDropdownExample3} from './examples/3';
         TuiActiveZoneModule,
         TuiToggleModule,
         TuiInputModule,
+        TuiNotificationModule,
         TuiAddonDocModule,
-        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiDropdownComponent)),
         DropdownDocumentationModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiDropdownComponent)),
     ],
     declarations: [
         ExampleTuiDropdownComponent,
         TuiDropdownExample1,
         TuiDropdownExample2,
         TuiDropdownExample3,
+        TuiDropdownExample4,
     ],
     exports: [ExampleTuiDropdownComponent],
 })

projects/demo/src/modules/directives/dropdown/dropdown.template.html

@@ -49,6 +49,17 @@
         >
             <tui-dropdown-example-3></tui-dropdown-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="appearance"
+            heading="Appearance"
+            [content]="example4"
+        >
+            <tui-notification class="tui-space_bottom-3">
+                Use unencapsulated styles to customize dropdown appearance
+            </tui-notification>
+            <tui-dropdown-example-4></tui-dropdown-example-4>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/directives/dropdown/examples/1/index.html

@@ -1,16 +1,15 @@
-<span (tuiActiveZoneChange)="onActiveZone($event)">
-    <button
-        tuiButton
-        type="button"
-        iconRight="tuiIconChevronDown"
-        [tuiDropdown]="dropdownContent"
-        [tuiDropdownManual]="open"
-        (tuiObscured)="onObscured($event)"
-        (click)="onClick()"
-    >
-        Choose
-    </button>
+<button
+    tuiButton
+    type="button"
+    iconRight="tuiIconChevronDown"
+    [tuiDropdown]="dropdownContent"
+    [tuiDropdownManual]="open"
+    (tuiObscured)="onObscured($event)"
+    (click)="onClick()"
+    (tuiActiveZoneChange)="onActiveZone($event)"
+>
+    Choose
     <ng-template #dropdownContent>
         <div class="dropdown">But there is nothing to choose...</div>
     </ng-template>
-</span>
+</button>

projects/demo/src/modules/directives/dropdown/examples/4/index.html

@@ -0,0 +1,17 @@
+<label
+    tuiDropdownDirection="top"
+    tuiDropdownAlign="center"
+    tuiDropdownAppearance="round"
+    [tuiDropdown]="content"
+    [tuiDropdownManual]="open"
+>
+    <tui-toggle
+        size="l"
+        class="tui-space_right-2"
+        [(ngModel)]="open"
+    ></tui-toggle>
+    Show dropdown
+    <ng-template #content>
+        <blockquote>I'm a customized dropdown!</blockquote>
+    </ng-template>
+</label>

projects/demo/src/modules/directives/dropdown/examples/4/index.less

@@ -0,0 +1,3 @@
+tui-dropdown[data-appearance='round'] {
+    border-radius: 10rem;
+}

projects/demo/src/modules/directives/dropdown/examples/4/index.ts

@@ -0,0 +1,13 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+
+@Component({
+    selector: 'tui-dropdown-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection,
+})
+export class TuiDropdownExample4 {
+    open = false;
+}

projects/kit/components/tabs/tabs-with-more/tabs-with-more.style.less

@@ -64,7 +64,7 @@
         margin: 0 0.5rem;
         border-radius: var(--tui-radius-s);
         padding: 0 0.625rem;
-        color: var(--tui-text-02);
+        color: var(--tui-text-01);
 
         &:before {
             display: none;
@@ -74,7 +74,6 @@
         &:focus,
         &._active {
             box-shadow: none;
-            color: var(--tui-base-08);
             background: var(--tui-clear);
         }
     }