fix(kit): RadioBlock, CheckboxBlock properly align in Group (#4445

)
taiga-family · May 12, 2023 · eca1ec4 · eca1ec4
1 parent d5cc84f
commit eca1ec4
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 26 deletions.
diff --git a/projects/demo/src/modules/components/group/examples/4/index.html b/projects/demo/src/modules/components/group/examples/4/index.html
@@ -11,22 +11,25 @@
         formControlName="testValue"
         item="orange"
     >
-        Oranges
-    </tui-radio-block>
-    <tui-radio-block
-        size="l"
-        contentAlign="right"
-        formControlName="testValue"
-        item="apple"
-    >
-        Apples
+        <div class="content">
+            <strong>Oranges</strong>
+            <div>An orange is a fruit of various citrus species in the family Rutaceae</div>
+        </div>
     </tui-radio-block>
     <tui-radio-block
         size="l"
         contentAlign="right"
         formControlName="testValue"
         item="pineapple"
     >
-        Pineapples
+        <div class="content">
+            <strong>Pineapples</strong>
+            <div>
+                Not to be confused with neither
+                <em>pines</em>
+                nor
+                <em>apples</em>
+            </div>
+        </div>
     </tui-radio-block>
 </form>
diff --git a/projects/demo/src/modules/components/group/examples/4/index.less b/projects/demo/src/modules/components/group/examples/4/index.less
@@ -0,0 +1,4 @@
+.content {
+    padding: 0.5rem 0;
+    white-space: normal;
+}
diff --git a/projects/demo/src/modules/components/group/examples/4/index.ts b/projects/demo/src/modules/components/group/examples/4/index.ts
@@ -6,6 +6,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-group-example-4',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     changeDetection,
     encapsulation,
 })

diff --git a/projects/demo/src/modules/components/group/group.component.ts b/projects/demo/src/modules/components/group/group.component.ts
@@ -33,6 +33,7 @@ export class ExampleTuiGroupComponent {
     readonly example4: TuiDocExample = {
         TypeScript: import('./examples/4/index.ts?raw'),
         HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
     };
 
     adaptive = false;

diff --git a/projects/kit/components/checkbox-block/checkbox-block.style.less b/projects/kit/components/checkbox-block/checkbox-block.style.less
@@ -33,18 +33,6 @@
         padding: 0 0 0 1rem;
     }
 
-    :host[data-size='s'] & {
-        min-height: var(--tui-height-s);
-    }
-
-    :host[data-size='m'] & {
-        min-height: var(--tui-height-m);
-    }
-
-    :host[data-size='l'] & {
-        min-height: var(--tui-height-l);
-    }
-
     :host[data-size='s']._hidden_input & {
         padding: 0 1rem;
     }
@@ -77,11 +65,29 @@
 }
 
 .t-label {
-    .text-overflow();
+    display: flex;
     flex-grow: 1;
-    align-self: center;
+    align-self: flex-start;
+    align-items: center;
+    overflow: hidden;
+
+    :host[data-size='s'] & {
+        min-height: var(--tui-height-s);
+    }
+
+    :host[data-size='m'] & {
+        min-height: var(--tui-height-m);
+    }
+
+    :host[data-size='l'] & {
+        min-height: var(--tui-height-l);
+    }
 
     :host._hidden_input & {
         text-align: center;
     }
 }
+
+.t-content {
+    .text-overflow();
+}
diff --git a/projects/kit/components/checkbox-block/checkbox-block.template.html b/projects/kit/components/checkbox-block/checkbox-block.template.html
@@ -23,6 +23,8 @@
         (focusVisibleChange)="onFocusVisible($event)"
     ></tui-checkbox>
     <div class="t-label">
-        <ng-content></ng-content>
+        <div class="t-content">
+            <ng-content></ng-content>
+        </div>
     </div>
 </label>
diff --git a/projects/kit/components/radio-block/radio-block.template.html b/projects/kit/components/radio-block/radio-block.template.html
@@ -27,6 +27,8 @@
         (focusVisibleChange)="onFocusVisible($event)"
     ></tui-radio>
     <div class="t-label">
-        <ng-content></ng-content>
+        <div class="t-content">
+            <ng-content></ng-content>
+        </div>
     </div>
 </label>