From 47d5050d9265867302e8431f1d2bfe0d8671c5f1 Mon Sep 17 00:00:00 2001 From: Thomas Jeffery Date: Fri, 10 Apr 2026 12:08:15 -0600 Subject: [PATCH] fix(#3654): modal border removal, status close button hover colors, undocument event variant Remove visible border from V2 modal surface. Add per-status hover background colors on the close icon button for callout modals (information, success, important, emergency), matching the notification banner low emphasis pattern. Remove event callout variant from docs configurations. Inline tokens are temporary, pending design-tokens PR. --- .../routes/bugs/3654/bug3654.component.html | 89 ++++++++++ .../src/routes/bugs/3654/bug3654.component.ts | 16 ++ .../src/routes/bugs/3654/bug3654.route.json | 6 + .../src/app/routes/bugs/bug3654.route.ts | 9 + apps/prs/react/src/routes/bugs/bug3654.tsx | 163 ++++++++++++++++++ docs/src/data/configurations/modal.ts | 24 --- .../src/components/modal/Modal.svelte | 112 +++++++++--- 7 files changed, 369 insertions(+), 50 deletions(-) create mode 100644 apps/prs/angular/src/routes/bugs/3654/bug3654.component.html create mode 100644 apps/prs/angular/src/routes/bugs/3654/bug3654.component.ts create mode 100644 apps/prs/angular/src/routes/bugs/3654/bug3654.route.json create mode 100644 apps/prs/react/src/app/routes/bugs/bug3654.route.ts create mode 100644 apps/prs/react/src/routes/bugs/bug3654.tsx 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}