Once UI 1.2 - 🌀 Elastic slots are here

Introduction

We are thrilled to announce the release of Once UI 1.2! This update primarily focuses on the introduction of our groundbreaking slot management system called Elastic slots. This innovative feature is designed to make your workflow more streamlined and faster than ever before. In this blog post, we will explore the key changes in version 1.2, with a special emphasis on Elastic slots, as well as improvements to the Pattern library and the Knowledge base.

Global changes

To make version 1.1's new Text color styles more versatile, we have renamed them to "Adaptive" styles. This change reflects the fact that adaptive styles can be applied to other graphic elements as well, allowing you to easily swap between light and dark modes.

We've added preferred values to every component that contains a slot, streamlining your design process even further.

Pattern library

In version 1.2, we have incorporated new slot variations and a revolutionary layout technique named "Elastic slots". This method allows you to work with slotted components without the need to detach them or employ a content component to replace the initial slot.

The Elastic slot method is highly effective for basic layout structures, but it's essential to be aware of its limitations. One significant constraint stems from Figma's component functionality: you cannot nest the same component within itself. This means that you cannot reuse a vertical x2 slot inside another vertical x2 slot even if it's not the direct ascendant.

To work around this limitation, you can swap it to x3 and hide one row or create another copy of the newly introduced slots. However, these strategies lead to a more complex structure and are not recommended.

Learn more about Elastic slots in the Once UI documentation

arrow_right_alt

We've enhanced the Table component in version 1.2 by integrating the new slots, which improves its flexibility and adaptability. You can now set the number of columns on the mt-32evel component and configure the number of rows for each column element.

The Options component has also been updated to use the new slots, ensuring a smooth configuration process.

We've added a new Text component that allows you to swap a slot to a text, which is an essential component when using the new Elastic slot method.

Knowledge base

To make it easier for you to stay informed about updates, we've created a more transparent change log. Now, you can view earlier updates as well, sorted by version. This way, you can always stay on top of the latest improvements and modifications.

View the new Change log in the documentation

arrow_right_alt

To help you make the most of our new slot functionality, we've added a dedicated page to explain how both standard and elastic slot mechanics work. This comprehensive guide will enable you to harness the full potential of slots in your designs.

Learn more about Elastic slots in the Once UI documentation

arrow_right_alt

Conclusion

At Once UI, our top priority is providing an exceptional design and developer experience while fostering smooth collaboration between different departments. The two key features introduced in this release, Elastic slots and Change log, serve to enhance these experiences.

Elastic slots empower designers to work more efficiently, while the added transparency of the Change log improves the developer experience. Together, these updates reinforce our commitment to delivering an outstanding user experience for all.