fix(kit): Connected work with CardLarge (#9040)

taiga-family · Sep 16, 2024 · 71f699c · 71f699c
1 parent 543acfa
commit 71f699c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/projects/demo/src/modules/components/cell/examples/8/index.html b/projects/demo/src/modules/components/cell/examples/8/index.html
@@ -1,3 +1,32 @@
+<tui-notification>
+    <div>
+        Can be attached as host directive:
+        <code>hostDirectives: [TuiConnected]</code>
+    </div>
+</tui-notification>
+
+<div
+    tuiCardLarge
+    tuiConnected
+    tuiSurface="elevated"
+>
+    <h3 tuiTitle="m">Inside a block</h3>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+        type="button"
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        />
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
+</div>
+
 <div tuiConnected>
     <label tuiCell>
         <tui-badged-content>
@@ -68,10 +97,3 @@
         />
     </label>
 </div>
-
-<tui-notification>
-    <div>
-        Can be attached as host directive:
-        <code>hostDirectives: [TuiConnected]</code>
-    </div>
-</tui-notification>
diff --git a/projects/demo/src/modules/components/cell/examples/8/index.ts b/projects/demo/src/modules/components/cell/examples/8/index.ts
@@ -50,7 +50,8 @@ export default class Example {
         {
             icon: '@tui.mail',
             title: 'Send message',
-            subtitle: 'Keep it short',
+            subtitle:
+                'Allow outgoing unusual call that can change your life in an unusual way',
         },
         {
             icon: '@tui.lock',

diff --git a/projects/kit/directives/connected/connected.style.less b/projects/kit/directives/connected/connected.style.less
@@ -4,6 +4,10 @@
     --t-image-size: 2.5rem;
     --t-connected-height: calc(100% - var(--t-image-size) - 0.5rem);
 
+    &[tuiCardLarge] {
+        --t-connected-height: calc(100% - var(--t-image-size) - 0.25rem);
+    }
+
     [tuiCell],
     [tuiStep] {
         &:not(:last-of-type)::after {

diff --git a/projects/layout/components/cell/cell.styles.less b/projects/layout/components/cell/cell.styles.less
@@ -134,6 +134,8 @@
         & > [tuiAccessories] tui-avatar,
         & > [tuiAccessories] tui-avatar-stack tui-avatar {
             --t-size: 2rem;
+
+            align-self: flex-start;
         }
     }
 
@@ -155,6 +157,7 @@
 
             font: var(--tui-font-text-m);
             font-weight: bold;
+            align-self: flex-start;
         }
     }