fix(#3654): modal border removal, status close button hover colors

apps/prs/angular/src/routes/bugs/3654/bug3654.component.html

@@ -0,0 +1,89 @@
+<div>
+  <h1>3654 - Modal refinements</h1>
+  <p>
+    <a
+      href="https://github.com/GovAlta/ui-components/issues/3654"
+      target="_blank"
+      rel="noopener"
+    >
+      View on GitHub
+    </a>
+  </p>
+
+  <h2>Test 1: Basic modal (border check)</h2>
+  <p>Inspect the modal surface. There should be no visible border.</p>
+  <goab-button (onClick)="basicOpen = true">Open basic modal</goab-button>
+  <goab-modal
+    heading="Basic Modal"
+    [open]="basicOpen"
+    [closable]="true"
+    (onClose)="basicOpen = false"
+  >
+    <p>Inspect this modal surface for a visible border.</p>
+    <goab-button-group alignment="end" slot="actions">
+      <goab-button type="tertiary" (onClick)="basicOpen = false">Close</goab-button>
+    </goab-button-group>
+  </goab-modal>
+
+  <hr />
+
+  <h2>Test 2: Status modals (close button hover colors)</h2>
+  <p>Hover over the close X button on each status modal.</p>
+
+  <goab-button type="secondary" (onClick)="infoOpen = true">Information</goab-button>
+  <goab-button type="secondary" (onClick)="successOpen = true">Success</goab-button>
+  <goab-button type="secondary" (onClick)="importantOpen = true">Important</goab-button>
+  <goab-button type="secondary" (onClick)="emergencyOpen = true">Emergency</goab-button>
+
+  <goab-modal
+    heading="Information Modal"
+    calloutVariant="information"
+    [open]="infoOpen"
+    [closable]="true"
+    (onClose)="infoOpen = false"
+  >
+    <p>Hover the close button. Check hover color.</p>
+    <goab-button-group alignment="end" slot="actions">
+      <goab-button type="tertiary" (onClick)="infoOpen = false">Close</goab-button>
+    </goab-button-group>
+  </goab-modal>
+
+  <goab-modal
+    heading="Success Modal"
+    calloutVariant="success"
+    [open]="successOpen"
+    [closable]="true"
+    (onClose)="successOpen = false"
+  >
+    <p>Hover the close button. Check hover color.</p>
+    <goab-button-group alignment="end" slot="actions">
+      <goab-button type="tertiary" (onClick)="successOpen = false">Close</goab-button>
+    </goab-button-group>
+  </goab-modal>
+
+  <goab-modal
+    heading="Important Modal"
+    calloutVariant="important"
+    [open]="importantOpen"
+    [closable]="true"
+    (onClose)="importantOpen = false"
+  >
+    <p>Hover the close button. Check hover color.</p>
+    <goab-button-group alignment="end" slot="actions">
+      <goab-button type="tertiary" (onClick)="importantOpen = false">Close</goab-button>
+    </goab-button-group>
+  </goab-modal>
+
+  <goab-modal
+    heading="Emergency Modal"
+    calloutVariant="emergency"
+    [open]="emergencyOpen"
+    [closable]="true"
+    (onClose)="emergencyOpen = false"
+  >
+    <p>Hover the close button. Check hover color.</p>
+    <goab-button-group alignment="end" slot="actions">
+      <goab-button type="tertiary" (onClick)="emergencyOpen = false">Close</goab-button>
+    </goab-button-group>
+  </goab-modal>
+</div>

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;
+}

apps/prs/angular/src/routes/bugs/3654/bug3654.route.json

