coreyvickery
commented
4 years ago Modal
Types
Content modal
Use to store content like text, links, and images in a modal.
Video modal
Use to show a video in a modal.
Interaction states and styles
Content modal
Default
The color of the Close button is #6a6e73. This state is active when the focus indicator is deactivated or moved away from the Close button.
Focus
A focus indicator is added to the Close button and changes the color to #151515. This is also the default state of the Close button when this type of Modal opens.
Hover
Changes the color of the Close button to #151515 if the focus indicator is deactivated or moved.
Active/Pressed
A focus indicator is added to the Close button and the color remains the same as the Hover state.
Video modal
Default
The color of the Close button is #fff. This state is active when the focus indicator is deactivated or moved away from the Close button.
Focus
A focus indicator is added to the Close button and changes the color to #f0f0f0. This is also the default state of the Close button when this kind of Modal opens.
Hover
Changes the color of the Close button to #f0f0f0 if the focus indicator is deactivated or moved.
Active/Pressed
A focus indicator is added to the Close button and the color remains the same as the Hover state.
Position on grid
For marketing purposes, Modals need to be 8 columns wide on Desktop and Tablet breakpoints, and 1 column wide on Mobile breakpoints.
8-column
1-column
Breakpoints
Content modal
Desktop
Tablet, landscape
Tablet, portrait
Mobile, landscape
At breakpoints smaller than 768px, the grid reduces to 1 column and the Content modal resizes to fill the full width of the screen.
Mobile, portrait
At breakpoints smaller than 768px, the grid reduces to 1 column and the Content modal resizes to fill the full width of the screen.
Video modal
Desktop
Tablet, landscape
Tablet, portrait
Mobile, landscape
At breakpoints smaller than 768px, the grid reduces to 1 column and the Video modal resizes to fill most of the screen vertically.
Mobile, portrait
At breakpoints smaller than 768px, the grid reduces to 1 column and the Video modal resizes to fill the full width of the screen.
Exceptions
In rare cases where a larger layout is needed, a Content modal can be extended to be 12 columns wide on Desktop and Tablet breakpoints only.
Styles
Content modal
Container background
- Color: #fff
- Corners: 3px
- Alignment: Horizontally- and vertically-centered on the page
Background overlay or scrim
- Color: #151515
- Opacity: 65%
Close button
- Color: #6a6e73
- Icon: Use icon from PatternFly 4
Video modal
Player background
- Color: N/A
- Corners: N/A
- Alignment: Horizontally- and vertically-centered on the page
Background overlay or scrim
- Color: #151515
- Opacity: 65%
Close button
- Color: #fff
- Icon: Same as Content component, use icon from PatternFly 4
Spacing
Content modal
Desktop
Spacing inside Desktop and Tablet Content modals is 32px.
Mobile
Spacing inside Mobile Content modals is 24px.
Video modal
Desktop
The Close button is aligned to the top right corner of the player with no extra space.
Mobile
The right edge of the Close button is visually aligned to the right edge of the player with an 8px spacer underneath.
Spacing legend https://www.patternfly.org/v4/design-guidelines/styles/spacers
Accessibility
Closing the component
- Clicking on or tapping the Close button
- Clicking on or tapping anywhere outside of the Modal container
Focus
The Close button should be focused when a Modal opens.
Keyboard interactions
| Key | Interaction |
|---|---|
| Space or Enter (if the Modal is closed) | Triggers a Modal |
| Space or Enter (if the Modal is open) | Triggers the focused interactive element or closes the Modal (if the Close button is still focused) |
| Tab (if the Modal is open) | Focuses the next interactive element in the tab order after the Close button |
castastrophe
bennypowers
markcaron
@coreyvickery looks like more description is needed here.