[Modal] Design enhancements - Ready

[aagonzales]

Introducing new modal enhancements and variations.
Check indicates dev delivered.

• Sizes: [Modal] Design enhancements - Ready #4607 (comment)
  • 4 sizes
  • Responsive widths
  • Max heights
  • Overflow content
  • Margin-right
• Types: [Modal] Design enhancements - Ready #4607 (comment)
  • Passive
  • Transactional
  • Danger
  • Input
  • Progress (formerly Linear)
• Button groups: [Modal] Design enhancements - Ready #4607 (comment)
  • 1 button
  • 2 buttons
  • 3 buttons
• Examples: [Modal] Design enhancements - Ready #4607 (comment)
• Docs

Sketch file:
https://ibm.box.com/s/38r605b633kvmpt5qcv67owqn6imfmhk

[aagonzales]

Modal sizes

• XS
• Small
• Default
• Large

Widths

The width's will vary based on breakpoint

Breakpoint	XS	Small	Default	Large
1584	24%	36%	48%	72%
1312	24%	36%	48%	72%
1056	32%	42%	60%	84%
672	48%	60%	84%	96%
320	100%	100%	100%	100%

% corollate to an approximate column count

%	~# of columns
72%	12
60%	10
48%	8
42%	7
36%	6
24%	4

Heights

Modal size	Max-height
XS	48%
Small	72%
Default	84%
Large	96%

Overflow content

Use a fade to indicate there is content below the fold

Margin-right

• If modal is smaller than 32% then the margin-right should be 16px/1rem
• If modal is greater than 32% then the margin-right should be 20% of the modal width

• Note: Margin-right padding rules only apply to body copy. Other components, such as input fields can span the full width of the modal.

[aagonzales]

Modal Types

Changes from existing modal

• Title can be used as the primary message in passive and transactional modal. It can also be used as the input label if only one action is being preformed (see example section).
• New: Linear direction modal with built in progress indicator.

[aagonzales]

Button groups

Guidance:

• Modals can have 1, 2 or 3 buttons.
• 4 Buttons is not allowed.
• 3 Buttons should only be used a rare scenarios
• If a "cancel" is needed outside of the 2 button set scenario than it should be a ghost button and left aligned.
• Button are sticky to the bottom of the modal window
• Never inset (add padding to the bottom and side) buttons on modal.
• Modals with more than 2 buttons is not recommend for mobile. (potential solution is split button)

[aagonzales]

Examples

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[elizabethsjudd]

@emyarod I'm guessing these enhancements are only being made to React. Are their plans to carry them down to Vanilla (specifically the change so users can not click outside the transactional modal to close it)?

[elizabethsjudd]

@aagonzales looking at this comment (#4607 (comment)), what's the expected behavior of a keyboard users when they press ESC for a transactional modal?

[aagonzales]

Pressing ESC on a transactional modal would close the modal without saving or submitting any data and return the user/focus to the main page.

[emyarod]

@elizabethsjudd the visual changes should appear for both vanilla and React. I don't think the UX changes have been implemented yet in either library but I can port it to vanilla when it's done

[elizabethsjudd]

Thank you @emyarod!

[grahamharper]

+1 for support for the 3 button modal, both flush-left and left-aligned "Cancel" variants.

How should this behave in a narrow viewport? Buttons stack?