diff --git a/projects/demo/src/modules/components/group/examples/4/index.html b/projects/demo/src/modules/components/group/examples/4/index.html index 440dc6952df7..fdf1bff2650e 100644 --- a/projects/demo/src/modules/components/group/examples/4/index.html +++ b/projects/demo/src/modules/components/group/examples/4/index.html @@ -11,15 +11,10 @@ formControlName="testValue" item="orange" > - Oranges - - - Apples +
+ Oranges +
An orange is a fruit of various citrus species in the family Rutaceae
+
- Pineapples +
+ Pineapples +
+ Not to be confused with neither + pines + nor + apples +
+
diff --git a/projects/demo/src/modules/components/group/examples/4/index.less b/projects/demo/src/modules/components/group/examples/4/index.less new file mode 100644 index 000000000000..53b802c3186f --- /dev/null +++ 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 index f3e6f7e527c3..fe33065f0750 100644 --- 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 index bd50edc7ee02..a183e6a89290 100644 --- 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 index e61e71cda00f..12c3473052d8 100644 --- 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 index c06f6bf1c585..419696000ff8 100644 --- 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)" >
- +
+ +
diff --git a/projects/kit/components/radio-block/radio-block.template.html b/projects/kit/components/radio-block/radio-block.template.html index 3b876480eff6..b21ec7fcbe2e 100644 --- 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)" >
- +
+ +