feat(kit)!: Action better customization + new API

projects/demo/src/modules/app/app.const.ts

@@ -17,6 +17,7 @@ export const SEE_ALSO_GROUPS: ReadonlyArray<readonly string[]> = [
     [`InputNumber`, `Money`],
     [`InputPhone`, `InputPhoneInternational`],
     [`Button`, `Action`, `Link`],
+    [`Action`, `Island`],
     [`CheckboxBlock`, `CheckboxLabeled`, `PrimitiveCheckbox`, `Toggle`, `Checkbox`],
     [`Accordion`, `Expand`],
     [`Radio`, `RadioBlock`, `RadioLabeled`, `RadioList`],

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

@@ -24,6 +24,24 @@ export class ExampleTuiActionComponent {
         TypeScript: import(`./examples/2/index.ts?raw`),
     };
 
+    readonly example3: TuiDocExample = {
+        HTML: import(`./examples/3/index.html?raw`),
+        LESS: import(`./examples/3/index.less?raw`),
+        TypeScript: import(`./examples/3/index.ts?raw`),
+    };
+
+    readonly example4: TuiDocExample = {
+        HTML: import(`./examples/4/index.html?raw`),
+        LESS: import(`./examples/4/index.less?raw`),
+        TypeScript: import(`./examples/4/index.ts?raw`),
+    };
+
+    readonly example5: TuiDocExample = {
+        HTML: import(`./examples/5/index.html?raw`),
+        LESS: import(`./examples/5/index.less?raw`),
+        TypeScript: import(`./examples/5/index.ts?raw`),
+    };
+
     readonly iconVariants = [
         `tuiIconPrintLarge`,
         `tuiIconLoginLarge`,

projects/demo/src/modules/components/action/action.module.ts

@@ -2,20 +2,31 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiActionModule} from '@taiga-ui/kit';
+import {TuiActionModule, TuiMarkerIconModule} from '@taiga-ui/kit';
 
 import {ExampleTuiActionComponent} from './action.component';
 import {TuiActionExample1} from './examples/1';
 import {TuiActionExample2} from './examples/2';
+import {TuiActionExample3} from './examples/3';
+import {TuiActionExample4} from './examples/4';
+import {TuiActionExample5} from './examples/5';
 
 @NgModule({
     imports: [
         CommonModule,
         TuiActionModule,
         TuiAddonDocModule,
+        TuiMarkerIconModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiActionComponent)),
     ],
-    declarations: [ExampleTuiActionComponent, TuiActionExample1, TuiActionExample2],
+    declarations: [
+        ExampleTuiActionComponent,
+        TuiActionExample1,
+        TuiActionExample2,
+        TuiActionExample3,
+        TuiActionExample4,
+        TuiActionExample5,
+    ],
     exports: [ExampleTuiActionComponent],
 })
 export class ExampleTuiActionModule {}

projects/demo/src/modules/components/action/action.template.html

@@ -26,6 +26,33 @@
         >
             <tui-action-example-2></tui-action-example-2>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="sizes"
+            i18n-heading
+            heading="Sizes"
+            [content]="example3"
+        >
+            <tui-action-example-3></tui-action-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="reversed-no-shadow"
+            i18n-heading
+            heading="Reversed & No Shadow"
+            [content]="example4"
+        >
+            <tui-action-example-4></tui-action-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="vertical"
+            i18n-heading
+            heading="Vertical"
+            [content]="example5"
+        >
+            <tui-action-example-5></tui-action-example-5>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/action/examples/3/index.html

@@ -0,0 +1,39 @@
+<button tuiAction>
+    <section>
+        <h3 class="header tui-text_body-s">Header</h3>
+        <p class="description tui-text_body-xs">Description</p>
+    </section>
+    <tui-marker-icon
+        size="xs"
+        src="tuiIconStarLarge"
+        class="tui-island__marker"
+    ></tui-marker-icon>
+</button>
+
+<button tuiAction>
+    <section>
+        <h3 class="header tui-text_body-m">Header</h3>
+        <p class="description tui-text_body-s">Description</p>
+    </section>
+    <tui-marker-icon
+        size="s"
+        src="tuiIconBellLarge"
+        class="tui-island__marker"
+    ></tui-marker-icon>
+</button>
+
+<button tuiAction>
+    <section>
+        <h3 class="header tui-text_h6">Header</h3>
+        <p class="description tui-text_body-m">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+            scrambled it to make a type specimen book.
+        </p>
+    </section>
+    <tui-marker-icon
+        size="m"
+        src="tuiIconFlagLarge"
+        class="tui-island__marker"
+    ></tui-marker-icon>
+</button>

projects/demo/src/modules/components/action/examples/3/index.less

@@ -0,0 +1,21 @@
+[tuiAction] {
+    max-width: 26rem;
+    align-items: center;
+
+    &:not(:last-child) {
+        margin-bottom: 1.5rem;
+    }
+}
+
+.header,
+.description {
+    margin: 0;
+}
+
+.header {
+    font-weight: bold;
+}
+
+.description {
+    color: var(--tui-text-02);
+}

