Skip to content

[BB-7033] Improve alerts styling

Pooja Kulkarni requested to merge pooja/85-bb-7033-improve-alerts into master

This PR introduces a new wrapper around bootstrap Alert component, called CustomAlert that implements required design page. It provides an option to show buttons that can be passed in via variables, within the alerts. In addition to the bootstrap Alert properties, the following values may be passed in as variables:

  • alertTitle (string)
  • alertBody (string)
  • showButtons (boolean)
  • leftButton (Button element)
  • rightButton (Button element)

Supporting information

Visual changes

  • Screenshots

Danger Alert type

alert-danger-example

Warning Alert type (with buttons passed in)

alert-warning-example

Success Alert type

alert-success-example

Testing instructions

  • Checkout this branch and provision your devstack.
  • On login screen, type in the wrong password and verify the danger alert.
  • Add a new checklist.
  • Login with the correct credentials and attempt to submit without completing the checklist.
  • verify the warning alert with buttons.
  • Click on "yes, submit" option and verify the success alert.

Author notes and concerns

  • I couldn't find the info type of alert being used anywhere but it's also included in the wrapper.
  • There were 2 instances of bootstrap Alert being used without any icons (only passed errors): here and here, that I did not update since I wasn't sure if it should be changed or not.
Edited by Pooja Kulkarni

Merge request reports