Skip to content

Commit

Permalink
refactor(kit)!: Action refactor to button[tuiAction], a[tuiAction] (
Browse files Browse the repository at this point in the history
  • Loading branch information
nsbarsukov authored and splincode committed Aug 30, 2022
1 parent 2b6f069 commit 059d7af
Show file tree
Hide file tree
Showing 9 changed files with 57 additions and 87 deletions.
5 changes: 5 additions & 0 deletions projects/cdk/schematics/ng-update/constants/templates.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@

<ng-template pageTab>
<tui-doc-demo>
<tui-action
<button
tuiAction
[icon]="icon"
[style.--tui-action-color]="color"
[style.--tui-action-background]="background"
Expand All @@ -39,7 +40,7 @@
meet its maker! This is a late parrot! It's a stiff! Bereft of life, it rests in peace! If you hadn't
nailed it to the perch, it would be pushing up the daisies! It's rung down the curtain and joined the
choir invisible. This is an ex-parrot!
</tui-action>
</button>
</tui-doc-demo>
<tui-doc-documentation>
<ng-template
Expand Down
49 changes: 26 additions & 23 deletions projects/demo/src/modules/components/action/examples/1/index.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<div class="wrapper">
<tui-action
icon="tuiIconStarLarge"
class="action"
(click)="onClick('Different')"
>
And now for something completely different
</tui-action>
<tui-action
icon="tuiIconBellLarge"
class="action"
(click)="onClick('Inquisition')"
>
Nobody expects the Spanish Inquisition!
</tui-action>
<tui-action
icon="tuiIconFlagLarge"
class="action"
(click)="onClick('Lumberjack')"
>
I'm a lumberjack and I'm OK
</tui-action>
</div>
<button
tuiAction
icon="tuiIconStarLarge"
class="action"
(click)="onClick('Different')"
>
And now for something completely different
</button>

<button
tuiAction
icon="tuiIconBellLarge"
class="action"
(click)="onClick('Inquisition')"
>
Nobody expects the Spanish Inquisition!
</button>

<button
tuiAction
icon="tuiIconFlagLarge"
class="action"
(click)="onClick('Lumberjack')"
>
I'm a lumberjack and I'm OK
</button>
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.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);
--tui-action-background: var(--tui-success-bg);
}

&:last-child {
margin-right: 0;

--tui-action-color: var(--tui-negative);
--tui-action-background: var(--tui-error-bg);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
```html
<tui-action
<button
tuiAction
[icon]="icon"
(click)="onClick()"
>
Button
</tui-action>
</button>

<a
href="http://ng-web-apis.github.io/"
Expand Down
29 changes: 8 additions & 21 deletions projects/kit/components/action/action.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import {
ChangeDetectionStrategy,
Component,
ElementRef,
HostBinding,
HostListener,
Inject,
Input,
ViewChild,
} from '@angular/core';
import {
AbstractTuiInteractive,
Expand All @@ -17,9 +17,8 @@ import {
TuiNativeFocusableElement,
} from '@taiga-ui/cdk';

// TODO: 3.0 Refactor to button[tuiAction]
@Component({
selector: `tui-action, a[tuiAction]`,
selector: `button[tuiAction], a[tuiAction]`,
templateUrl: `./action.template.html`,
styleUrls: [`./action.style.less`],
changeDetection: ChangeDetectionStrategy.OnPush,
Expand All @@ -30,15 +29,10 @@ import {
],
})
export class TuiActionComponent extends AbstractTuiInteractive {
@ViewChild(`focusableElement`)
private readonly focusableElement?: ElementRef<TuiNativeFocusableElement>;

@Input()
@tuiDefaultProp()
icon = ``;

readonly isLink = this.elementRef.nativeElement.matches(`a`);

readonly disabled = false;

constructor(
Expand All @@ -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);
}
}
14 changes: 3 additions & 11 deletions projects/kit/components/action/action.style.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,26 @@

: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);
text-decoration: none;
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;
}
23 changes: 1 addition & 22 deletions projects/kit/components/action/action.template.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,4 @@
<label
*ngIf="!isLink; else content"
automation-id="tui-action__content"
class="t-wrapper"
>
<ng-container [ngTemplateOutlet]="content"></ng-container>
<button
#focusableElement
type="button"
automation-id="tui-action__native"
class="t-button"
[id]="id"
[tuiDescribedBy]="id"
[tuiFocusable]="computedFocusable"
(tuiFocusVisibleChange)="onFocusVisible($event)"
></button>
</label>
<ng-template #content>
<div class="t-wrapper">
<ng-content></ng-content>
</div>
</ng-template>
<ng-content></ng-content>
<tui-marker-icon
size="s"
class="t-icon"
Expand Down

0 comments on commit 059d7af

Please sign in to comment.