Previously icons were directly added to the value of the button. This caused issues with translation interfaces as well as a duplication of the icon inside the button's value attribute. Buttons icons and colors (classes) were static and could not be altered in anyway, preventing a sub-theme from easily changing what icons they supported and what classes to use for which buttons.
See related issues for fully history behind this.
#icon and #icon_position
There are two new keys added to every theme hook: #icon and #icon_position. While they appear for every theme hook, they are only ever used if the bootstrap base-theme has overridden a theme hook and implemented support for this.
Here is an example using ./templates/system/button.func.php:
/**
* Overrides theme_button().
*/
function bootstrap_button($variables) {
$element = $variables['element'];
// Add icons before or after the value.
// @see https://drupal.org/node/2219965
$value = $element['#value'];
if (!empty($element['#icon'])) {
if ($element['#icon_position'] === 'before') {
$value = $element['#icon'] . ' ' . $value;
}
elseif ($element['#icon_position'] === 'after') {
$value .= ' ' . $element['#icon'];
}
}
// This line break adds inherent margin between multiple buttons.
return '<button' . drupal_attributes($element['#attributes']) . '>' . $value . "</button>\n";
}
If a theme hook does not provide support for #icon or #icon_position, simply override it in your sub-theme and add support for it.
_bootstrap_colorize_button() and _bootstrap_iconize_button() signature changes
-function _bootstrap_colorize_button($text) {
+function _bootstrap_colorize_button(&$element) {
+function _bootstrap_colorize_text($text) {
-function _bootstrap_iconize_button($text) {
+function _bootstrap_iconize_button(&$element) {
+function _bootstrap_iconize_text($text) {
The signatures of these two functions have changed to become more abstract. Basically, the functionality of these functions have remained intact, but simply renamed with _text at the end. This allows us to use the _button namespace to simply pass the entire element. Without having to do common logic for determining if the element is a button and adding button specific classes.
These new _text functions work almost identically as before, except it will simply return the type of class that should used (ie: primary, warning, danger, etc.), not a prefixed version like btn-primary. The _button functions will take the element (passed by reference) and simply alter the button if needed.
An example of what this conversion may look if you have used this in your sub-theme:
$element = &$vars['element'];
// Before (7.x-3.0):
if ($class = _bootstrap_colorize_button($element['#value'])) {
$element['#attributes']['class'][] = $class;
}
// After (7.x-3.1):
_bootstrap_colorize_button($element);
// Or if a more manual process is desired (unlikely):
if ($class = _bootstrap_colorize_text($element['#value'])) {
$element['#attributes']['class'][] = "btn-$class";
}
hook_bootstrap_colorize_text_alter() and hook_bootstrap_iconize_text_alter()
Two new alter hooks have been created in an effort to help extend which classes and which icons are added to which buttons. There is an entirely new bootstrap.api.php file that contains examples on how to alter these. Your sub-theme can now extend this system without having to wait for a new release.