Panels · Orbex Sonar-DB Design System

By device

Phones: a bottom sheet with a handle, from under the top bar and with no scrim. Swipe it down from the handle or the header, use ×, or press Escape to close it.
Tablets: a side sheet from the right, 402 px, under the top bar and with no scrim, as Navigation by device defines it. It slides in from the right edge, all the way, on the default spatial spring, and slides back out the same way.
Desktops: a side sheet from the right, under the top bar and with no scrim, as in the product. It comes in 48 px from the right as it fades in, and leaves the same way, faster.
The overview stays in view beside a side sheet, and the row a panel came from stays marked. With reduced motion requested, panels fade without moving.

Opens from: New order in the Orders card, and a search for an order that does not exist yet.

Header: “New order”, “Create a new purchase order.” and ×.
Body: One line per product: the product, its quantity in the card’s unit and, from two lines on, a red ring to take it out; Add product; the delivery month and a reference.
Actions: The total, Cancel and Create order. Create order leads to Confirm order, with Back, Cancel and Confirm order, then to Order placed with Continue.

Closing it with changes asks first: “Discard this order?”, with Keep editing and Discard.

Opens from: Reorder in the Recurring orders card, with the favorites chosen in it.

Header: “Confirm reorder”, “Review your recurring order. Quantities are the ones you used last time.” and ×. It starts at the review: the products arrive ready.
Body: Each product with its packaging and quantity, then the delivery date, the total, where it goes and a reference.
Actions: Cancel and Confirm reorder, then Reorder placed with Continue.

Opens from: View on an invoice in the Balance card’s payment calendar.

Header: “Invoice details”, then the invoice’s code, status, amount and due date, and ×.
Body: Invoice info (customer, dates, payment terms, PO number, payment method and currency), its line items and its payment history.
Actions: Go to Balance and Download PDF.

Opens from: Open order on a row of the Scheduled orders card. The row stays marked while the panel is open.

Header: “Order details”, then the order’s code, status, items, quantity and delivery day, and ×.
Body: Order info (customer, PO number, order and delivery dates, delivery window and where it ships), its items and its schedule.
Actions: Go to Scheduled orders.

Opens from: View on a delivery in the Deliveries card’s calendar, and Open delivery on an alert in the Notifications card.

Header: “Delivery details”, then the delivery’s code, status, items, quantity and date, and ×.
Body: The route map with where it is now, its last stop and its destination, then its itinerary, step by step.
Actions: Go to Deliveries.

Opens from: The bell in the top bar on desktops and tablets, What’s new in the bottom app bar on phones.

Header: “What’s new”, how many are unread with Mark all as read, and ×.
Body: The product’s notes on what changed, newest first. Unread ones carry a ring and a red dot; each links to the improvement and can be marked as read.
Actions: View update history.

Each panel is a dialog named by its title; its first line is its description.
Opening one moves focus into it. Tab and Shift+Tab stay inside it, Escape or × closes it, and focus goes back to what opened it.
On phones the page behind a sheet is inert, so a screen reader stays in the sheet.
What opens a panel reports it with aria-expanded; pressing it again closes the panel.