Update Figma library to use new Slots functionality

[mrosvik]

Figma has introduced Slots, which allow designers to add custom layers inside component instances without detaching them. This removes previous limitations where we had to include our own slot components to work around this.

We should update our Figma component library to take advantage of Slots, ensuring:

• Components support adding content in instances where appropriate
• Slot types and accepted instances are clearly defined
• Improved usability and reduced need to detach components

[Moimoto]

It may be worth considering the removal of hidden layers and boolean properties in components like Details (second, third, fourth, and fifth properties), since duplicating components will soon be an easy way to add more instances.”

[Camulos]

Test

As part of this test I also looked at issues in the backlog for the tested component, found a suggestion for different design for active tab #2367. I have done this test and included the possibility for those changes.

Tabs with slot

Figma

Slot functionality to set number of tabs.

• base-component: has the variants for default, hover, bookmarklet-active and underlined-active
• main-component: has included two instances of the base-component in a slot.
• tabs are wrapped by "underline-before" and "underline-after" these can be set to a size-variable or if both are set to fill then the tabs will be centered, if one is set to fill and the other is set to a size-variable then the tabs will be aligned to one side. These can also be set to size/0 or be removed.
• in between the tabs there is a spacer "underline-between" with underline set to size/1, when adding more tabs the user can copy the last tab together with the spacer. If they do not want the spacer it can be set to size/0 or be removed.

Code

The style of active tab should be fully possible only by changing the border of the tab as in Figma. The bottom border set on the list item i code will interfere with the bookmarklet style of active tab?

Suggested conclusion for Tabs

If no changes is done to the style of active tab, this is very easy, but even if changes are done to the active-tab it is not very much more that needs to be done in figma, but it will trigger the need to do some changes in code (styling), and if both variants is to be supported at the same time, there need to be a method to select one in code?