projects/demo/src/modules/components/action/examples/3/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: `tui-action-example-3`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    changeDetection,
+    encapsulation,
+})
+export class TuiActionExample3 {}

projects/demo/src/modules/components/action/examples/4/index.html

@@ -0,0 +1,29 @@
+<button tuiAction>
+    <tui-marker-icon
+        size="s"
+        src="tuiIconLikeLarge"
+        class="tui-island__marker"
+    ></tui-marker-icon>
+    <section>
+        <h3 class="header tui-text_body-s">Header</h3>
+        <p class="description tui-text_body-xs">Description</p>
+    </section>
+</button>
+
+<button
+    tuiAction
+    class="no-shadow"
+>
+    <tui-marker-icon
+        size="s"
+        src="tuiIconDislikeLarge"
+        class="tui-island__marker"
+    ></tui-marker-icon>
+    <section>
+        <h3 class="header tui-text_body-s">Header</h3>
+        <p class="description tui-text_body-xs">
+            Use
+            <code>box-shadow: none</code>
+        </p>
+    </section>
+</button>

projects/demo/src/modules/components/action/examples/4/index.less

@@ -0,0 +1,33 @@
+:host {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 3rem;
+    row-gap: 1.5rem;
+}
+
+[tuiAction] {
+    flex: 1;
+    justify-content: start;
+    align-items: center;
+}
+
+.no-shadow {
+    box-shadow: none;
+
+    &:hover {
+        box-shadow: none;
+    }
+}
+
+.header,
+.description {
+    margin: 0;
+}
+
+.header {
+    font-weight: bold;
+}
+
+.description {
+    color: var(--tui-text-02);
+}

projects/demo/src/modules/components/action/examples/4/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: `tui-action-example-4`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    changeDetection,
+    encapsulation,
+})
+export class TuiActionExample4 {}

projects/demo/src/modules/components/action/examples/5/index.html

@@ -0,0 +1,19 @@
+<a
+    tuiAction
+    target="_blank"
+    href="http://www.montypython.com"
+>
+    <section>
+        <tui-marker-icon
+            size="s"
+            src="tuiIconAlignJustifyLarge"
+            class="tui-island__marker"
+        ></tui-marker-icon>
+        <h3 class="header tui-text_body-m">Header</h3>
+        <p class="description tui-text_body-s">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+            scrambled it to make a type specimen book.
+        </p>
+    </section>
+</a>

projects/demo/src/modules/components/action/examples/5/index.less

@@ -0,0 +1,18 @@
+[tuiAction] {
+    max-width: 20rem;
+    align-items: center;
+}
+
+.header,
+.description {
+    margin: 0;
+}
+
+.header {
+    margin-top: 0.5rem;
+    font-weight: bold;
+}
+
+.description {
+    color: var(--tui-text-02);
+}

projects/demo/src/modules/components/action/examples/5/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: `tui-action-example-5`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    changeDetection,
+    encapsulation,
+})
+export class TuiActionExample5 {}

projects/demo/src/modules/components/action/examples/import/insert-template.md

@@ -10,8 +10,13 @@
 <a
   href="http://ng-web-apis.github.io/"
   tuiAction
-  [icon]="icon"
 >
   Link
+  <tui-marker-icon
+    size="m"
+    class="tui-island__marker"
+    [src]="icon"
+    [style.color]="'red'"
+  ></tui-marker-icon>
 </a>
 ```

projects/kit/components/action/action.component.ts

@@ -21,6 +21,9 @@ import {
     selector: `button[tuiAction], a[tuiAction]`,
     templateUrl: `./action.template.html`,
     styleUrls: [`./action.style.less`],
+    host: {
+        class: `tui-island tui-island_hoverable`,
+    },
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         TuiDestroyService,

projects/kit/components/action/action.style.less

@@ -1,27 +1,19 @@
 @import 'taiga-ui-local';
 
 :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-icon {
-    margin-left: 1.25rem;
-    color: var(--tui-action-color, var(--tui-link));
-    background-color: var(--tui-action-background, var(--tui-base-02));
+    &:after {
+        display: none;
+    }
 }

projects/kit/components/action/action.template.html

@@ -1,6 +1,7 @@
 <ng-content></ng-content>
 <tui-marker-icon
+    *ngIf="icon"
     size="s"
-    class="t-icon"
+    class="tui-island__marker"
     [src]="icon"
 ></tui-marker-icon>

projects/styles/markup/tui-island.less

@@ -175,4 +175,19 @@
         width: ~'calc(100% + 2.375rem);'; // margin compensation
         margin: @padding-large calc(-1.25rem + 1px) calc(-1.25rem + 1px); // 1px is compensations of border
     }
+
+    /* Artificially increased specificity */
+    &__marker&__marker {
+        color: var(--tui-action-color, var(--tui-link));
+        background-color: var(--tui-action-background, var(--tui-base-02));
+
+        &:first-child:not(:only-child) {
+            margin-right: 1.25rem;
+        }
+
+        &:not(:first-child),
+        &:only-child {
+            margin-left: 1.25rem;
+        }
+    }
 }