Skip to content

[UIK-3194][wizard] long words #2397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: release/v16
Choose a base branch
from
Open

[UIK-3194][wizard] long words #2397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
04b86b2
[wizard] fixed view step with long one-word title
ilyabrower Aug 6, 2025
577345c
[wizard] fixed styles for wrap too long texts
ilyabrower Aug 8, 2025
3fe9710
[chore] Merge remote-tracking branch 'origin/release/v16' into UIK-31…
ilyabrower Aug 8, 2025
dba1b22
[wizard] added changelog note
ilyabrower Aug 8, 2025
eee9dc3
[wizard] small tests improvement
Valeria-Zimnitskaya Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions semcore/wizard/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Check warning on line 9 in semcore/wizard/CHANGELOG.md

View workflow job for this annotation

GitHub Actions / docs-lint 

[vale] reported by reviewdog 🐶
[DevDocs.Contractions] It's okay to use the contracted form 'aren't' instead of 'are not'.

Raw Output:
{"message": "[DevDocs.Contractions] It's okay to use the contracted form 'aren't' instead of 'are not'.", "location": {"path": "semcore/wizard/CHANGELOG.md", "range": {"start": {"line": 9, "column": 9}}}, "severity": "INFO"}

## [16.1.6] - 2025-08-07

### Changed
Expand Down
29 changes: 17 additions & 12 deletions semcore/wizard/__tests__/wizard.browser-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\']'),
Expand All @@ -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');
Expand Down Expand Up @@ -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();
});

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
});

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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();
});
Expand Down
10 changes: 10 additions & 0 deletions semcore/wizard/src/style/wizard.shadow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -90,6 +92,8 @@ SCompleted {
}

SStepDescription {
overflow: hidden;
overflow-wrap: break-word;
@media (max-width: 1060px) {
display: none;
}
Expand All @@ -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 {
Expand Down
Loading