bloom-housing / ui-seeds

Shared user interface components for Bloom affordable housing system
Apache License 2.0
1 stars 1 forks source link

Enhancement to the Alert component #82

Open jaredcwhite opened 4 months ago

jaredcwhite commented 4 months ago

As part of Bloom Core uptake of the Alert component, we discovered that there was an additional pattern in use some places where additional descriptive text would appear directly below an alert in such a way as to appear to be a single unified component. Here's an example with a breakdown of the two UIC components currently used for this appearance:

strange alert

As far as I can tell, the AlertNotice component always appears directly below the AlertBox component and matches the color scheme, and due to state handling in parent React components at the app level, clicking the X button on AlertBox hides both the AlertBox and AlertNotice.

We should investigate adding the ability to provide a secondary description/subtitle to Alert, either as a prop or via child components (maybe <Alert.Title> + <Alert.Description>?), which would then result in this type of appearance. There may also be accessibility concerns to ensure the appearance of an Alert onscreen would read both the title and description.