Rebuild AlertBox on BandedDiv - #2075
Conversation
AlertBox is now a BandedDiv: the severity color goes in the band, the severity icon rides in it, and the face carries the copy. The frame, the band tuck, and the severity-tinted face border all come from the shared component, which replaces the MUI Alert along with the alertClasses overrides that were reshaping its icon, message, and action slots. A band reads the same whatever the message length, so the compact/tall split has nothing left to express: `short` and `headerMessage` are ignored, and the h4 header they drew from the `alert.*` messages is gone. Call sites still pass both; the next commit takes them out. AlertBoxProps moves next to the component, and the alert surface and text colors move out of Theme.tsx, which had no other consumer for them.
`short` and `headerMessage` came off every call site and out of AlertBoxProps. The one `headerMessage` caller passes its copy as `title` instead, and the four `alert.*` header messages are gone with the header that read them. ControllerErrors was reaching through AlertBox's sx to widen `.MuiAlert-message`, a class no alert renders now; the face gives its content the full width already.
`condensed` did one thing: pick the AlertBox presentation that no longer exists. It came out of ErrorProps and off the 26 call sites that were setting it.
The band's color already says how severe the message is, and the icon repeated it without adding anything. With no icon, `hideIcon` has nothing to hide, so it comes off AlertBox, Error, and ValidationErrorSummary along with the call sites that were setting it.
❌ Code HealthIntroduces 48 Unused files
|
|
Unwinding this — AlertBox stays on MUI Alert, and BandedDiv goes back into greg/access. |
1 participant
Changes
Rebuilds
AlertBoxon theBandedDivfrom #2073. The severity color moves into the band; the copy sits on the face.Stacked on #2073 (BandedDiv) and under #1989 (service accounts).
The component
Alertis gone, and with it thealertClassesoverrides that were reshaping its icon, message, and action slots, plusiconMappingandSHARED_STYLING. The frame, the band tuck, and the severity-tinted face border all come fromBandedDiv.side="left",radius="sm"(4px, matching the old alert),bandColor={theme.palette[severity][mode]}(unchanged from the old border color).role="alert"and the forwarded ref land on the alert's content, which is whatValidationErrorSummaryscrolls into view.onCloserenders its own close button now that MUI isn't supplying one.The API
AlertBoxPropsisseverity,children,onClose,sx,title, and it moved next to the component. Removed:short— 86 call sites set it, 82 of them the same way. A band reads the same whatever the message length, so there was nothing left for the compact/tall split to express.headerMessageand the fouralert.*messages — theh4header they fed is gone. The one caller passes its copy astitle.hideIcon— nothing to hide once the icon went.condensedonError— it only ever picked the AlertBox presentation. Off 26 call sites.alertBackgroundandalertTextPrimarycame out ofTheme.tsx, which had no other consumer for them.AlertBoxnow has a named export alongside the default; the 77 existing importers are untouched.Tests
Manually tested
/admin/billingagainst the local stack, both payment-provider alerts: bandrgb(193,75,96)at a 24px visible run, face border1px solid rgb(193,75,96),role="alert"present.Automated tests
Screenshots
Band-only alert, dark mode — severity color at the left edge, copy on the face.