Overlays on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

Four files, and a design worth understanding before reading any of them.

Page	Covers
Panel	The shared skeleton, `.panel-inline-`, `.panel-trigger-`, the backdrop and the JavaScript contract
Modal	`.modal`, the centred configuration
Drawer	`.drawer` and its four edge variants
Dropdown	`.dropdown`, a contextual menu with its own contract

`.modal` and `.drawer` are the same panel

Same structure, header and content and footer. Same open and closed contract. Same backdrop. They differ only in where they sit: modal centres them, drawer pins them to an edge.

Panel

Mon, 01 Jan 0001 00:00:00 +0000

components/panel.css is the largest file in the package and the only one with no class of its own. It owns every rule behind .modal and .drawer, which contribute nothing but --panel-* values.

There is no .panel class. The selectors read :where(.modal, .drawer), so the skeleton arrives with either variant class.

Structure

<button commandfor="contact" command="show-modal">Contact</button>
<dialog class="modal" id="contact" aria-labelledby="contactLabel" closedby="any">
 <div class="header">
 <p class="title" id="contactLabel">Contact</p>
 <button class="btn-close" commandfor="contact" command="close" aria-label="Close"></button>
 </div>
 <div class="content">...</div>
 <div class="footer">...</div>
</dialog>

All three sections are optional, and all three are matched as direct children (& > .header).

Modal

Mon, 01 Jan 0001 00:00:00 +0000

A centred panel. The class is pure configuration: modal.css declares nothing but --panel-* tokens, and components/panel.css owns every rule.

<dialog class="modal" id="contact" aria-labelledby="contactLabel">
 <div class="header">
 <p class="title" id="contactLabel">Contact</p>
 <button class="btn-close js-dialog-close" aria-label="Close"></button>
 </div>
 <div class="content">...</div>
 <div class="footer">
 <button class="btn btn-secondary js-dialog-close">Cancel</button>
 <button class="btn" type="submit">Send</button>
 </div>
</dialog>

Works on a <dialog> opened with showModal() and on any element carrying popover="auto", opened with showPopover(). Reach for the second form only when the panel is not always modal, typically when .panel-inline-* turns it into a region of the page above a breakpoint.

Drawer

Mon, 01 Jan 0001 00:00:00 +0000

A panel sliding in from an edge. Like .modal, the class is pure configuration: drawer.css declares nothing but --panel-* tokens, and components/panel.css owns every rule.

<div class="drawer drawer-end" id="menu" popover="auto" role="dialog" aria-labelledby="menuLabel">
 <div class="header">
 <p class="title" id="menuLabel">Menu</p>
 <button class="btn-close js-dialog-close" aria-label="Close"></button>
 </div>
 <div class="content">
 <ul class="nav">...</ul>
 </div>
</div>

A position variant is required. .drawer on its own pins nothing: --drawer-start and its siblings have no value until one of the four variants sets them.

Position variants

Class	Edge	Slides from
`.drawer-start`	Inline start, left in a left-to-right document	`translateX(-100%)`
`.drawer-end`	Inline end	`translateX(100%)`
`.drawer-top`	Top	`translateY(-100%)`
`.drawer-bottom`	Bottom	`translateY(100%)`

Each sets three things: which two insets are 0, which two are auto, and the translate the panel animates from.

Dropdown

Mon, 01 Jan 0001 00:00:00 +0000

A contextual menu. Unlike .modal and .drawer, it is not a panel: it is absolutely positioned against its trigger, stays out of the top layer, and has a tighter JavaScript contract because it animates in both directions.

<div class="dropdown">
 <button class="dropdown-toggle js-dropdown-toggle" aria-expanded="false">Label</button>
 <ul class="dropdown-menu">
 <li><a href="#">Item</a></li>
 <li><hr></li>
 <li><a href="#">Item</a></li>
 </ul>
</div>

Three classes, three jobs

Class	Role
`.dropdown`	The positioning context, `inline-flex` and `position: relative`
`.dropdown-toggle`	The trigger, styled: transparent, with a chevron on `::after`
`.dropdown-menu`	The menu panel, absolutely positioned under the trigger

The trigger needs both .dropdown-toggle for the styling and .js-dropdown-toggle for the script. They are separate on purpose, so a trigger can be a .btn, a .btn-share or a plain button and still be found by the same script.

Overlays on Socle

Overview

.modal and .drawer are the same panel

Panel

Structure

Modal

Drawer

Position variants

Dropdown

Three classes, three jobs

`.modal` and `.drawer` are the same panel