taiga-family · waterplea · Aug 29, 2022 · Aug 29, 2022 · Aug 29, 2022 · Aug 29, 2022
@@ -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`],

@@ -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`,

@@ -2,20 +2,34 @@ 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 {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+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,
+        TuiLinkModule,
+        TuiMarkerIconModule,
+        TuiNotificationModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiActionComponent)),
     ],
-    declarations: [ExampleTuiActionComponent, TuiActionExample1, TuiActionExample2],
+    declarations: [
+        ExampleTuiActionComponent,
+        TuiActionExample1,
+        TuiActionExample2,
+        TuiActionExample3,
+        TuiActionExample4,
+        TuiActionExample5,
+    ],
     exports: [ExampleTuiActionComponent],
 })
 export class ExampleTuiActionModule {}
@@ -9,6 +9,21 @@
     >
         Component that shows some action. Better to use it in a group.
 
+        <tui-notification class="tui-space_vertical-4">
+            This component requires
+            <code>@taiga-ui/styles</code>
+            optional package with
+            <code>@taiga-ui/styles/taiga-ui-global</code>
+            <a
+                tuiLink
+                routerLink="/getting-started"
+                fragment="styles"
+            >
+                added to your global styles
+            </a>
+            .
+        </tui-notification>
+
         <tui-doc-example
             id="basic"
             i18n-heading
@@ -26,6 +41,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>

@@ -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 icon"
+    ></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 icon"
+    ></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 icon"
+    ></tui-marker-icon>
+</button>
@@ -0,0 +1,25 @@
+[tuiAction] {
+    max-width: 26rem;
+    align-items: center;
+
+    &:not(:last-child) {
+        margin-bottom: 1.5rem;
+    }
+}
+
+.icon {
+    color: var(--tui-support-10);
+}
+
+.header,
+.description {
+    margin: 0;
+}
+
+.header {
+    font-weight: bold;
+}
+
+.description {
+    color: var(--tui-text-02);
+}
@@ -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 {}
@@ -0,0 +1,26 @@
+<button tuiAction>
+    <tui-marker-icon
+        size="s"
+        src="tuiIconLikeLarge"
+        class="tui-island__marker positive"
+    ></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 negative"
+    ></tui-marker-icon>
+    <section>
+        <h3 class="header tui-text_body-s">Header</h3>
+        <p class="description tui-text_body-xs">Use "box-shadow: none"</p>
+    </section>
+</button>
@@ -0,0 +1,43 @@
+: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);
+}
+
+.positive {
+    color: var(--tui-positive);
+    background: var(--tui-success-bg);
+}
+
+.negative {
+    color: var(--tui-negative);
+    background: var(--tui-error-bg);
+}
@@ -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 {}
@@ -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>
@@ -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);
+}
@@ -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 {}
@@ -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>
 ```
@@ -7,6 +7,7 @@ import {
     TuiButtonModule,
     TuiErrorModule,
     TuiLinkModule,
+    TuiNotificationModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
 import {
@@ -35,6 +36,7 @@ import {ExampleTuiIslandComponent} from './island.component';
         ReactiveFormsModule,
         TuiTextfieldControllerModule,
         TuiAddonDocModule,
+        TuiNotificationModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiIslandComponent)),
     ],
     declarations: [

@@ -11,6 +11,21 @@
             Islands show information in rounded block with a border
         </div>
 
+        <tui-notification class="tui-space_vertical-4">
+            This component requires
+            <code>@taiga-ui/styles</code>
+            optional package with
+            <code>@taiga-ui/styles/taiga-ui-global</code>
+            <a
+                tuiLink
+                routerLink="/getting-started"
+                fragment="styles"
+            >
+                added to your global styles
+            </a>
+            .
+        </tui-notification>
+
         <strong>.tui-island</strong>
         :
         <ul class="tui-list tui-list_small tui-space_top-3">