Library: Restyle the action buttons for Sakai tools (Primary and Secondary actions)

Description

Following recommendations in SAK-31204:

Currently, all actionable buttons in several tools are styled the same, with blue background and white text. This makes it difficult to scan through and identify the primary action (e.g., "Post" or "Submit"), as all of the buttons look the same.

We recommend following the approach used by Google and other apps, wherein the "primary" action is styled with a background color, and all other actions be styled in a light grey so as to be less attention-grabbing.

The main objective of this Jira is update all the Sakai tools to follow this convention, like this example in Assignments:

OLD:

PROPOSED:

Attachments

4
  • 28 Sep 2018, 02:38 PM
  • 28 Sep 2018, 02:38 PM
  • 28 Apr 2017, 03:02 AM
  • 28 Apr 2017, 02:57 AM

Activity

Show:

Shawn Foster June 24, 2020 at 10:20 AM

, I noticed that you added the 19.x merge flag to this recently. This ticket was fixed for 19.0, so it should already be in 19. Therefore, the merge flag is not needed.

Is there a problem that you've noticed about the fix?

Shawn Foster September 28, 2018 at 2:39 PM

I have submitted my fix for this, which standardizes how buttons look and act in Sakai:

  • it simplifies the button design code and variables;

  • it specifies consistent states, including hover, action, focus, and disabled;

  • it introduces primary and secondary action buttons

  • it fixes cases of primary and secondary action buttons throughout the tools

  • it fixes issues with the font that caused issues with button and icon alignment

  • it cleans up extra tool-specific styles that are no longer necessary or that previously made the interface inconsistent

Here is the result:

Shawn Foster October 18, 2017 at 3:27 PM

While working on this ticket, consider SAK-33329, which is a case of jQuery styling the buttons. Bootstrap may also affect button styles.

Fixed
Created April 28, 2017 at 2:58 AM
Updated June 24, 2020 at 10:20 AM
Resolved October 2, 2018 at 9:52 AM

Flag notifications