This sample shows how Calcite components can be combined into a custom application workflow using component capabilities with CSS and JavaScript to build a cohesive workflow.
Application behavior
This sample simulates an article publishing flow. As users update the form, the preview card updates in real time with the selected author, title, summary, thumbnail, and categories.
The application keeps the fields the user interacts with and the preview synchronized.
Author selection workflow
Rich selection experiences can be created by combining components to create a custom workflow. In this sample, the author selection workflow is built with a combination of List, Popover, and Scrim components.
This sample uses two List components for author selection:
- A destination List Item that displays the current selection.
- A source List in a Popover that contains available authors.
When an author is chosen in the source list, the selected item's content is cloned into the destination item and the preview updates immediately.
The Popover also includes:
- Filtering Chips that offer further refinement of the source list.
- A footer Notice with an invite Action.
To help visually focus this interaction, a Scrim appears while the Popover is open. Clicking the Scrim closes the Popover and returns focus to the invoking item.
Selection can be cleared with an Action slotted into the destination List Item, and focus is managed programmatically to ensure efficient use regardless of input device.
Create categories
Calcite components can be combined to create workflows that are accessible and efficient.
An initial set of categories are displayed with a Chip Group. The parent Block contains slotted Actions and elements that facilitate adding new categories.
- If a duplicate category is entered, the sample shows an Alert instead of silently ignoring the action.
- Adds new categories to the selectable Chip Group, and programmatically adds
closableto allow removal.
Preview card display
As users edit metadata, the preview card stays synchronized through component events and programmatic updates.
Custom styling keeps an "empty state" look until values are provided.
The preview area also includes a thumbnail Swatch selector. Choosing a Swatch updates:
- The Card thumbnail class
- The preview block background color
- The summary background color
Handling edge cases
Preview categories use a custom overflow pattern:
- With 1-3 categories selected, all appear directly on the Card.
- With more than 3 selected, the Card displays the first 2 and an overflow Chip displaying
+2.
The sample also includes guardrails around duplicate category creation. When a user tries to add a category that already exists, an Alert is invoked with descriptive messaging.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes.
At smaller viewport sizes, the preview moves into a floating bottom Sheet and opens with a header preview Action.
Because the preview is now displayed in an ephemeral Sheet, an Action to invoke the Sheet is slotted into the Panel's header-actions-end slot.
Accessible behavior
Accessible experiences depend on thoughtful design choices and intentional management of focus. The sample includes keyboard-oriented behaviors to facilitate efficient and predictable interactions. Efficient keyboard support benefits all users, not just those who rely on assistive technologies.
The Popover provides focused author selection, and clearing the chosen author returns focus to the invoking list item.
The quick-add category flow is optimized for keyboard use, where:
- Opening the workflow moves focus directly to the revealed input.
- Pressing
Enterconfirms the new category. - Pressing
Escapecancels the workflow. - Tabbing backward from the input or forward from "Cancel" closes the inline editor so users can keep moving through the form.
These interactions keep the experience efficient and predictable for keyboard users.