@@ -0,0 +1,6 @@
+{
+  "title": "Modal refinements",
+  "path": "bugs/3654",
+  "id": "3654",
+  "type": "bug"
+}

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;

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 (
+    <div>
+      <GoabText tag="h1" mt="m">
+        Bug #3654: Modal refinements
+      </GoabText>
+
+      <GoabBlock>
+        <GoabLink trailingIcon="open">
+          <a
+            href="https://github.com/GovAlta/ui-components/issues/3654"
+            target="_blank"
+            rel="noopener"
+          >
+            View on GitHub
+          </a>
+        </GoabLink>
+
+        <GoabDetails heading="Issue Description">
+          <GoabText tag="p">
+            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).
+          </GoabText>
+        </GoabDetails>
+      </GoabBlock>
+
+      <GoabDivider mt="l" mb="l" />
+
+      <GoabText tag="h2">Test Cases</GoabText>
+
+      <GoabText tag="h3">Test 1: Basic modal (border check)</GoabText>
+      <GoabText tag="p">
+        Inspect the modal surface. There should be no visible border.
+      </GoabText>
+      <GoabButton onClick={() => setBasicOpen(true)}>Open basic modal</GoabButton>
+      <GoabModal
+        heading="Basic Modal"
+        open={basicOpen}
+        onClose={() => setBasicOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="tertiary" onClick={() => setBasicOpen(false)}>
+              Close
+            </GoabButton>
+          </GoabButtonGroup>
+        }
+      >
+        <GoabText tag="p">
+          Inspect this modal surface for a visible border (shadow, outline, or border
+          property).
+        </GoabText>
+      </GoabModal>
+
+      <GoabDivider mt="l" mb="l" />
+
+      <GoabText tag="h3">Test 2: Status modals (close button hover colors)</GoabText>
+      <GoabText tag="p">
+        Hover over the close X button on each status modal. The hover color should match
+        the notification banner close button hover colors.
+      </GoabText>
+      <GoabButtonGroup alignment="start">
+        <GoabButton type="secondary" onClick={() => setInfoOpen(true)}>
+          Information
+        </GoabButton>
+        <GoabButton type="secondary" onClick={() => setSuccessOpen(true)}>
+          Success
+        </GoabButton>
+        <GoabButton type="secondary" onClick={() => setImportantOpen(true)}>
+          Important
+        </GoabButton>
+        <GoabButton type="secondary" onClick={() => setEmergencyOpen(true)}>
+          Emergency
+        </GoabButton>
+      </GoabButtonGroup>
+
+      <GoabModal
+        heading="Information Modal"
+        calloutVariant="information"
+        open={infoOpen}
+        onClose={() => setInfoOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="tertiary" onClick={() => setInfoOpen(false)}>
+              Close
+            </GoabButton>
+          </GoabButtonGroup>
+        }
+      >
+        <GoabText tag="p">Hover the close button. Check hover color.</GoabText>
+      </GoabModal>
+
+      <GoabModal
+        heading="Success Modal"
+        calloutVariant="success"
+        open={successOpen}
+        onClose={() => setSuccessOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="tertiary" onClick={() => setSuccessOpen(false)}>
+              Close
+            </GoabButton>
+          </GoabButtonGroup>
+        }
+      >
+        <GoabText tag="p">Hover the close button. Check hover color.</GoabText>
+      </GoabModal>
+
+      <GoabModal
+        heading="Important Modal"
+        calloutVariant="important"
+        open={importantOpen}
+        onClose={() => setImportantOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="tertiary" onClick={() => setImportantOpen(false)}>
+              Close
+            </GoabButton>
+          </GoabButtonGroup>
+        }
+      >
+        <GoabText tag="p">Hover the close button. Check hover color.</GoabText>
+      </GoabModal>
+
+      <GoabModal
+        heading="Emergency Modal"
+        calloutVariant="emergency"
+        open={emergencyOpen}
+        onClose={() => setEmergencyOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="tertiary" onClick={() => setEmergencyOpen(false)}>
+              Close
+            </GoabButton>
+          </GoabButtonGroup>
+        }
+      >
+        <GoabText tag="p">Hover the close button. Check hover color.</GoabText>
+      </GoabModal>
+    </div>
+  );
+}
+
+export default Bug3654Route;

docs/src/data/configurations/modal.ts

@@ -280,30 +280,6 @@ export const modalConfigurations: ComponentConfigurations = {
 <goa-modal version="2" id="demo-modal" heading="Application submitted" closable calloutvariant="success">
   <p>Your application has been successfully submitted. You will receive a confirmation email shortly.</p>
 </goa-modal>
-<script>${modalScript}</script>`,
-      },
-    },
-    {
-      id: "callout-event",
-      name: "Event callout",
-      description: "Modal with event callout header",
-      code: {
-        react: {
-          ts: reactModalSetup,
-          jsx: `<GoabModal heading="Scheduled maintenance" open={isOpen} calloutVariant="event" onClose={handleClose}>
-  <p>The system will be unavailable on March 28 from 10:00 PM to 2:00 AM for scheduled maintenance.</p>
-</GoabModal>`,
-        },
-        angular: {
-          ts: angularModalSetup,
-          template: `<goab-modal heading="Scheduled maintenance" [open]="isOpen" [closable]="true" calloutVariant="event" (onClose)="handleClose()">
-  <p>The system will be unavailable on March 28 from 10:00 PM to 2:00 AM for scheduled maintenance.</p>
-</goab-modal>`,
-        },
-        webComponents: `<goa-button version="2" id="open-modal">Open modal</goa-button>
-<goa-modal version="2" id="demo-modal" heading="Scheduled maintenance" closable calloutvariant="event">
-  <p>The system will be unavailable on March 28 from 10:00 PM to 2:00 AM for scheduled maintenance.</p>
-</goa-modal>
 <script>${modalScript}</script>`,
       },
     },