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:
This release introduces powerful new layout components and accessibility improvements across the design system.
We've developed two comprehensive Grid System components - Grid and Grid Area. These new components provide developers with a powerful foundation for building complex interfaces. These new components offer developers a streamlined way to utilize CSS Grid within various parts of their application, making it easier than ever to create responsive layouts that work across all screen sizes.
The Form component provides a similar utility for common form-related workflows by applying uniform vertical spacing between elements that is also configurable via a simple property.
The recently released File Picker component has received a fresh coat of polish to improve both functionality and user experience. Key improvements include custom file upload failure messages that provide clearer feedback to users, a new "buttonSize" property for custom button sizing, and improved minimum and maximum width settings for the drop zone area. These enhancements make file management more intuitive and provide developers with greater control over the component's appearance and behavior.
We've made important accessibility improvements including better announcements of the Stepper component's selected states, ensuring compliance with WCAG guidelines. Some Icons provided by Tecton now uses a default stroke weight of 2 pixels for improved visual consistency, while the Avatar component has been updated to resolve height issues affected by typography settings. The Data Table component now features improved touch area sizing for better mobile interaction, and we've resolved Dropdown menu positioning issues to ensure proper display across mobile devices. Additionally, the Select component's live example now demonstrates best practices using the Item component.