Tutorial: Adopting the new UI style for Extension Libraries
Review New UI Adoption Info for recommendations and more details.
The new CET UI has introduced new features and a new look for component tab libraries, helping you to achieve a more consistent look and feel while organizing your content or products in a more logical way. These features can be enabled by setting the facelift parameter to true when creating the Library.
Here's an example of how to migrate an old extension library to the new Facelift style, using the Fika Office extension.
For the sake of simplicity, we will not be using any of the new advanced features, and no icons will be updated. To see how to use those new features, refer to Components Area (Toolbox) and Content Layout of a Component Tab.
Pass facelift=true in the CompanyLibrary constructor:
Setting this flag causes the following to happen:
- Left/right margins are set to 16px.
- Sections use the new style with inline button support.
- Buttons will use a white background with a blue border on hover.
After this change, the Fika extension library now looks like this:
The old header at the top is quite large, and scrolls along with the rest of the toolbox contents. Let's replace this with the new header introduced in Facelift:
Which now gets us the new static library header:
As you can see from the previous image, the scheme selector is a bit squashed. To fix this, we will use the new Facelift scheme selector, as well as tweaks to the spacing:
In order to follow the concepts introduced in Spacing & Layout, getDimFromColumns is a helper function to convert the abstract concept of "columns" to an actual number of pixels. Both buttons are set to the same size to improve the sense of consistency. Now the Global section looks like this:
If this was a real port of Fika Office to Facelift, we would take this opportunity to change the icons to something more modern as well.
Following the process outlined in the previous step, set all the snapper and animation buttons to the same size, which results in the following:
To help with this process, a hint can be added to the root element, which will propagate to all the child limbs:
This will result in all buttons that do not have a hint to default to the size of 40x40.
The last step is to replace any checkboxes in the toolbox with the new Toggles (refer to the linked page to see when to use it).
Which finally results in this: