fix(experimental): fix problem with tuiCell (#6650)

taiga-family · Feb 5, 2024 · 92735ef · 92735ef
1 parent 6a25d26
commit 92735ef
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 43 deletions.
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -295,7 +295,7 @@ export const ROUTES: Routes = [
         path: 'experimental/card-medium',
         loadChildren: async () =>
             (await import('../experimental/card-medium/card-medium.module'))
-                .ExampleTuiCardModule,
+                .ExampleTuiCardMediumModule,
         data: {
             title: 'CardMedium',
         },

diff --git a/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts b/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
@@ -3,11 +3,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 
 @Component({
-    selector: 'example-card',
+    selector: 'example-card-medium',
     templateUrl: './card-medium.template.html',
     changeDetection,
 })
-export class ExampleTuiCardComponent {
+export class ExampleTuiCardMediumComponent {
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );

diff --git a/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts b/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts
@@ -33,11 +33,11 @@ import {
     TuiTitleModule,
 } from '@taiga-ui/experimental';
 
-import {ExampleTuiCardComponent} from './card-medium.component';
+import {ExampleTuiCardMediumComponent} from './card-medium.component';
 import {TuiCardMediumExample1} from './examples/1';
 import {TuiCardMediumExample2} from './examples/2';
 import {TuiCardMediumExample3} from './examples/3';
-import {TuiCardExample4} from './examples/4';
+import {TuiCardMediumExample4} from './examples/4';
 import {TuiCardMediumExample5} from './examples/5';
 import {TuiCardMediumExample6} from './examples/6';
 import {TuiCardMediumExample7} from './examples/7';
@@ -66,7 +66,7 @@ import {TuiCardMediumExample7} from './examples/7';
         TuiButtonModule,
         TuiHeaderModule,
         TuiCellModule,
-        tuiGetDocModules(ExampleTuiCardComponent),
+        tuiGetDocModules(ExampleTuiCardMediumComponent),
         TuiRepeatTimesModule,
         TuiDataListModule,
         TuiHostedDropdownModule,
@@ -76,15 +76,15 @@ import {TuiCardMediumExample7} from './examples/7';
         TuiAppearanceModule,
     ],
     declarations: [
-        ExampleTuiCardComponent,
+        ExampleTuiCardMediumComponent,
         TuiCardMediumExample1,
         TuiCardMediumExample2,
         TuiCardMediumExample3,
-        TuiCardExample4,
+        TuiCardMediumExample4,
         TuiCardMediumExample5,
         TuiCardMediumExample6,
         TuiCardMediumExample7,
     ],
-    exports: [ExampleTuiCardComponent],
+    exports: [ExampleTuiCardMediumComponent],
 })
-export class ExampleTuiCardModule {}
+export class ExampleTuiCardMediumModule {}
diff --git a/projects/demo/src/modules/experimental/card-medium/card-medium.template.html b/projects/demo/src/modules/experimental/card-medium/card-medium.template.html
@@ -3,7 +3,7 @@
     package="EXPERIMENTAL"
     type="components"
 >
-    <ng-template pageTab="Medium">
+    <ng-template pageTab>
         <tui-notification status="warning">
             This code is
             <strong>experimental</strong>

diff --git a/projects/demo/src/modules/experimental/card-medium/examples/4/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/4/index.ts
@@ -9,7 +9,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample4 {
+export class TuiCardMediumExample4 {
     readonly urls = [
         'https://avatars.githubusercontent.com/u/11832552',
         'https://avatars.githubusercontent.com/u/10106368',

diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts
@@ -19,6 +19,7 @@ import {
     TuiBadgeModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
+    TuiCardModule,
     TuiCellModule,
     TuiCheckboxModule,
     TuiFadeModule,
@@ -75,6 +76,7 @@ import {TuiCellExample7} from './examples/7';
         TuiHostedDropdownModule,
         TuiGroupModule,
         tuiGetDocModules(ExampleTuiCellComponent),
+        TuiCardModule,
     ],
     declarations: [
         ExampleTuiCellComponent,

diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.html b/projects/demo/src/modules/experimental/cell/examples/7/index.html
@@ -1,21 +1,21 @@
-<div tuiSurface="elevated">
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
     <h3 tuiTitle="m">Inside a block</h3>
-    <div class="actions">
-        <button
-            *ngFor="let item of items"
-            tuiCell
-            class="action"
-        >
-            <tui-avatar
-                appearance="accent"
-                [src]="item.icon"
-            ></tui-avatar>
-            <span tuiTitle>
-                {{ item.title }}
-                <span tuiSubtitle>{{ item.subtitle }}</span>
-            </span>
-        </button>
-    </div>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        ></tui-avatar>
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
 </div>
 
 <label tuiLabel="Inside a dropdown">

diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.less b/projects/demo/src/modules/experimental/cell/examples/7/index.less
@@ -4,16 +4,3 @@
     max-width: 20rem;
     gap: 1rem;
 }
-
-.actions {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    margin: 1rem -0.5rem -0.5rem;
-}
-
-.action {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    border-radius: 0.75rem;
-}
diff --git a/projects/experimental/directives/card/card.styles.less b/projects/experimental/directives/card/card.styles.less
@@ -77,7 +77,7 @@
         gap: var(--t-gap);
         align-items: stretch;
 
-        > :last-child {
+        > :last-child:not([tuiCell]) {
             margin-top: auto;
         }
     }