Skip to content

feat(drawer): Add inline version #3636

feat(drawer): Add inline version

feat(drawer): Add inline version #3636

Triggered via pull request February 10, 2026 14:31
Status Success
Total duration 17m 47s
Artifacts 11

pr.yml

on: pull_request
Matrix: e2e-tests / e2e-tests
Matrix: validate-os / validate-os
e2e-tests  /  merge-reports
24s
e2e-tests / merge-reports
Fit to window
Zoom out
Zoom in

Annotations

8 errors and 10 notices
[singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/basic › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L45
6) [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/basic › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) failed @@ -2,60 +2,13 @@ style="overflow-x: hidden; overflow-y: hidden;" > <div class="container p-3" id="root" - inert="inert" > <button class="btn btn-primary mb-3" > "Open Drawer" </button> </div> - <div - class="au-drawer-backdrop fade show" - data-agnos-ignore-inert="data-agnos-ignore-inert" - /> - <div - aria-describedby="" - aria-labelledby="" - aria-modal="true" - class="au-drawer collapse collapse-horizontal inline-start show" - role="dialog" - style="position: fixed; outline-color: initial; outline-style: none; outline-width: initial;" - tabindex="-1" - > - <div - class="au-drawer-container" - > - <div - class="au-drawer-content" - > - <div - class="au-drawer-header" - > - "Hi, I am drawer!" - </div> - <div - class="au-drawer-body" - > - <ul> - <li> - "First item" - </li> - <li> - "Second item" - </li> - <li> - "Third item" - </li> - </ul> - </div> - </div> - </div> - <div - class="au-splitter" - tabindex="0" - /> - </div> </body> Snapshot: bootstrap/drawer/basic.html 43 | await preventTransitions(page); 44 | await samplesExtraAction[sampleKey]?.(page); > 45 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 46 | }); 47 | }); 48 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:45:54
[singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/body › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L45
5) [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/body › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) failed @@ -2,11 +2,10 @@ style="overflow-x: hidden; overflow-y: hidden;" > <div class="container p-3" id="root" - inert="inert" > <div class="align-items-center d-flex mb-3" > <button @@ -57,58 +56,6 @@ class="btn btn-primary" > "ScrollToMe" </button> </div> - <div - class="au-drawer-backdrop fade show" - data-agnos-ignore-inert="data-agnos-ignore-inert" - /> - <div - aria-describedby="" - aria-labelledby="" - aria-modal="true" - class="au-drawer collapse collapse-horizontal inline-start show" - role="dialog" - style="position: fixed; outline-color: initial; outline-style: none; outline-width: initial;" - tabindex="-1" - > - <div - class="au-drawer-container" - > - <div - class="au-drawer-content" - > - <div - class="au-drawer-header" - > - <div - class="d-flex" - > - <span> - "Hi, I am drawer!" - </span> - <button - aria-label="Close" - class="btn-close ms-auto" - /> - </div> - </div> - <div - class="au-drawer-body" - > - <ul> - <li> - "First item" - </li> - <li> - "Second item" - </li> - <li> - "Third item" - </li> - </ul> - </div> - </div> - </div> - </div> </body> Snapshot: bootstrap/drawer/body.html 43 | await preventTransitions(page); 44 | await samplesExtraAction[sampleKey]?.(page); > 45 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 46 | }); 47 | }); 48 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:45:54
[singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/position › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L45
4) [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/position › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) failed @@ -2,11 +2,10 @@ style="overflow-x: hidden; overflow-y: hidden;" > <div class="container p-3" id="root" - inert="inert" > <button class="btn btn-primary mb-3" > "Open Drawer" @@ -45,52 +44,6 @@ "Bottom" </option> </select> </div> </div> - <div - class="au-drawer-backdrop fade show" - data-agnos-ignore-inert="data-agnos-ignore-inert" - /> - <div - aria-describedby="" - aria-labelledby="" - aria-modal="true" - class="au-drawer collapse collapse-horizontal drawer-position-size inline-start show" - role="dialog" - style="position: fixed; outline-color: initial; outline-style: none; outline-width: initial;" - tabindex="-1" - > - <div - class="au-drawer-container" - > - <div - class="au-drawer-content" - > - <div - class="au-drawer-header" - > - "Hi, I am drawer!" - </div> - <div - class="au-drawer-body" - > - <ul> - <li> - "First item" - </li> - <li> - "Second item" - </li> - <li> - "Third item" - </li> - </ul> - </div> - </div> - </div> - <div - class="au-splitter" - tabindex="0" - /> - </div> </body> Snapshot: bootstrap/drawer/position.html 43 | await preventTransitions(page); 44 | await samplesExtraAction[sampleKey]?.(page); > 45 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 46 | }); 47 | }); 48 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:45:54
[singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/sizes › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L45
3) [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/sizes › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) failed @@ -2,60 +2,13 @@ style="overflow-x: hidden; overflow-y: hidden;" > <div class="container p-3" id="root" - inert="inert" > <button class="btn btn-primary mb-3" > "Open Drawer" </button> </div> - <div - class="au-drawer-backdrop fade show" - data-agnos-ignore-inert="data-agnos-ignore-inert" - /> - <div - aria-describedby="" - aria-labelledby="" - aria-modal="true" - class="au-drawer collapse collapse-horizontal drawer-custom-size inline-start show" - role="dialog" - style="position: fixed; outline-color: initial; outline-style: none; outline-width: initial;" - tabindex="-1" - > - <div - class="au-drawer-container" - > - <div - class="au-drawer-content" - > - <div - class="au-drawer-header" - > - "Hi, I am drawer!" - </div> - <div - class="au-drawer-body" - > - <ul> - <li> - "First item" - </li> - <li> - "Second item" - </li> - <li> - "Third item" - </li> - </ul> - </div> - </div> - </div> - <div - class="au-splitter" - tabindex="0" - /> - </div> </body> Snapshot: bootstrap/drawer/sizes.html 43 | await preventTransitions(page); 44 | await samplesExtraAction[sampleKey]?.(page); > 45 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 46 | }); 47 | }); 48 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:45:54
[singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/modal/default › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L45
2) [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/modal/default › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) failed @@ -1,12 +1,9 @@ -<body - style="overflow-x: hidden; overflow-y: hidden;" -> +<body> <div class="container p-3" id="root" - inert="inert" > <button class="btn btn-primary" type="button" > @@ -31,58 +28,6 @@ <hr /> <div data-testid="message" /> </div> - <div - class="fade modal-backdrop show" - inert="inert" - /> - <div - class="d-block fade modal show" - tabindex="-1" - > - <div - class="modal-dialog" - > - <div - class="modal-content" - > - <div - class="modal-header" - > - <h5 - class="modal-title" - > - "Save changes" - </h5> - <button - aria-label="Close" - class="btn-close" - type="button" - /> - </div> - <div - class="modal-body" - > - "Do you want to save your changes?" - </div> - <div - class="modal-footer" - > - <button - class="btn btn-outline-primary" - type="button" - > - "Yes" - </button> - <button - class="btn btn-outline-danger" - type="button" - > - "No" - </button> - </div> - </div> - </div> - </div> </body> Snapshot: bootstrap/modal/default.html 43 | await preventTransitions(page); 44 | await samplesExtraAction[sampleKey]?.(page); > 45 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 46 | }); 47 | }); 48 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:45:54
[singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/modal/stack › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L45
1) [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/modal/stack › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) failed @@ -1,75 +1,12 @@ -<body - style="overflow-x: hidden; overflow-y: hidden;" -> +<body> <div class="container p-3" id="root" - inert="inert" > <button class="btn btn-primary" > "Launch demo modal" </button> </div> - <div - class="fade modal-backdrop show" - inert="inert" - /> - <div - class="d-block fade modal modal-sm show" - tabindex="-1" - > - <div - class="modal-dialog" - > - <div - class="modal-content" - > - <div - class="modal-header" - > - <h5 - class="modal-title" - > - "First modal" - </h5> - <button - aria-label="Close" - class="btn-close" - type="button" - /> - </div> - <div - class="modal-body" - > - "This is a modal" - <br /> - <br /> - <button - class="btn btn-outline-primary m-1" - > - "Launch other modal" - </button> - <br /> - <button - class="btn btn-outline-secondary m-1" - > - "Enable backdrop" - </button> - <button - class="btn btn-outline-secondary m-1" - > - "Disable backdrop" - </button> - <br /> - <button - class="btn btn-outline-secondary m-1" - > - "Close" - </button> - </div> - </div> - </div> - </div> </body> Snapshot: bootstrap/modal/stack.html 43 | await preventTransitions(page); 44 | await samplesExtraAction[sampleKey]?.(page); > 45 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 46 | }); 47 | }); 48 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:45:54
[main:svelte:chromium] › e2e/select/select.e2e-spec.ts:143:3 › Select tests › Custom select › Navigation: e2e/select/select.e2e-spec.ts#L179
1) [main:svelte:chromium] › e2e/select/select.e2e-spec.ts:143:3 › Select tests › Custom select › Navigation Error: Last badge must have been removed expect(received).toStrictEqual(expected) // deep equality - Expected - 1 + Received + 3 - Array [] + Array [ + "JSON", + ] Call Log: - Timeout 5000ms exceeded while waiting on the predicate 177 | await keyboard.press('ArrowRight'); 178 | await keyboard.press('Enter'); > 179 | await expect.poll(getBadgesState, 'Last badge must have been removed').toStrictEqual([]); | ^ 180 | expect(await page.evaluate(() => (document.activeElement!.tagName || '').toLowerCase())).toBe('input'); 181 | }); 182 | }); at /home/runner/work/AgnosUI/AgnosUI/e2e/select/select.e2e-spec.ts:179:4
[demo:chromium] › e2e/demo.demo-e2e-spec.ts:43:3 › Demo Website › Route docs/svelte/services/match-media should be accessible: e2e/demo.demo-e2e-spec.ts#L56
1) [demo:chromium] › e2e/demo.demo-e2e-spec.ts:43:3 › Demo Website › Route docs/svelte/services/match-media should be accessible Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 513 - Array [] + Array [ + Object { + "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds", + "help": "Elements must meet minimum color contrast ratio thresholds", + "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright", + "id": "color-contrast", + "impact": "serious", + "nodes": Array [ + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#160033", + "contrastRatio": 3.6, + "expectedContrastRatio": "4.5:1", + "fgColor": "#6a668e", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 3.6 (foreground color: #6a668e, background color: #160033, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<html lang=\"en\" data-agnos-theme=\"dark\" data-theme=\"dark\">", + "target": Array [ + "html", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 3.6 (foreground color: #6a668e, background color: #160033, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<a class=\"active hover:bg-secondary-subtle! focus-visible:bg-secondary-subtle!\" href=\"http://localhost:4000/docs/svelte/getting-started/introduction\" aria-current=\"page\">Documentation</a>", + "impact": "serious", + "none": Array [], + "target": Array [ + "li:nth-child(3) > .active[aria-current=\"page\"]", + ], + }, + Object { + "all": Array [], + "any": Array [ + Object { + "data": Object { + "bgColor": "#160033", + "contrastRatio": 3.6, + "expectedContrastRatio": "4.5:1", + "fgColor": "#6a668e", + "fontSize": "10.5pt (14px)", + "fontWeight": "normal", + "messageKey": null, + }, + "id": "color-contrast", + "impact": "serious", + "message": "Element has insufficient color contrast of 3.6 (foreground color: #6a668e, background color: #160033, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "relatedNodes": Array [ + Object { + "html": "<html lang=\"en\" data-agnos-theme=\"dark\" data-theme=\"dark\">", + "target": Array [ + "html", + ], + }, + ], + }, + ], + "failureSummary": "Fix any of the following: + Element has insufficient color contrast of 3.6 (foreground color: #6a668e, background color: #160033, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1", + "html": "<a class=\"hover:bg-secondary-subtle! focus-visible:bg-secondary-subtle!\" href=\"http://localhost:4000/api/svelte/bootstrap/types\">API</a>", + "impact": "serious", + "none": Array []
🎭 Playwright Run Summary
124 passed (3.3m)
🎭 Playwright Run Summary
6 flaky [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/modal/stack › should have a consistent markup [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/modal/default › should have a consistent markup [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/sizes › should have a consistent markup [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/position › should have a consistent markup [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/body › should have a consistent markup [singleBrowser:angular:chromium] › e2e/samplesMarkup.singlebrowser-e2e-spec.ts:39:4 › Samples markup consistency check › Sample bootstrap/drawer/basic › should have a consistent markup 1 skipped 129 passed (2.6m)
🎭 Playwright Run Summary
137 passed (2.5m)
🎭 Playwright Run Summary
1 flaky [main:svelte:chromium] › e2e/select/select.e2e-spec.ts:143:3 › Select tests › Custom select › Navigation 136 passed (2.7m)
🎭 Playwright Run Summary
1 skipped 134 passed (3.1m)
🎭 Playwright Run Summary
134 passed (3.3m)
🎭 Playwright Run Summary
1 flaky [demo:chromium] › e2e/demo.demo-e2e-spec.ts:43:3 › Demo Website › Route docs/svelte/services/match-media should be accessible 1 skipped 134 passed (3.7m)
🎭 Playwright Run Summary
149 passed (2.9m)
🎭 Playwright Run Summary
6 skipped 129 passed (6.7m)
🎭 Playwright Run Summary
6 skipped 129 passed (11.3m)

Artifacts

Produced during runtime
Name Size Digest
e2e-playwright-report Expired
8.12 MB
sha256:4527af2a85d558698b62992e8300bfca23d884f873505fba5ecda093e80a2a85
e2e-test-1 Expired
335 KB
sha256:e7ee1ab40a9f04e4669a8d4aeaa70590c207eddb25e4965e11f9e4dceebdb9b3
e2e-test-10 Expired
160 KB
sha256:4f5013b76f3558712a7a18c7c9873b362a5b053d1679154833ae315b111fefef
e2e-test-2 Expired
259 KB
sha256:f7fa937dd9444b95af8a5af810973a35d794d0e24257d349c654cffdfa339869
e2e-test-3 Expired
285 KB
sha256:8c9c5433847c368177e2236ae79544bec0527f0e4b7f1b27c0177376acfcb5fe
e2e-test-4 Expired
276 KB
sha256:690f943f4b9e9d5192577a1350e981833303e569802d8488bdc03725245d4a32
e2e-test-5 Expired
758 KB
sha256:ad97498d508990a95930cefd2d03c818cd1fc99cf21df5964999e73cc7684752
e2e-test-6 Expired
261 KB
sha256:0b632c6ff8fe0bb1f999da6e53c2faf3e7e72350070bde9d4139995fd127aa1e
e2e-test-7 Expired
1.27 MB
sha256:d4d20b98d293d5a3a5f9eb808db0a78881ccb547f0bbee8c5f00296a4723bc31
e2e-test-8 Expired
5.16 MB
sha256:7320fcc7ff60d0f5709f83d2c30fbf6ea762ad45a8f1b61746e9b3d15738a3ed
e2e-test-9 Expired
183 KB
sha256:7cdfb0805e46d1675c8c9012ced16cde033e44b6a22521a33562e76c0a920885