💥Breaking Change - Angular V.16 - React V.18​

This new Triton release is to match the new Angular and React versions. There are no other breaking changes in this release.

New Component - Segmented Control 🎫​

The new component Segmented Control is now live. Similar to the Triton Tab, the segmented control consists of one connected button group where the user can activate a single button at a time. This can be used to let the user switch between different states. Where a tab is more limited, the Segmented Control is a more flexible component.

New Feature for Numeric Input: Arrows 🔽🔼​

The Triton Input component now has a new feature. When using type as "number", the input field will now have the web standard up and down arrows, to increment and decrement the number. Previously, to increment or decrement, the user could only use the arrow keys, and there was no visual indication that this could be done.

Bugfixes 🐛​

• Wrong docs for error and error-text in DatePicker
• Missing wells icons
• Modal custom height not able to append height property to slot element
• Not able to tab in select component
• Date Picker that's both Required and Disabled gets red border
• Size does not work for Tab, Tab Item
• Name not exposed in date picker
• Dynamic rendering of modal-close btn messes with background
• Separator on date picker invoke error when date is not range

💥Breaking Change - Triton Radio: Minor Event Change 📻​

Triton Radio - Updated styling and event calling

• breaking changes: atChange event removed due to redundancy

List Component 📃​

With its intuitive and versatile nature, the List component provides a structured and visually appealing way to present information in a hierarchical or sequential format. Whether you need to display a simple bullet list or a complex nested structure, the List component has got you covered.

Accordion Component 🔽​

Introducing the highly anticipated Accordion component to Triton's ever-expanding arsenal of UI elements! The Accordion component offers an elegant and space-efficient solution for displaying expandable and collapsible content sections, providing users with a seamless way to access additional information while keeping the interface clean and organized

Lint Rules 📐​

There's also a new improvement to our development process: an updated set of lint rules in Triton! These rules act as an invaluable tool for our contributors, ensuring code consistency, adherence to best practices, and improved code quality throughout the project. With the revised lint rules, contributors can now easily identify and rectify potential issues, such as code formatting discrepancies, unused variables, and common coding pitfalls. By enforcing these rules, we aim to streamline the development workflow, enhance collaboration, and ultimately deliver higher-quality code.

Design Documentation 🔲​

We are pleased to announce the first of many significant improvements to our design documentation in Triton. The updated documentation offers a comprehensive and concise resource for designers and developers, providing guidelines, UI specifications, and best practices to facilitate the use of Triton in our designs. The new design documentation does not only empower designers to deliver visually appealing and user-friendly interfaces, but also helps developers collaborate and understand the underlying principles and guidelines, which will lead to a better implementation.

Note that the design documentation is a work in progress, so any feedback on this would be very welcome!

Bugfixes 🐛​

• Table docs code block does not render
• Switching between Date and Time-picker options changes how the selected date is highlighted
• Button href property is not connected to the component
• Select multiple will select all available items when only one is chosen
• Date picker with range. Not able to update start date when start and end is selected
• Date Picker widget closes when date is selected and arrows are clicked (to swap year)
• Radio buttons are stretched when label spans multiple lines
• Time/Date picker with time is not able to disabled invalid time when max and min is in use

New Core Component: Color Picker 🟥🟦🟩​

A new, excellent contribution to Triton is now available, the Triton Color Picker! The color picker is based on the basic web-standard color picker. It allows a user to select a color using a color-picker widget. This Contribution comes to us from Stefan Slavev, who has been doing great work in implementing the component. Contributions like these make Triton what it is today, and we would like to take a moment to thank all our contributors for their amazing efforts.

Morten has also been reviewing Color picker, and adapting it to the Triton universe, so it matches norms and expectations.

New Core Component: Gap ↔🚋​

Another new component, the Triton Gap is a simple component that helps users arange objects on a webpage. Triton Gap can be wrapped around other components, simply to add more space between the wrapped components. This component is quite simple, and we hope that such a small support component will be useful in many different scenarios.

Slider Improvements 🎚​

The slider now works with the Angular value accessors. This will allow the use of Form module, as well as Angular's form-specific functionality. The Slider now also supports a requested feature, where dragging the slider itself will move the whole selected area, which can be done instead of just moving the start and end points.

Chevron in Window 🔼🔽​

The Icon used in window component is has been switched from the + and - icons to the chevron icons 🔼 and 🔽. The aim of this change is to make the of the window component more readable, and thus easier to use.

Bug Fixes 🐛​

