4 variants with both light/dark mode color schemes
Optional header, description, and children (custom react elements) to display as alert content
Optional primary/secondary buttons for actions associated with the Alert
Split off: Ticket #246 for adding support for expand/collapsible accordion form
Created a basic Storybook story for testing with Alert
Button component
Updated Button to instead of filling out horizontal width with alignSelf: 'stretch' to use width: '100%' as it was noted working through Alert that alignSelf: 'stretch' will appear bugged (stretch out vertically) if it is nested within a View (or other element) with flexDirection of 'row' and there's space to do so
Utilities
Added new "Base" utility function that handles setting base color scheme (different grays depending on light/dark mode) as a convenience
This function is exposed to consuming apps with the AlertContentColor function so apps can just call that to correctly set color for any children elements without needing to manually build "base" colors
Added new "Spacer" utility component that handles setting spacing between elements in components more simply/explicitly than juggling spacing entirely with margin/padding
No test build, shifted AC for testing in-app to the ticket adding expand/collapse support.
[x] PR has changelog label applied if it's to be included in the changelog
[x] Acceptance criteria:
All satisfied or
Documented reason for not being performed or
Split to separate ticket and ticket is linked by relevant AC(s)
[x] Above PR sections adequately filled out
[x] If any breaking changes, in accordance with the pre-1.0.0 versioning guidelines: a CU ticket has been created for the VA Mobile App detailing necessary adjustments with the package version that will be published by this ticket
Code
[x] Tests are included if appropriate (or split to separate ticket)
[x] New functions have proper TSDoc annotations
Publish
While changes warrant a new version per the versioning guidelines, given in-app testing was not performed and split to ticket #246 that will be a more appropriate ticket to publish Alert with.
Description of Change
Created initial pass at Alert component.
alignSelf: 'stretch'to usewidth: '100%'as it was noted working through Alert thatalignSelf: 'stretch'will appear bugged (stretch out vertically) if it is nested within a View (or other element) with flexDirection of 'row' and there's space to do soAlertContentColorfunction so apps can just call that to correctly set color for any children elements without needing to manually build "base" colorsNo test build, shifted AC for testing in-app to the ticket adding expand/collapse support.
Screenshots/Video
iOS (similar on Android):
https://github.com/department-of-veterans-affairs/va-mobile-library/assets/8690976/50054f9a-c291-4493-b85c-1affba7f89ce
Testing
PR Checklist
Code reviewer validation:
changeloglabel applied if it's to be included in the changelogPublish
While changes warrant a new version per the versioning guidelines, given in-app testing was not performed and split to ticket #246 that will be a more appropriate ticket to publish Alert with.