Skip to content

Replace bootstrap alerts in app/helpers/wiki_helper.rb

Thanks for picking this issue up. I've included some instructions below to help you out. You might be wondering why I didn't just do a find and replace and save us all the hassle. Simply put, CSS is a nightmare and find and replace doesn't care if the changes you made break the UI. Splitting this up and getting people to properly look at each component ensures we don't create a sea of visual regressions. Nobody wants that.

If there are any issues with the instructions, please ping me (@samdbeckham) and I'll make sure they're updated for all the other issues. Let's give bootstrap the boot! 👢 💥

Instructions

  • Take a before screenshots of the alert(s) in action.
  • Replace each instance of the bootstrap alert classes in the file with the relevant gitlab ui class name (see map below)
  • Make sure the component matches the guidelines in GitLab UI.
  • Make sure the alert has the appropriate icon
  • Take after screenshots of the alert(s).
  • Open an MR with your changes. Make sure to include both the before and after screenshots in the description

Class name mapping guide

Note: Be sure to check both flavours of HAML classes. e.g. = link_to _('…'), class: 'alert-link' and %div.alert

  • .alert -> .gl-alert
  • .alert-primary -> .gl-alert-info
  • .alert-success -> .gl-alert-success
  • .alert-danger -> .gl-alert-danger
  • .alert-warning -> .gl-alert-warning
  • .alert-info -> .gl-alert-info
  • .alert-link -> .gl-alert-link

Dismissible alerts

If the component has the .alert-dismissible class then it's unfortunately a little more complex. You'll need to add the following haml inside the alert component:

%button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
  = sprite_icon('close', size: 16, css_class: 'gl-icon')

Be sure when testing this component that the close functionality still works.

Icons

You'll need to add the approopriate icon to the alert. This goes just above the description and uses the following HAML. Be sure to change the icon name to match the one outlined in GitLab UI

= sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
Edited by Alexander Turinske