Several new bugfixes have been deployed. The current bugs being worked on, and a list of completed bugs can be viewed on our Kanban Board. Some of the bugs fixed in this version:

• Dropdown in select is not rendered after toggled inside ng-content for Angular
• Map preview icon is missing
• When opening/closing the tooltip quickly a tooltip may be permanently closed/open
• Range Slider does not get initial values correctly
• Slider does not re-render on value change
• Outdated docs on pagination component
• Dropdown position: Handle no space above and below
• Select item icons render above the item instead of next to it
• Label of color picker runs out of space
• and more

New Core Component: Window 🔲​

A new component has been released, the Triton Window, a drag and droppable subwindow component, similar to a modal, that can be filled with content, minimized and customized. This component is excellently suited to handle small overlay panels used to configure stuff in your application.

Button Group Vertical Alignment ↕​

A new feature has been added to the Triton Button Group, it can now be vertically aligned by setting the value vertical in the orientation property.

Bug Fixes 🐛​

As usual, plenty of bug fixes have been added to the release. The current bugs being worked on, and the log of completed bugs can be observed on our Kanban Board.

Angular 1️⃣4️⃣​

This release is mainly a version bump of Angular to v14.

Other featrures​

Spacing Documentation 🌌​

We have updated the documentation for spacing, to give an overview of the sizes and their usage in the app.

New Features in 2.1​

version 2.1 has new features and lots of bug fixes

Common Package 📦​

We have a brand new package, the common package. This package contains components that are not part of the core web experience, yet they are generic enough to be used in any project. In this release we have added 3 new components, which are appear inside the layout folder:

• Triton Common Header
• Triton Common Sidebar
• Triton Common Layout

These components can be used to define the layout of an application, and give basic tools for navigation. There are plans to iterate further on these components

The Common package depends on the core package, and is shipped with the Angular and React installations of Triton.

The Common package will be included as part of the install bundle, however if the package is not used, it will not be part of the build, so there is no need to worry about bundle sizes increasing with this new package.

Check it out!

Map Component 🗺​

A new core component has been added to the library, the Map component. We are very excited to see this new addition, because it has been created by an external contributor, our great colleague Daniel Kostov. This is the first component that has been created solely from an external contributor, it serves as living proof that Triton is a collaborative project, which allows developers from different teams to share code and contribute across projects. Future contributions are strongly encouraged, and we are there to help and support anyone who wants to contribute to Triton.

Check it out!

Multi Select 🔡​

The Select component now has the feature of multi select, which, when enabled, allows users to select multiple items simultaneously. To explore this feature, check out the select component, under core.

Date Picker Range 📅​

The Date Picker now allows users to pick a range from one date to another. This new property allows more configurations to users of the date picker. Check it out!

Documentation Page Overhaul 📄​

The Triton homepage is in a constant state of improvement. With the new update we have added a more compelling overview of components, documentation of the foundation of Triton - the Triton Design System, and overall improved the usability of the docs based on feedback from the users of Triton.

Fixes 🎈​

There are also lots of smaller improvements: bugfixes, tweaks, minor changes and other improvements are pushed constantly. Through collaboration with you, the users of Triton, we find and solve bugsm together, and make improvements to serve the needs of various projects. The collaboration so far is a great start, and we want to keep building on it, with new contributions. Thanks to all our users for the great collaboration, let's grow this commnity together!

Other News​

PNext Integration 🧜‍♂️🅿⏭​

Poseidon Next now ships with Triton 2. This means that new VI projects will be able to use Triton out of the box, even without installing a single package. Thanks to the PNext team for the good, continued collaboration.

Triton Usage 🔱​

Throughout the recent months, more projects have started using Triton, and we are getting user feedback, bug reports, and contributions. If you are a user of Triton, please get in touch with us! We want to know about you. You can reach out to me directly on Teams.

Differences from v1 to v2​

These are some of the key differences between Triton v1 and v2

Component Library​

Triton is no longer just a design system. We now ship a framework agnostic component library - as an npm package deployed to JFrog. Using Triton v2 components is therefore much quicker and easier! Go here to get started using it! Poseidon Next will also integrate Triton v2, so any PNext app can use the new components with no setup needed.

Theme​

Colors are now handled using CSS properties, which change with theme. This improves performance significantly.

Icons​

Icon is now a component, so Triton v2 handles the assets internally. There is no longe any need to import svg files for icons.

Colors​

The color scheme has been updated, and looks much better.

New Components​

New components have been added, and components from v1 have been completely recreated. They are more flexibile and perform better. Here is a full overview of triton components.

Changelog:​

. . .