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:
The elements that utilize a popover menu (Select, Dropdown, Calendar, Pill with options, Tag with options) have had their internal logic updated to improve performance and reliability across various browsers and devices. This update addresses several issues with visual collisions, virtual keyboards, and screen orientation. Some notable changes for mobile devices include:
searchable
Select:
The Input component now properly returns boolean values from its checkValidity()
method and the validity
property, improving form validation reliability. The Currency component has been expanded with new colorization and formatting options, providing developers greater flexibility in displaying financial data with appropriate visual emphasis. We've resolved several critical issues with the Select component, including improved mobile device compatibility and better handling of multiline content mutations that could previously cause display problems. The Checkbox component now maintains consistent positioning and emphasis when checked, eliminating the visual shift that occurred due to font-weight changes. Additionally, backdrop-filter CSS properties have been exposed to supporting elements, enabling advanced visual effects and improved design capabilities across the component library.
Several accessibility enhancements have been implemented to ensure better screen reader compatibility and keyboard navigation. Tab navigation has been refined to prevent users from getting stuck in the Calendar form field. The Checkbox component has been updated to resolve issues with multiple labels being associated with single elements, ensuring clearer accessibility markup.
Our documentation has been enhanced with direct links to React events guidance within component pages, making it easier for developers to understand event handling best practices. The navigateTo()
capability documentation has been expanded to include a new helper method available at the platform level: getUUXRouteInfo()
(NOTE: only available with UUX 4.6.1.10). This helper method provides developers better tooling for configuring their navigateTo()
calls in UUX. We've also addressed localization functionality to ensure proper combining of default strings with custom language overrides.