Welcome to Tecton

Tecton is Q2's library of design system components and platform interface capabilities. It allows Q2 and our partners to build cohesive and consistent UI experiences for end users across a variety of Q2 products.

Tecton consists of:

We're excited to see what you'll build! To get started, feel free to check out some of the following links:


Tecton 1.66.0

New Components and Major Additions

Card Image Documentation:

The Card Image component now has a dedicated documentation page with full content and side navigation, making it easier for developers to discover and implement image-based card layouts.

Component Features, Improvements, and Bug Fixes

Dropdown and Select Enhancements:

The Dropdown component now supports top and bottom slots, giving developers more flexibility in customizing dropdown content layout. The Select component resolves an issue where the selected option was incorrectly cleared when search text was removed, and an iOS-specific bug where the AutoFill indicator appeared unexpectedly has been fixed. The Option component now correctly renders at full width when using the separator property. Additionally, the optgroup styling has been updated for a more polished appearance, and a Safari-specific issue where dropdown buttons lost focus has been resolved.

Checkbox and Radio Improvements:

The Checkbox component receives a visual upgrade with a new checking animation and corrected background color styling. A click event issue that could cause unintended behavior has also been resolved. Both Radio and Checkbox components now support additional theme options, providing greater flexibility for visual customization across different design contexts.

Link and Action Group Updates:

The Link component now supports text ellipsis for gracefully handling overflow in constrained layouts, and its default link behavior has been updated. The Action Group component gains support for even spacing in Q2 Config content blocks and now allows Tooltip components to be used within action groups. Various improvements have also been made to how Link and Action Group components interact together.

Data Table, Pagination, and Item Updates:

The Data Table checkbox positioning is now customizable, giving developers more control over row selection layouts. The Pagination component fixes an issue where navigating to the previous page could cause the component to disappear. The Item component has updated slot names for improved clarity and consistency.

Input and Loading Fixes:

The Input component now strips non-digit characters from pasted phone input to prevent incorrect formatting. The Loading component validates the customLoaderURL property against CSS keywords and restricts values to absolute URLs for improved security, and a Safari zoom rendering issue with the loading spinner has been fixed.

Theming and Icons:

Additional CSS custom properties have been added to support the Default theme, expanding the theming surface area for developers. New icons have been added to the icon library, and SVG markup has been cleaned up for consistency.

Developer Experience:

Components now warn developers when they are being misused, providing helpful console messages that guide correct usage patterns and reduce debugging time.

Capability Updates

requestExtensionData Fix:

The requestExtensionData() capability now auto-corrects pre-serialized string bodies, resolving an issue where double-serialized payloads could cause unexpected behavior in extension data requests.

Platform Updates

The platform adapter's URL resolution logic has been improved by moving relative URL resolution from adaptConfig to the buildIframeURL method, ensuring more reliable iframe URL construction. The unused allowOverride property has been removed from the IDeclaredTab interface, simplifying the tab declaration API.

View full changelog