diff --git a/apps/prs/angular/src/routes/bugs/3654/bug3654.component.html b/apps/prs/angular/src/routes/bugs/3654/bug3654.component.html new file mode 100644 index 0000000000..92a3c7eb06 --- /dev/null +++ b/apps/prs/angular/src/routes/bugs/3654/bug3654.component.html @@ -0,0 +1,89 @@ +
+

3654 - Modal refinements

+

+ + View on GitHub + +

+ +

Test 1: Basic modal (border check)

+

Inspect the modal surface. There should be no visible border.

+ Open basic modal + +

Inspect this modal surface for a visible border.

+ + Close + + + +
+ +

Test 2: Status modals (close button hover colors)

+

Hover over the close X button on each status modal.

+ + Information + Success + Important + Emergency + + +

Hover the close button. Check hover color.

+ + Close + + + + +

Hover the close button. Check hover color.

+ + Close + + + + +

Hover the close button. Check hover color.

+ + Close + + + + +

Hover the close button. Check hover color.

+ + Close + + +
diff --git a/apps/prs/angular/src/routes/bugs/3654/bug3654.component.ts b/apps/prs/angular/src/routes/bugs/3654/bug3654.component.ts new file mode 100644 index 0000000000..5532091387 --- /dev/null +++ b/apps/prs/angular/src/routes/bugs/3654/bug3654.component.ts @@ -0,0 +1,16 @@ +import { Component } from "@angular/core"; +import { GoabButton, GoabButtonGroup, GoabModal } from "@abgov/angular-components"; + +@Component({ + standalone: true, + selector: "abgov-bug3654", + templateUrl: "./bug3654.component.html", + imports: [GoabButton, GoabButtonGroup, GoabModal], +}) +export class Bug3654Component { + basicOpen = false; + infoOpen = false; + successOpen = false; + importantOpen = false; + emergencyOpen = false; +} diff --git a/apps/prs/angular/src/routes/bugs/3654/bug3654.route.json b/apps/prs/angular/src/routes/bugs/3654/bug3654.route.json new file mode 100644 index 0000000000..f860a3445f --- /dev/null +++ b/apps/prs/angular/src/routes/bugs/3654/bug3654.route.json @@ -0,0 +1,6 @@ +{ + "title": "Modal refinements", + "path": "bugs/3654", + "id": "3654", + "type": "bug" +} diff --git a/apps/prs/react/src/app/routes/bugs/bug3654.route.ts b/apps/prs/react/src/app/routes/bugs/bug3654.route.ts new file mode 100644 index 0000000000..3b4a324ecf --- /dev/null +++ b/apps/prs/react/src/app/routes/bugs/bug3654.route.ts @@ -0,0 +1,9 @@ +import { Bug3654Route } from "../../../routes/bugs/bug3654"; +import type { PrRouteDefinition } from "../../route-manifest"; +export default { + type: "bug", + id: "3654", + path: "bugs/3654", + title: "Modal refinements", + component: Bug3654Route, +} satisfies PrRouteDefinition; diff --git a/apps/prs/react/src/routes/bugs/bug3654.tsx b/apps/prs/react/src/routes/bugs/bug3654.tsx new file mode 100644 index 0000000000..ecd5b30f99 --- /dev/null +++ b/apps/prs/react/src/routes/bugs/bug3654.tsx @@ -0,0 +1,163 @@ +import { useState } from "react"; +import { + GoabBlock, + GoabText, + GoabDivider, + GoabDetails, + GoabLink, + GoabButton, + GoabButtonGroup, + GoabModal, +} from "@abgov/react-components"; + +export function Bug3654Route() { + const [basicOpen, setBasicOpen] = useState(false); + const [infoOpen, setInfoOpen] = useState(false); + const [successOpen, setSuccessOpen] = useState(false); + const [importantOpen, setImportantOpen] = useState(false); + const [emergencyOpen, setEmergencyOpen] = useState(false); + + return ( +
+ + Bug #3654: Modal refinements + + + + + + View on GitHub + + + + + + 1. Remove border from modal surface. 2. For status type modals, the close icon + button hover color should reuse the same per-status hover colors used by + notification banner close buttons. 3. Silently undocument the Event variant + (docs only). + + + + + + + Test Cases + + Test 1: Basic modal (border check) + + Inspect the modal surface. There should be no visible border. + + setBasicOpen(true)}>Open basic modal + setBasicOpen(false)} + actions={ + + setBasicOpen(false)}> + Close + + + } + > + + Inspect this modal surface for a visible border (shadow, outline, or border + property). + + + + + + Test 2: Status modals (close button hover colors) + + Hover over the close X button on each status modal. The hover color should match + the notification banner close button hover colors. + + + setInfoOpen(true)}> + Information + + setSuccessOpen(true)}> + Success + + setImportantOpen(true)}> + Important + + setEmergencyOpen(true)}> + Emergency + + + + setInfoOpen(false)} + actions={ + + setInfoOpen(false)}> + Close + + + } + > + Hover the close button. Check hover color. + + + setSuccessOpen(false)} + actions={ + + setSuccessOpen(false)}> + Close + + + } + > + Hover the close button. Check hover color. + + + setImportantOpen(false)} + actions={ + + setImportantOpen(false)}> + Close + + + } + > + Hover the close button. Check hover color. + + + setEmergencyOpen(false)} + actions={ + + setEmergencyOpen(false)}> + Close + + + } + > + Hover the close button. Check hover color. + +
+ ); +} + +export default Bug3654Route; diff --git a/docs/src/data/configurations/modal.ts b/docs/src/data/configurations/modal.ts index aa0a6f3a40..b45af18f44 100644 --- a/docs/src/data/configurations/modal.ts +++ b/docs/src/data/configurations/modal.ts @@ -280,30 +280,6 @@ export const modalConfigurations: ComponentConfigurations = {

Your application has been successfully submitted. You will receive a confirmation email shortly.

 -`, - }, - }, - { - id: "callout-event", - name: "Event callout", - description: "Modal with event callout header", - code: { - react: { - ts: reactModalSetup, - jsx: ` -

The system will be unavailable on March 28 from 10:00 PM to 2:00 AM for scheduled maintenance.

-`, - }, - angular: { - ts: angularModalSetup, - template: ` -

The system will be unavailable on March 28 from 10:00 PM to 2:00 AM for scheduled maintenance.

-`, - }, - webComponents: `Open modal - -

The system will be unavailable on March 28 from 10:00 PM to 2:00 AM for scheduled maintenance.

- `, }, }, diff --git a/libs/web-components/src/components/modal/Modal.svelte b/libs/web-components/src/components/modal/Modal.svelte index 4ff8022821..0e9ce8d64c 100644 --- a/libs/web-components/src/components/modal/Modal.svelte +++ b/libs/web-components/src/components/modal/Modal.svelte @@ -72,7 +72,8 @@ // ******** $: _isClosable = toBoolean(closable); - $: _headingExists = heading !== "" || ($$slots.heading && _headingSlotHasContent); + $: _headingExists = + heading !== "" || ($$slots.heading && _headingSlotHasContent); $: _headerHasContent = _headingExists || _isClosable; // Moving the reactive var into a timeout prevents accessing null stylesheet @@ -160,10 +161,12 @@ return true; } - return children?.length === 1 // there should only be one child element - && children[0].tagName === "DIV" // angular renders a
- && children[0].getAttribute("slot") === slotName // the div is a slot - && children[0]?.textContent?.trim() === "" // the div is empty + return ( + children?.length === 1 && // there should only be one child element + children[0].tagName === "DIV" && // angular renders a
+ children[0].getAttribute("slot") === slotName && // the div is a slot + children[0]?.textContent?.trim() === "" + ); // the div is empty } function close(e: Event) { @@ -250,11 +253,7 @@ >
{#if version === "2" && _iconType} - + {/if}