History: Organization of button colors in Tiki
Source of version: 8
Copy to clipboard
The goal here is to make the meaning of button colors in Tiki more intuitive and consistent. In the Bootstrap update to version 4, part of Tiki 19, some button class names and default colors have changed from Bootstrap 3. (See [https://getbootstrap.com/docs/4.0/components/buttons/] .) The meanings conveyed by button colors may not be as clear now as they were in Bootstrap 3, when the default button color was essentially neutral and colors were used for special meaning and, even with Tiki and Bootstrap 3, there wasn't a clear pattern of button color use.
For this reason, the button classes are being organized in the .tpl files, etc. and will be in the HTML and they will be most apparent in the Default Bootstrap theme. Other themes, of course, can style buttons as they please but the hope is that the organization of button colors makes sense and will benefit themes and users even if the themes' palettes vary from the Bootstrap default.
One suggestion is that sites could assign an admin theme that shows the button colors most clearly, and another site theme with perhaps less obvious colors that are toned down from the default ones.
|| __Button purpose category__ | __Class and default color__ | __Examples__
Make a significant change | btn-primary (blue) | Save, Apply, Rename, Select, Attach
Confirmation for non-destructive change | btn-success (green) | Anti-CSRF confirmation
Make a destructive change | btn-danger (red) | Delete
Confirmation for destructive change | btn-warning (yellow) | Are you sure?
Display information%%%{TAG(tag="small")}Including buttons that navigate to another page to show content.{TAG} | btn-info (cyan) | History, Source, Preview, Find
Make an insignificant change%%%{TAG(tag="small")}Including buttons that show/hide content without a page change.{TAG} | btn-secondary (gray) | Tabs/No tabs, Sort, Filter, Files, Comments, More ||
* In principle, links that are used for navigation should be styled as links (text only or text with icon), not as buttons. But there can be exceptions such as call to action buttons that also link to another page.
* On pages or sites where there aren't many buttons, the button colors might seem random, but as the number of buttons and user interactions increases, then hopefully the color pattern will be more evident and useful from a UI standpoint.
* For consistency this color scheme should be applied to icon buttons as well, like the magnifying-glass "search" icon and the "i" and "?" tooltip icons, in forms and so on, but not in an array like the admin icons where color consistency is more important.
Dev mailing list discussion starts here: [https://sourceforge.net/p/tikiwiki/mailman/message/36346433/]
!! Edge cases
* The __Post new comment__ button leads eventually to a positive action so could possibly be considered ''btn-primary'', but this button itself only causes the comment form to display, so is ''btn-secondary''. The __Post__ button in the comment form is ''btn-primary'' because it actually causes the action.
* Although clicking the __Clear all caches__ button is destructive in the sense that it deletes files in the caches, this button can be ''btn-primary'' because clearing the caches is a positive action (to remove unwanted files and use updated content, etc.).
!! Questions
* Where is the limit between significant and insignificant changes? {sign user="Chealer9" datetime="2018-06-21T17:14:46+00:00"}
** I don't know of a criteria yet but I would say that for any case where there is a question, it should be classified as signficant. {sign user="chibaguy" datetime="2018-06-24T07:36:25+00:00"}
* Is it allowed to use ''btn-primary'' for confirming a non-destructive change, or to make a destructive change? {sign user="Chealer9" datetime="2018-06-21T17:14:46+00:00"}
** I think it's more appropriate to use the success color to confirm a non-destructive change; and I think it would be confusing and inconsistent to use btn-primary to make a destructive change. {sign user="chibaguy" datetime="2018-06-24T07:36:26+00:00"}