fix(layout): CardLarge with headless Cell list (#9114)

taiga-family · Sep 23, 2024 · 941c856 · 941c856
2 parents 0814ae8 + 253906e
commit 941c856
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 58 deletions.
diff --git a/projects/demo/src/modules/components/card-large/examples/13/index.html b/projects/demo/src/modules/components/card-large/examples/13/index.html
@@ -0,0 +1,33 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <section>
+        <iframe
+            height="450"
+            loading="lazy"
+            src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&amp;source=constructor"
+            title="map"
+            width="100%"
+            class="map"
+        ></iframe>
+    </section>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/components/card-large/examples/13/index.less b/projects/demo/src/modules/components/card-large/examples/13/index.less
diff --git a/projects/demo/src/modules/components/card-large/examples/13/index.ts b/projects/demo/src/modules/components/card-large/examples/13/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiButton, TuiSurface} from '@taiga-ui/core';
+import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    imports: [TuiButton, TuiCardLarge, TuiHeader, TuiSurface],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}
diff --git a/projects/demo/src/modules/components/card-large/examples/8/index.html b/projects/demo/src/modules/components/card-large/examples/8/index.html
@@ -2,11 +2,10 @@
     tuiCardLarge
     tuiSurface="elevated"
 >
-    <header tuiHeader>
-        <h2 tuiTitle>Title</h2>
-    </header>
-
-    <div tuiCell>
+    <div
+        *tuiRepeatTimes="let index of 3"
+        tuiCell="l"
+    >
         <tui-avatar
             appearance="primary"
             src="@tui.star"
@@ -16,36 +15,28 @@ <h2 tuiTitle>Title</h2>
             <div tuiSubtitle>Description</div>
         </div>
     </div>
-
-    <footer>
-        <button
-            appearance="secondary"
-            size="m"
-            tuiButton
-            type="button"
-        >
-            Label
-        </button>
-    </footer>
 </div>
+
 <div
     tuiCardLarge
     tuiSurface="elevated"
 >
-    <header tuiHeader>
-        <h2 tuiTitle>Title</h2>
-    </header>
-
-    Some text
-
-    <footer>
-        <button
-            appearance="secondary"
-            size="m"
-            tuiButton
-            type="button"
-        >
-            Label
-        </button>
-    </footer>
+    <div tuiCell="l">
+        <tui-avatar
+            appearance="primary"
+            src="@tui.star"
+        />
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
+        </div>
+    </div>
+    <button
+        appearance="secondary"
+        size="m"
+        tuiButton
+        type="button"
+    >
+        Label
+    </button>
 </div>
diff --git a/projects/demo/src/modules/components/card-large/examples/8/index.less b/projects/demo/src/modules/components/card-large/examples/8/index.less
@@ -1,6 +0,0 @@
-:host {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    inline-size: 30rem;
-}

diff --git a/projects/demo/src/modules/components/card-large/examples/8/index.ts b/projects/demo/src/modules/components/card-large/examples/8/index.ts
@@ -1,7 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
+import {TuiButton, TuiSurface} from '@taiga-ui/core';
 import {TuiAvatar} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
 
@@ -13,11 +14,11 @@ import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
         TuiCardLarge,
         TuiCell,
         TuiHeader,
+        TuiRepeatTimes,
         TuiSurface,
-        TuiTitle,
     ],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
+    styles: [':host { display: flex; flex-direction: column; gap: 2rem}'],
     encapsulation,
     changeDetection,
 })

diff --git a/projects/demo/src/modules/components/card-large/examples/9/index.html b/projects/demo/src/modules/components/card-large/examples/9/index.html
@@ -3,22 +3,40 @@
     tuiSurface="elevated"
 >
     <header tuiHeader>
-        <h1 tuiTitle>
+        <h2 tuiTitle>Title</h2>
+    </header>
+
+    <div tuiCell>
+        <tui-avatar
+            appearance="primary"
+            src="@tui.star"
+        />
+        <div tuiTitle>
             Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+            <div tuiSubtitle>Description</div>
+        </div>
+    </div>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h2 tuiTitle>Title</h2>
     </header>
 
-    <section>
-        <iframe
-            height="450"
-            loading="lazy"
-            src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&amp;source=constructor"
-            title="map"
-            width="100%"
-            class="map"
-        ></iframe>
-    </section>
+    Some text
 
     <footer>
         <button

diff --git a/projects/demo/src/modules/components/card-large/examples/9/index.less b/projects/demo/src/modules/components/card-large/examples/9/index.less
@@ -0,0 +1,6 @@
+:host {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    inline-size: 30rem;
+}
diff --git a/projects/demo/src/modules/components/card-large/examples/9/index.ts b/projects/demo/src/modules/components/card-large/examples/9/index.ts
@@ -1,13 +1,23 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiButton, TuiSurface} from '@taiga-ui/core';
-import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
+import {TuiButton, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAvatar} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [TuiButton, TuiCardLarge, TuiHeader, TuiSurface],
+    imports: [
+        TuiAvatar,
+        TuiButton,
+        TuiCardLarge,
+        TuiCell,
+        TuiHeader,
+        TuiSurface,
+        TuiTitle,
+    ],
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

diff --git a/projects/demo/src/modules/components/card-large/index.ts b/projects/demo/src/modules/components/card-large/index.ts
@@ -17,10 +17,11 @@ export default class Example {
         'Cell List',
         'Cell List (2 columns)',
         'Cell List (actions)',
+        'Cell List (headless)',
         'Footer alignment',
-        'Map',
         'Image',
         'Image-dark',
         'Paddings and radii',
+        'Map',
     ];
 }
diff --git a/projects/layout/components/card/card.styles.less b/projects/layout/components/card/card.styles.less
@@ -103,6 +103,10 @@
         padding: 0.5rem;
         margin: -0.5rem -0.5rem -0.75rem;
         border-radius: var(--tui-radius-l);
+
+        &:last-of-type {
+            margin-bottom: -0.5rem;
+        }
     }
 
     > [tuiLink]:last-child {