Koala logo Design
No matches for “
↑↓ navigate open Esc close
PatternsSettings

Settings

The settings grammar: page → group → rows → row, and nothing else. The call site chooses a row and a control; the primitives own every measure, hairline and margin, which is what stops a settings surface growing competing section styles.

<koala-settings-page>

The nesting

Email delivery

The address Koala sends from, and whether it can send at all.

Sending

Send email to clients

Turn this off and Koala stops emailing clients and contacts entirely. Team notifications keep working.

Sender address

Address

Clients see this on every email Koala sends.

hello@bakerlaw.co.uk

Domain verification

Two of four DNS records are missing, so email may land in spam.

2 missing

Six control slots, and there is no seventh

Toggle

A boolean. Saves on change, so no Save button.

Select

One of a known few. Saves on change.

Value and drill-in

Too big for a row. Opens a tray, never a new page.

4 categories

Status and action

State the system knows, plus the one thing to do about it.

Action needed

Text entry

Commits from the group footer. Never saves on blur.

Footer, for text entry only

Display name

Shown beside the address in the client's inbox.

Only text entry earns a footer. Toggles and selects save on change, so a Save button beside them would be lying about what commits. The presence of a footer is itself the signal that something in this group needs committing.

Disabled is really disabled

Push transactions to Hoowla

New transactions are created in Hoowla as they open.

Default case assignee

Turn on Hoowla to change this.

Workflow IDs

Turn on Hoowla to map workflows.

Not mapped

The control sits in a disabled <fieldset>, so the keyboard is locked out too, and a disabled drill-in renders no link at all. The settings pages this replaces used opacity-60 pointer-events-none, which stopped the mouse and nothing else. A keyboard user could tab in and change a setting the page was telling them was off.

Group actions and empty groups

Document categories

The group a document belongs to. The order here is the order everywhere else.

Enquiry types

An empty group keeps its label, so the setting stays findable.

No enquiry types yet

Add one and it becomes selectable on every new enquiry.

Reorderable rows

Setting sortable-id grows the grip and the data-sortable-* hooks sortable-rows.mjs reads. The row restructures itself so the handle sits outside the link, because a button inside an anchor is not valid HTML. A list that can be reordered stays a list of rows; it does not become a table just to fit a handle in. Keyboard users nudge with the up and down arrows.

Non-row content

Channels available

Some settings are genuinely a grid rather than a list of rows.

Notification In app Email
Quote accepted
Document uploaded

A block takes the same inset a row does, so a group that mixes rows with one matrix keeps a single left edge. Reach for a row first. A block is for content with its own internal structure. A page whose content is a matrix also sets width="Wide", because a grid of toggles is not prose and capping it to a reading measure just pushes its own columns together.

API

title string (page, group, row)
description string? (page, group, row)
value string? (row: the current answer, before the chevron)
href string? (row: makes the whole row a drill-in)
tray bool (row: open href in a side tray)
disabled bool (row: wraps the control in a disabled fieldset)
disabled-because string? (row: replaces the description while disabled)
width StandardWide (page: Wide for a matrix)
sortable-id string? (row: grip handle plus the sortable hooks)
class string? (page, group, rows, row, block: outer spacing only)