diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index b67cae1de13c..774994ac7aa1 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/packages/feedback/src/modal/components/Dialog.css.ts @@ -144,6 +144,7 @@ const FORM = ` .form__error-container { color: var(--error-color); fill: var(--error-color); + overflow-wrap: break-word; } .form__label { diff --git a/packages/feedback/test/modal/components/Dialog.css.test.ts b/packages/feedback/test/modal/components/Dialog.css.test.ts new file mode 100644 index 000000000000..5446dfb6511c --- /dev/null +++ b/packages/feedback/test/modal/components/Dialog.css.test.ts @@ -0,0 +1,42 @@ +/** + * @vitest-environment jsdom + */ +import { describe, expect, it } from 'vitest'; +import { createDialogStyles } from '../../../src/modal/components/Dialog.css'; + +/** + * Returns the declarations inside the first rule block matching `selector`, so + * assertions target one rule rather than the whole stylesheet. + */ +function getRuleBlock(css: string, selector: string): string { + const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const match = new RegExp(`^${escaped}\\s*\\{([^}]*)\\}`, 'm').exec(css); + return match ? match[1] : ''; +} + +describe('createDialogStyles', () => { + it('lets long error messages wrap instead of overflowing the dialog', () => { + const css = createDialogStyles().textContent ?? ''; + const rule = getRuleBlock(css, '.form__error-container'); + + // Guard: if the selector is renamed, fail loudly rather than pass vacuously. + expect(rule).not.toBe(''); + // `FeedbackErrorMessages` lets integrators supply arbitrary error copy, and + // the container is only 272px wide while the screenshot editor is open, so a + // single long token must be breakable. + expect(rule).toMatch(/overflow-wrap:\s*break-word/); + }); + + it('keeps the error colour tokens on the same rule', () => { + const css = createDialogStyles().textContent ?? ''; + const rule = getRuleBlock(css, '.form__error-container'); + + expect(rule).toMatch(/color:\s*var\(--error-color\)/); + expect(rule).toMatch(/fill:\s*var\(--error-color\)/); + }); + + it('applies the nonce when one is supplied', () => { + expect(createDialogStyles('abc123').getAttribute('nonce')).toBe('abc123'); + expect(createDialogStyles().hasAttribute('nonce')).toBe(false); + }); +});