patternfly-elements
patternfly-elements copied to clipboard
patternfly
pfe-modal design updates
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 |
@starryeyez024 @kylebuch8 Added notes, please let me know if I missed anything.
Incorporating requests from #483:
Requesting to add a few additional design hooks for the modal:
--pfe-modal--BackgroundColor
--pfe-modal--BorderColor
--pfe-modal--BorderRadius
Note that with the background color variable being added, we would need to update the close icon to use the broadcasted--text color so it will show up on any background.
@coreyvickery how many of these are still relevant in 2.0 patternflyelements.org/components/modal/demo
@bennypowers Not sure about 2.0, but I don't think these changes have been incorporated.
