Skip to content

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

Merged
ArakTaiRoth merged 1 commit intodevfrom
tom/modal-refinements
Apr 28, 2026
Merged

fix(#3654): modal border removal, status close button hover colors#3798
ArakTaiRoth merged 1 commit intodevfrom
tom/modal-refinements

Conversation

@twjeffery
Copy link
Copy Markdown
Collaborator

@twjeffery twjeffery commented Apr 10, 2026

Summary

  • Remove visible border from V2 modal surface (was --goa-modal-border, a greyscale-150 solid border)
  • 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 (silently undocument, component code unchanged)

Note: Close button hover tokens are defined inline in Modal.svelte temporarily. A follow-up design-tokens PR will add proper modal-callout-*-close-bg-hover tokens, and that PR will also fix a pre-existing bug where the notification banner important high/low close hover colors are swapped.

Fixes #3654

Steps needed to test

  1. Run the React playground (npm run serve:prs:react)
  2. Navigate to bugs/3654
  3. Open the basic modal, verify no visible border on the modal surface
  4. Open each status modal (Information, Success, Important, Emergency)
  5. Hover the X close button on each, verify the hover background matches the callout header color family
  6. Verify the event callout variant no longer appears in the docs site modal configurations
image image image image image

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 10, 2026

Deploy Preview for benji-docs-previews ready!

Name Link
🔨 Latest commit b11423a
🔍 Latest deploy log https://app.netlify.com/projects/benji-docs-previews/deploys/69dfc3181e03fa0008061c12
😎 Deploy Preview https://deploy-preview-3798--benji-docs-previews.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@twjeffery twjeffery force-pushed the tom/modal-refinements branch from 25389e6 to a305f9a Compare April 10, 2026 20:16
@twjeffery twjeffery marked this pull request as ready for review April 13, 2026 15:01
@twjeffery twjeffery marked this pull request as draft April 13, 2026 15:44
@twjeffery
Copy link
Copy Markdown
Collaborator Author

twjeffery commented Apr 13, 2026

Design token dependencies

This PR has inline token overrides in :host that should be removed once the following design-tokens PRs merge and a new version is published:

@twjeffery twjeffery marked this pull request as ready for review April 13, 2026 17:05
Comment thread apps/prs/react/src/app/app.tsx Outdated
Comment thread apps/prs/angular/src/app/app.routes.ts Outdated
Comment thread apps/prs/angular/src/routes/bugs/3654/bug3654.component.html
Comment thread libs/web-components/src/components/modal/Modal.svelte Outdated
@twjeffery twjeffery force-pushed the tom/modal-refinements branch from a305f9a to eeb1310 Compare April 14, 2026 20:28
@twjeffery twjeffery requested a review from ArakTaiRoth April 14, 2026 20:33
Copy link
Copy Markdown
Collaborator

@Spark450 Spark450 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just that one recommendation for the docs site. The changes to the component look good to me

Comment thread docs/src/data/configurations/modal.ts
@twjeffery twjeffery force-pushed the tom/modal-refinements branch from eeb1310 to b11423a Compare April 15, 2026 16:55
@twjeffery twjeffery requested a review from Spark450 April 15, 2026 17:01
Copy link
Copy Markdown
Collaborator

@Spark450 Spark450 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Docs comment addressed.

…ndocument 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.
@twjeffery twjeffery force-pushed the tom/modal-refinements branch from b11423a to 47d5050 Compare April 28, 2026 04:09
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-04-28 20:33 UTC

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

Preview removed

All preview folders cleaned from gh-pages branch.

@ArakTaiRoth ArakTaiRoth merged commit a3c59c6 into dev Apr 28, 2026
5 checks passed
@ArakTaiRoth ArakTaiRoth deleted the tom/modal-refinements branch April 28, 2026 20:32
@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0-dev.19 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Modal refinements

4 participants