From 04b86b2e44d95465b8467e7480fa1d7bacb0da09 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Wed, 6 Aug 2025 14:51:29 +0200 Subject: [PATCH 1/4] [wizard] fixed view step with long one-word title --- semcore/wizard/src/style/wizard.shadow.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 77c4c4205d..96cd32dfef 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -26,6 +26,8 @@ SSidebar { SSidebarHeader { font-size: var(--intergalactic-fs-300, 16px); margin: 0 var(--intergalactic-spacing-5x, 20px) var(--intergalactic-spacing-4x, 16px); + overflow: hidden; + overflow-wrap: break-word; @media (max-width: 1060px) { display: none; } @@ -90,6 +92,8 @@ SCompleted { } SStepDescription { + overflow: hidden; + overflow-wrap: break-word; @media (max-width: 1060px) { display: none; } From 577345c99d384d148766583cc94b9660fd186b56 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 8 Aug 2025 14:43:59 +0200 Subject: [PATCH 2/4] [wizard] fixed styles for wrap too long texts --- semcore/wizard/src/style/wizard.shadow.css | 6 ++++++ stories/components/wizard/docs/examples/basic_example.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 96cd32dfef..72b97bab5e 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/semcore/wizard/src/style/wizard.shadow.css @@ -105,6 +105,12 @@ SContent { border-radius: 0 var(--intergalactic-modal-rounded, 12px) var(--intergalactic-modal-rounded, 12px) 0; background: var(--intergalactic-bg-primary-neutral, #ffffff); + overflow: hidden; +} + +SStep { + overflow: hidden; + overflow-wrap: break-word; } SSidebarMenu { diff --git a/stories/components/wizard/docs/examples/basic_example.tsx b/stories/components/wizard/docs/examples/basic_example.tsx index 9d9a10ba34..0aa2ff9ea9 100644 --- a/stories/components/wizard/docs/examples/basic_example.tsx +++ b/stories/components/wizard/docs/examples/basic_example.tsx @@ -4,7 +4,7 @@ import { Text } from '@semcore/typography'; import Wizard from '@semcore/wizard'; import React from 'react'; -const steps = [{ title: 'Location' }, { title: 'Keywords' }, { title: 'Schedule' }]; +const steps = [{ title: 'SiteAuditSettingsSiteAuditSettings' }, { title: 'Keywords' }, { title: 'Schedule' }]; type WizardStep = { title: string }; From dba1b22bf172771da3e5fafb2ed597d7599eb185 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 8 Aug 2025 14:46:01 +0200 Subject: [PATCH 3/4] [wizard] added changelog note --- semcore/wizard/CHANGELOG.md | 6 ++++++ stories/components/wizard/docs/examples/basic_example.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/semcore/wizard/CHANGELOG.md b/semcore/wizard/CHANGELOG.md index 3b03f7f5f8..0e5f15b69f 100644 --- a/semcore/wizard/CHANGELOG.md +++ b/semcore/wizard/CHANGELOG.md @@ -2,6 +2,12 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/). +## [16.1.7] - 2025-08-12 + +### Fixed + +- Texts are not wrapped. + ## [16.1.6] - 2025-08-07 ### Changed diff --git a/stories/components/wizard/docs/examples/basic_example.tsx b/stories/components/wizard/docs/examples/basic_example.tsx index 0aa2ff9ea9..9d9a10ba34 100644 --- a/stories/components/wizard/docs/examples/basic_example.tsx +++ b/stories/components/wizard/docs/examples/basic_example.tsx @@ -4,7 +4,7 @@ import { Text } from '@semcore/typography'; import Wizard from '@semcore/wizard'; import React from 'react'; -const steps = [{ title: 'SiteAuditSettingsSiteAuditSettings' }, { title: 'Keywords' }, { title: 'Schedule' }]; +const steps = [{ title: 'Location' }, { title: 'Keywords' }, { title: 'Schedule' }]; type WizardStep = { title: string }; From eee9dc3caf619bf089876d23c52f854e75f08025 Mon Sep 17 00:00:00 2001 From: Valeryia Zimnitskaya Date: Mon, 18 Aug 2025 12:43:51 +0200 Subject: [PATCH 4/4] [wizard] small tests improvement --- .../wizard/__tests__/wizard.browser-test.tsx | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx b/semcore/wizard/__tests__/wizard.browser-test.tsx index 6fc75613c3..01abb98040 100644 --- a/semcore/wizard/__tests__/wizard.browser-test.tsx +++ b/semcore/wizard/__tests__/wizard.browser-test.tsx @@ -3,7 +3,7 @@ import { expect, test } from '@semcore/testing-utils/playwright'; const locators = { trigger: (page: any, name = 'Open wizard') => page.getByRole('button', { name }), - modal: (page: any) => page.locator('div[data-ui-name=\'Wizard\']'), + modal: (page: any) => page.getByRole('dialog'), sidebar: (page: any) => page.locator('[data-ui-name=\'Wizard.Sidebar\']'), stepperTabs: (page: any) => page.locator('[data-ui-name=\'Wizard.Stepper\']'), contentPanel: (page: any) => page.locator('[data-ui-name=\'Wizard.Content\']'), @@ -26,7 +26,7 @@ test.describe('Base example', () => { await test.step('Open modal and verify modal attributes', async () => { await trigger(page).click(); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(modal(page)).toBeVisible(); await expect(modal(page)).toHaveAttribute('aria-modal', 'true'); await expect(modal(page)).toHaveAttribute('role', 'dialog'); @@ -101,9 +101,13 @@ test.describe('Base example', () => { await test.step('Verify selected step saved when Close and reopen modal', async () => { await nextButton(page, 'Close').click(); + await modal(page).waitFor({ state: 'hidden' }); + await expect(modal(page)).toBeHidden(); await trigger(page).click(); + await modal(page).waitFor({ state: 'visible' }); + await expect(modal(page)).toBeVisible(); }); @@ -137,29 +141,30 @@ test.describe('Base example', () => { await test.step('Open modal using keyboard and verify focus', async () => { await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(modal(page)).toBeVisible(); await expect(nextButton(page, 'Close')).toBeFocused(); }); await test.step('Close modal using keyboard', async () => { await page.keyboard.press('Enter'); - await expect(modal(page)).toBeHidden(); + await modal(page).waitFor({ state: 'hidden' }); await expect(trigger(page)).toBeFocused(); }); await test.step('Reopen and close modal with Escape key', async () => { await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(modal(page)).toBeVisible(); await page.keyboard.press('Escape'); + await modal(page).waitFor({ state: 'hidden' }); await expect(modal(page)).toBeHidden(); await expect(trigger(page)).toBeFocused(); }); await test.step('Verify keyboard navigation on 1st page by TAB after modal just opened', async () => { await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(nextButton(page, 'Close')).toBeFocused(); await page.keyboard.press('Tab'); await expect(firstStep).toBeFocused(); @@ -279,20 +284,21 @@ test.describe('Custom step example', () => { await test.step('Open modal using keyboard and verify focus', async () => { await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(modal(page)).toBeVisible(); await expect(nextButton(page, 'Close')).toBeFocused(); }); await test.step('Close modal with Escape key', async () => { await page.keyboard.press('Escape'); + await modal(page).waitFor({ state: 'hidden' }); await expect(modal(page)).toBeHidden(); await expect(trigger(page)).toBeFocused(); }); await test.step('Verify keyboard navigation on 1st page with inputs by TAB after modal just opened', async () => { await page.keyboard.press('Enter'); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(nextButton(page, 'Close')).toBeFocused(); await page.keyboard.press('Tab'); await expect(firstStep).toBeFocused(); @@ -398,7 +404,7 @@ test.describe('Custom stepper example', () => { await test.step('Open modal using mouse', async () => { await trigger(page).click(); - await page.waitForTimeout(50); + await modal(page).waitFor({ state: 'visible' }); await expect(modal(page)).toBeVisible(); }); @@ -464,7 +470,7 @@ test.describe('Custom stepper example', () => { await test.step('Open modal using keyboard and verify focus', async () => { await page.keyboard.press('Tab'); await page.keyboard.press('Enter'); - await page.waitForTimeout(150); + await modal(page).waitFor({ state: 'visible' }); await page.keyboard.press('Tab'); await page.keyboard.press('ArrowDown'); await page.keyboard.press('ArrowDown'); @@ -516,8 +522,7 @@ test.describe('Steps and buttons states', () => { await test.step('Hover active', async () => { await trigger(page).click(); - await page.waitForTimeout(50); - await expect(modal(page)).toBeVisible(); + await modal(page).waitFor({ state: 'visible' }); await checkedStep.hover(); await expect(page).toHaveScreenshot(); });