Metabase: Our modals should follow a standard style

[mazameli]

Our current modals are all over the place: blue button plus link, blue and red button, blue and gray button, red and gray button. Most have buttons aligned left, some have buttons aligned right. Some with a horizontal divider, others without.

So, here are some standards I'd like to propose:

Right-aligned buttons, with the primary action on the far right
I did a fair amount of research and reading, and while NN Group says it really doesn't matter that much which side the buttons align to, right alignment (with the primary action on the far right) is the standard for OS X, iOS, Android, and many popular web/desktop products (like Slack). For those of us who read left-to-right, there's also the argument to be made for having the "go forward" action on the right.

Sentence-case headings
We have a mix of title-case headings and sentence-case headings, but Kyle and I feel that sentence-case fits the friendly, casual personality of Metabase better. This means it should be Add to dashboard instead of Add To Dashboard for example.

Headings for destructive actions should always be a question
We're really inconsistent about this right now. For example, our delete dashboard confirmation modal has the heading Delete Dashboard with body copy that reads Are you sure you want to do this? Instead, it should read Delete this dashboard? and the body copy should contain clarifying information about what will happen if this action is taken, e.g., This can't be undone, but your cards won't be deleted.

The primary button for constructive/neutral actions should be blue, and red for destructive actions
The secondary action should always be our gray, secondary action button style.

The secondary action should always say "Cancel," with rare exceptions
This is for the sake of predictability, consistency, and convention. There are some rare exceptions, like when the modal is a confirmation or a followup from a previous modal. As an example, when you save a question, we ask you in a modal if you want to add it to a dashboard. In this case, saying "cancel" is ambiguous (does this cancel saving the card?), and it makes sense for it to read "Not now."

The text for primary action buttons should always be a verb
If we ask the user, "Add this to a dashboard," the action should read "Add" instead of "Yes" for example. Or if we ask, "Reset this password," the button should read "Reset". This provides good additional feedback to the user for what's going to happen if they click the button. Additionally, though we could write, "Yes, discard," I feel that's unnecessarily verbose and redundant.

There should never be more than two buttons in a modal
There are definitely cases where just a single button is appropriate, but there are few legitimate cases where a modal should have more than two buttons. E.g., if there were a "learn more" button, clicking it might open a new window, but it leaves the modal in an ambiguous state.

[a number of other cosmetic tweaks]
A fair amount of details have been intentionally altered in the designs (font sizes, line-height, the size/position of the buttons and the X in the top-right, etc.), so if and when someone is ready to implement this, please ping me and I'll provide detailed specs.

Now, here are a bunch of examples:

A pretty standard modal, but one that points out some interesting exceptions. This is technically a constructive modal, because nothing might get deleted or undone, but it still has a heading in the form of a question because we're asking the user if they're sure. In this case, the button is blue, not red.

Here's a modal with a heading, but no body text.

A modal with a single button. I played with centering the button in this kind of scenario, but I don't think this looks bad, and I'm favoring consistency here.

Modal with a form.

Primary button disabled due to lack of required input.

A destructive modal with a red button and a question in the heading.

[tlrobinson]

👍

Can we put a min height on the "welcome" modals so the button doesn't jump around when you click through them?

[mazameli]

Haha, we should do that. I want to overhaul the welcome modals as its own project, so we'll make sure to address that complaint in that separate issue.

Update: we did in fact overhaul the welcome modals in 0.24 or 0.25 (I can't recall which).

[mazameli]

Resolved by #5833