From 0882e864aa0036fe88d7144345cddb793ce940af Mon Sep 17 00:00:00 2001 From: splincode Date: Mon, 2 Dec 2024 18:26:19 +0300 Subject: [PATCH] feat(legacy): limit `tui-tag` width to `80%` to avoid wrapping in selects --- .../src/modules/components/multi-select/examples/1/index.ts | 2 +- .../src/modules/components/multi-select/examples/10/index.ts | 4 ++-- .../src/modules/components/multi-select/examples/11/index.ts | 2 +- .../src/modules/components/multi-select/examples/5/index.ts | 2 +- .../src/modules/components/multi-select/examples/9/index.ts | 2 +- .../demo/src/modules/components/select/examples/1/index.ts | 2 +- .../demo/src/modules/components/select/examples/11/index.ts | 4 ++-- .../src/modules/pipes/filter-by-input/examples/3/index.ts | 2 +- projects/legacy/components/input-tag/input-tag.style.less | 4 ++++ 9 files changed, 14 insertions(+), 10 deletions(-) diff --git a/projects/demo/src/modules/components/multi-select/examples/1/index.ts b/projects/demo/src/modules/components/multi-select/examples/1/index.ts index 765b7ce034647..788e4f048e481 100644 --- a/projects/demo/src/modules/components/multi-select/examples/1/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/1/index.ts @@ -9,7 +9,7 @@ import {TuiDataListWrapper} from '@taiga-ui/kit'; import {TuiMultiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; const ITEMS: readonly string[] = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', diff --git a/projects/demo/src/modules/components/multi-select/examples/10/index.ts b/projects/demo/src/modules/components/multi-select/examples/10/index.ts index dca33fc912a90..47fd7d7f0c282 100644 --- a/projects/demo/src/modules/components/multi-select/examples/10/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/10/index.ts @@ -30,7 +30,7 @@ export default class Example { protected itemGroupControl = new FormControl([]); protected items = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', @@ -39,7 +39,7 @@ export default class Example { ]; protected customItems: readonly Item[] = [ - {name: 'Luke Skywalker', id: 1}, + {name: 'Luke Skywalker and a long time ago in a galaxy far, far away..', id: 1}, {name: 'Leia Organa Solo', id: 2}, {name: 'Darth Vader', id: 3}, {name: 'Han Solo', id: 4}, diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.ts b/projects/demo/src/modules/components/multi-select/examples/11/index.ts index 0641791aabce0..57545e2e472cd 100644 --- a/projects/demo/src/modules/components/multi-select/examples/11/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/11/index.ts @@ -31,7 +31,7 @@ import type {PolymorpheusContent} from '@taiga-ui/polymorpheus'; }) export default class Example { protected readonly items = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', diff --git a/projects/demo/src/modules/components/multi-select/examples/5/index.ts b/projects/demo/src/modules/components/multi-select/examples/5/index.ts index fac1faba4eced..fe44021d6a723 100644 --- a/projects/demo/src/modules/components/multi-select/examples/5/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/5/index.ts @@ -21,7 +21,7 @@ import {TuiMultiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/lega }) export default class Example { protected readonly jedi: readonly string[] = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Princess Leia', 'Han Solo', 'Obi-Wan Kenobi', diff --git a/projects/demo/src/modules/components/multi-select/examples/9/index.ts b/projects/demo/src/modules/components/multi-select/examples/9/index.ts index e483a3568fb90..a5ae69d37e65c 100644 --- a/projects/demo/src/modules/components/multi-select/examples/9/index.ts +++ b/projects/demo/src/modules/components/multi-select/examples/9/index.ts @@ -28,7 +28,7 @@ export default class Example { protected readonly testValue = new FormControl([]); protected readonly items: readonly string[] = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', diff --git a/projects/demo/src/modules/components/select/examples/1/index.ts b/projects/demo/src/modules/components/select/examples/1/index.ts index fa9917cecf86e..62b90945b08e6 100644 --- a/projects/demo/src/modules/components/select/examples/1/index.ts +++ b/projects/demo/src/modules/components/select/examples/1/index.ts @@ -21,7 +21,7 @@ import {TuiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; }) export default class Example { protected items = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', diff --git a/projects/demo/src/modules/components/select/examples/11/index.ts b/projects/demo/src/modules/components/select/examples/11/index.ts index 1b67b38db04bc..b8c483867a39c 100644 --- a/projects/demo/src/modules/components/select/examples/11/index.ts +++ b/projects/demo/src/modules/components/select/examples/11/index.ts @@ -23,7 +23,7 @@ export default class Example { protected itemControl = new FormControl(null); protected items = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', @@ -37,7 +37,7 @@ export default class Example { ]; protected customItems: readonly Item[] = [ - {name: 'Luke Skywalker', id: 1}, + {name: 'Luke Skywalker and a long time ago in a galaxy far, far away..', id: 1}, {name: 'Leia Organa Solo', id: 2}, {name: 'Darth Vader', id: 3}, {name: 'Han Solo', id: 4}, diff --git a/projects/demo/src/modules/pipes/filter-by-input/examples/3/index.ts b/projects/demo/src/modules/pipes/filter-by-input/examples/3/index.ts index da7870f42fbfc..4a98dc18983fe 100644 --- a/projects/demo/src/modules/pipes/filter-by-input/examples/3/index.ts +++ b/projects/demo/src/modules/pipes/filter-by-input/examples/3/index.ts @@ -20,7 +20,7 @@ import {TuiMultiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/lega }) export default class Example { protected readonly items = [ - 'Luke Skywalker', + 'Luke Skywalker and a long time ago in a galaxy far, far away..', 'Leia Organa Solo', 'Darth Vader', 'Han Solo', diff --git a/projects/legacy/components/input-tag/input-tag.style.less b/projects/legacy/components/input-tag/input-tag.style.less index 1344aa97bad1f..28c0632a13cf1 100644 --- a/projects/legacy/components/input-tag/input-tag.style.less +++ b/projects/legacy/components/input-tag/input-tag.style.less @@ -82,6 +82,10 @@ :host[data-size='l']:not(._label-outside) & { padding: 0; } + + tui-tag:last-of-type { + max-inline-size: 80%; + } } .t-content {