feat(core): Lists add triangle bullet list type (#1727)

* style(tui-list): add triangle bullet list type

* style(tui-list): add example of triangle bullet and made fixes

* style(tui-list): correct id

Co-authored-by: Davydov Nikita <ni.s.davydov@tinkoff.ru>

projects/core/styles/markup/tui-list.less

@@ -90,6 +90,20 @@
                 background-color: transparent;
             }
         }
+
+        .tui-list_triangle > & {
+            padding-left: @space * 7;
+
+            &:before {
+                content: '\25E4'; // represent symbol '◤'
+                left: 0;
+                top: auto;
+                width: auto;
+                height: auto;
+                background-color: transparent;
+                color: var(--tui-base-06);
+            }
+        }
     }
 
     &__item-title {

projects/demo/src/modules/markup/lists/examples/7/index.html

@@ -0,0 +1,32 @@
+<ul class="tui-list tui-list_triangle">
+    <li class="tui-list__item">Code Review ($ 10)</li>
+    <li class="tui-list__item">
+        The whole project refactoring ($ 1000)
+        <ul class="tui-list tui-list_linear tui-list_nested">
+            <li class="tui-list__item">
+                Add auto prettier and linters on precommit ($ 50)
+            </li>
+            <li class="tui-list__item">
+                Rewrite to react and back ($ Infinity)
+            </li>
+        </ul>
+    </li>
+    <li class="tui-list__item">
+        Live workshop from
+        <a
+            tuiLink
+            href="https://angular.institute/corporate"
+            target="_blank"
+        >
+            angular.institute
+        </a>
+        ($ 3000)
+        <ol class="tui-list tui-list_ordered tui-list_nested">
+            <li class="tui-list__item">Interactive samples</li>
+            <li class="tui-list__item">Case analysis</li>
+            <li class="tui-list__item">
+                Angular knowledge that keeps on growing
+            </li>
+        </ol>
+    </li>
+</ul>

projects/demo/src/modules/markup/lists/examples/7/index.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-lists-example-7',
+    templateUrl: './index.html',
+    changeDetection,
+    encapsulation,
+})
+export class TuiList7 {}

projects/demo/src/modules/markup/lists/lists.component.ts

@@ -7,6 +7,7 @@ import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
 import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
 import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
 import {default as example6Html} from '!!raw-loader!./examples/6/index.html';
+import {default as example7Html} from '!!raw-loader!./examples/7/index.html';
 
 import {FrontEndExample} from '../../interfaces/front-end-example';
 
@@ -39,4 +40,8 @@ export class ListsComponent {
     readonly example6: FrontEndExample = {
         HTML: example6Html,
     };
+
+    readonly example7: FrontEndExample = {
+        HTML: example7Html,
+    };
 }

projects/demo/src/modules/markup/lists/lists.module.ts

@@ -10,6 +10,7 @@ import {TuiList3} from './examples/3';
 import {TuiList4} from './examples/4';
 import {TuiList5} from './examples/5';
 import {TuiList6} from './examples/6';
+import {TuiList7} from './examples/7';
 import {ListsComponent} from './lists.component';
 
 @NgModule({
@@ -27,6 +28,7 @@ import {ListsComponent} from './lists.component';
         TuiList4,
         TuiList5,
         TuiList6,
+        TuiList7,
     ],
     exports: [ListsComponent],
 })

projects/demo/src/modules/markup/lists/lists.template.html

@@ -50,4 +50,12 @@
     >
         <tui-lists-example-6></tui-lists-example-6>
     </tui-doc-example>
+
+    <tui-doc-example
+        id="triangle-bullets"
+        heading="triangle bullets"
+        [content]="example7"
+    >
+        <tui-lists-example-7></tui-lists-example-7>
+    </tui-doc-example>
 </tui-doc-page>