From 7ff90dc555a4ba4ccbaf9cf6f08c1e4439b5b14b Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Tue, 30 Jan 2024 16:38:25 +0300
Subject: [PATCH] feat(core): notification content by default should be break
 by word

---
 .cspell.json                                  |  3 +-
 .../notification/notification.style.less      |  3 +-
 .../kit/notification/notification.spec.ts     | 37 +++++++++++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 projects/demo-playwright/tests/kit/notification/notification.spec.ts

diff --git a/.cspell.json b/.cspell.json
index 2473a8e76b0b..f6a1ef1731ad 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -36,7 +36,8 @@
         "retrowave",
         "replicants",
         "tuiiconbutton",
-        "hitbox"
+        "hitbox",
+        "viewports"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
diff --git a/projects/core/components/notification/notification.style.less b/projects/core/components/notification/notification.style.less
index 34add1123ea3..e79b6855795b 100644
--- a/projects/core/components/notification/notification.style.less
+++ b/projects/core/components/notification/notification.style.less
@@ -79,7 +79,6 @@
 
 .t-content {
     flex: 1;
-    word-wrap: break-word;
-    overflow-wrap: anywhere;
+    word-break: break-word;
     color: var(--tui-text-01);
 }
diff --git a/projects/demo-playwright/tests/kit/notification/notification.spec.ts b/projects/demo-playwright/tests/kit/notification/notification.spec.ts
new file mode 100644
index 000000000000..c5ffc30f4a36
--- /dev/null
+++ b/projects/demo-playwright/tests/kit/notification/notification.spec.ts
@@ -0,0 +1,37 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, Locator, test} from '@playwright/test';
+
+test.describe('Notification', () => {
+    const viewports = generateDimensions(180, 320, 10);
+    let example: Locator;
+
+    test.describe('default', () => {
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, '/components/notification/API');
+
+            example = new TuiDocumentationPagePO(page).apiPageExample;
+        });
+
+        viewports.forEach(({width, height}) => {
+            test(`width: ${width}`, async ({page}) => {
+                await page.setViewportSize({width, height});
+                await expect(example).toHaveScreenshot(`01-notification-${width}.png`);
+            });
+        });
+    });
+});
+
+interface Dimensions {
+    width: number;
+    height: number;
+}
+
+function generateDimensions(start: number, end: number, step: number): Dimensions[] {
+    const viewports: Dimensions[] = [];
+
+    for (let width = start; width <= end; width += step) {
+        viewports.push({width, height: 500});
+    }
+
+    return viewports;
+}