Modal style should comply with design spec
Problem to solve
This is the gitlab-ui modal component in action:
It does not exactly comply with the modal design spec for the Pajamas Design System
Further details
- The modal should be pinned 64px from the top of the viewport
- The modal should have a border radius of 4px
- The modal should have a minimum height of 200px
- The modal's header section should be 56px tall (with one line of text) including 16px padding
- The modal's title should be styled as an
<h3>
- The modal's close button should be the same color as the title text
- The modal's content should have 16px padding on all sides, 48px on right side
- The modal's footer should be 64px tall including 16px padding
Proposal
Tweak CSS that applies to modals until design spec is met
Documentation
Documentation will live in gitlab-ui
Testing
This may cause visual changes to existing modals, any visual snapshot comparison tests could need to be updated
Links / references
Modal epic: &1026 Style modal epic: &1095 (closed)
Edited by Miranda Fluharty