Hello everyone,
We have some exciting news to share about the improvements we’ve been making to our OutSystems Applications. As part of our ongoing efforts to enhance user experience and developer efficiency, we are expanding our iconography options. To achieve this, we are releasing native support for Phosphor 2.0 in OutSystems Developer Cloud (ODC) alongside the existing FontAwesome 4.0 set.
Why Are We Making this Change
The introduction of this library involves these key decisions:
What This Means for You
✨ Modern App Aesthetics: Instantly refresh the look and feel of your enterprise applications with a world-class, consistent icon library designed for modern interfaces.
⚡ Developer Efficiency: This change streamlines the design process by providing a rich, multi-style icon set directly within the IDE, eliminating the need for external assets.
🚀 High-Performance UI: The library delivers a premium visual experience with negligible impact on page load times, ensuring high-quality design remains performant.
How Can You Make This Transition Smoothly
We designed this release to be additive and non-disruptive, allowing you to prepare your design system to use the new icon when you choose to. New applications will have the new icon library set as default.
Prerequisites
To ensure access to the new Phosphor 2.0 library, please ensure:
→ Update Dependencies
Please make sure you update OutSystems UI to version 2.28.0 or newer.
→ Update your ODC Studio
Ensure that you are using version 1.7.3 of ODC or newer.
Fix any incompatible class names on changing icon set
The introduction of Phosphor 2.0 requires the use of the ph class prefix. However, because ODC apps already utilized ph as a reserved internal class for empty placeholders, we have renamed the class to placeholder-empty to avoid conflicts. More about placeholders here.
To ensure a smooth transition and avoid styling conflicts, please follow these guidelines:→ Manual Stylesheet Review:
If you have custom CSS targeting ph to style your application, you must manually update those selectors to avoid conflicts. We suggest you check the Phosphor GitHub repository documentation before adapting this icon set.→ Automatic Rename:
Once your application is updated to OSUI 2.28.0 and published, ODC Studio will automatically convert the reserved ph class on placeholders to placeholder-empty the next time the application is opened.
Key Takeaways
For more information please check out product documentation.
Thank you for your continued support, and trust in our product.
Best regards,
Rita
Although it says that it affects elements with the “ph” class, I don't think the choice of name was the best one.
In the documentation and even in the frontend paths, the “ph” class is referred to as being “reserved” for placeholders to switch to `display: none` when they have no content. CSS
Hi Luis,
You are correct. Until this library was introduced, we used ph as a reserved class for the placeholders. With the Phosphor icon library, these two became incompatible. To resolve this, we renamed the ph class to placeholder-empty, hence the need to use version 2.28.0 of OutSystems UI.
Once your application is updated to use OSUI 2.28.0, you can publish it. The next time the application is opened, ODC Studio will automatically convert the ph class on placeholders to placeholder-empty.
thanks @Rita Tinoco for sharing
Thanks @Rita Tinoco, anything dealing with the look and feel of our enterprise grade application should be suppoerted.Once again keep the momentum.
This feature adds great value to the product. Well done!
I've tried them today, and it is really good. Thanks for sharing the updates
Thanks for sharing the valuable information @Rita Tinoco
I'm very happy with this new update. Normally, in my projects, we must skip the OS icon and use SVG downloaded from Figma. I think this new update will be a good option for end users.