From 059d7af3a2536705ba21ad8adcd4f53627b62e77 Mon Sep 17 00:00:00 2001 From: Barsukov Nikita Date: Fri, 26 Aug 2022 16:18:51 +0300 Subject: [PATCH] refactor(kit)!: `Action` refactor to `button[tuiAction], a[tuiAction]` (#2479) --- .../ng-update/constants/templates.ts | 5 ++ .../components/action/action.component.ts | 6 ++- .../components/action/action.template.html | 5 +- .../components/action/examples/1/index.html | 49 ++++++++++--------- .../components/action/examples/1/index.less | 8 +-- .../action/examples/import/insert-template.md | 5 +- .../kit/components/action/action.component.ts | 29 +++-------- .../kit/components/action/action.style.less | 14 ++---- .../components/action/action.template.html | 23 +-------- 9 files changed, 57 insertions(+), 87 deletions(-) diff --git a/projects/cdk/schematics/ng-update/constants/templates.ts b/projects/cdk/schematics/ng-update/constants/templates.ts index 8e4ad83914c9..8b6067923582 100644 --- a/projects/cdk/schematics/ng-update/constants/templates.ts +++ b/projects/cdk/schematics/ng-update/constants/templates.ts @@ -415,6 +415,11 @@ export const TAGS_TO_REPLACE: ReplacementTags[] = [ to: 'input', addAttributes: ['tuiSlider', 'type="range"'], }, + { + from: 'tui-action', + to: 'button', + addAttributes: ['tuiAction'], + }, ]; export const ATTR_TO_DIRECTIVE: AttributeToDirective[] = [ diff --git a/projects/demo/src/modules/components/action/action.component.ts b/projects/demo/src/modules/components/action/action.component.ts index 86d1a178447e..83fc2501ada8 100644 --- a/projects/demo/src/modules/components/action/action.component.ts +++ b/projects/demo/src/modules/components/action/action.component.ts @@ -1,25 +1,27 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiDocExample} from '@taiga-ui/addon-doc'; @Component({ selector: `example-action`, templateUrl: `./action.template.html`, changeDetection, + encapsulation, }) export class ExampleTuiActionComponent { readonly exampleModule = import(`./examples/import/import-module.md?raw`); readonly exampleHtml = import(`./examples/import/insert-template.md?raw`); readonly example1: TuiDocExample = { - TypeScript: import(`./examples/1/index.ts?raw`), HTML: import(`./examples/1/index.html?raw`), + TypeScript: import(`./examples/1/index.ts?raw`), LESS: import(`./examples/1/index.less?raw`), }; readonly example2: TuiDocExample = { - TypeScript: import(`./examples/2/index.ts?raw`), HTML: import(`./examples/2/index.html?raw`), + TypeScript: import(`./examples/2/index.ts?raw`), }; readonly iconVariants = [ diff --git a/projects/demo/src/modules/components/action/action.template.html b/projects/demo/src/modules/components/action/action.template.html index 41ff94569bfb..452af7889256 100644 --- a/projects/demo/src/modules/components/action/action.template.html +++ b/projects/demo/src/modules/components/action/action.template.html @@ -30,7 +30,8 @@ - + - - And now for something completely different - - - Nobody expects the Spanish Inquisition! - - - I'm a lumberjack and I'm OK - - + + + + + diff --git a/projects/demo/src/modules/components/action/examples/1/index.less b/projects/demo/src/modules/components/action/examples/1/index.less index bcc6559a75ea..3b0a20bb1ab0 100644 --- a/projects/demo/src/modules/components/action/examples/1/index.less +++ b/projects/demo/src/modules/components/action/examples/1/index.less @@ -1,11 +1,13 @@ -.wrapper { +:host { display: flex; + flex-wrap: wrap; + column-gap: 3rem; + row-gap: 1.5rem; } .action { flex: 1; align-items: center; - margin-right: 3rem; &:first-child { --tui-action-color: var(--tui-positive); @@ -13,8 +15,6 @@ } &:last-child { - margin-right: 0; - --tui-action-color: var(--tui-negative); --tui-action-background: var(--tui-error-bg); } diff --git a/projects/demo/src/modules/components/action/examples/import/insert-template.md b/projects/demo/src/modules/components/action/examples/import/insert-template.md index 268d77370054..90382d17ec62 100644 --- a/projects/demo/src/modules/components/action/examples/import/insert-template.md +++ b/projects/demo/src/modules/components/action/examples/import/insert-template.md @@ -1,10 +1,11 @@ ```html - Button - + ; - @Input() @tuiDefaultProp() icon = ``; - readonly isLink = this.elementRef.nativeElement.matches(`a`); - readonly disabled = false; constructor( @@ -47,34 +41,27 @@ export class TuiActionComponent extends AbstractTuiInteractive { ) { super(); - if (!this.isLink) { - return; - } - focusVisible$.subscribe(visible => { this.updateFocusVisible(visible); }); } get nativeFocusableElement(): TuiNativeFocusableElement | null { - if (this.isLink) { - return this.elementRef.nativeElement; - } - - return this.focusableElement ? this.focusableElement.nativeElement : null; + return this.elementRef.nativeElement; } get focused(): boolean { return tuiIsNativeFocused(this.nativeFocusableElement); } + @HostBinding(`tabIndex`) + get tabIndex(): number { + return this.computedFocusable ? 0 : -1; + } + @HostListener(`focusin`, [`true`]) @HostListener(`focusout`, [`false`]) onFocused(focused: boolean): void { this.updateFocused(focused); } - - onFocusVisible(focusVisible: boolean): void { - this.updateFocusVisible(focusVisible); - } } diff --git a/projects/kit/components/action/action.style.less b/projects/kit/components/action/action.style.less index 283d9423a258..a3fe20e1a4a5 100644 --- a/projects/kit/components/action/action.style.less +++ b/projects/kit/components/action/action.style.less @@ -2,8 +2,10 @@ :host { .hoverable-with-shadow(); + .clearbtn(); position: relative; display: flex; + justify-content: space-between; font: var(--tui-font-text-m); padding: 0.875rem; color: var(--tui-text-01); @@ -11,25 +13,15 @@ border: 2px solid transparent; border-radius: var(--tui-radius-l); outline: none; + text-align: start; &._focus-visible { border-color: var(--tui-focus); } } -.t-button { - .fullsize(); - .clearbtn(); - cursor: pointer; - outline: none; -} - .t-icon { margin-left: 1.25rem; color: var(--tui-action-color, var(--tui-link)); background-color: var(--tui-action-background, var(--tui-base-02)); } - -.t-wrapper { - flex: 1; -} diff --git a/projects/kit/components/action/action.template.html b/projects/kit/components/action/action.template.html index 6bdc7b43b06a..c1c55f0dc544 100644 --- a/projects/kit/components/action/action.template.html +++ b/projects/kit/components/action/action.template.html @@ -1,25 +1,4 @@ - - -
- -
-
+