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/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(); }); diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 77c4c4205d..72b97bab5e 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; } @@ -101,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 {