PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba (@sneridagh)

Seconder: Piero Nicolli (@pnicolli)

Abstract

Volto uses since its inception SemanticUI as a component and CSS framework to build PastanagaUI, the Volto current design system. PastanagaUI currently powers both the public part and the CMSUI (the non-public content editing interface).

SemanticUI is unmantained and abandoned since some years ago, which creates a huge technical debt in a critical part of the CMS. Its footprint is also not acceptable for current modern frontend applications leading to big bundles and performance issues.

We will remove Semantic UI from Volto in two chunks, since it's a big effort. We believe that it's more valuable to remove it before from the CMSUI first, then finalize the complete removal of Volto in this PLIP: #6323 By doing this, we could have projects completely SemanticUI free once this PR is completed.

This PLIP is not about implementing Quanta design system in Volto CMSUI. This does not mean that, in the journey to implement this PLIP, we don't adopt some of the styling in Quanta in the new components. In any case, this must not be a blocker for this PLIP to happen.

Implementation directives

This PLIP is targeted to Plone 7. The main goal is to get rid of Semantic UI powered components in the CMSUI.

It is expected to be a long lived branch, and we probably will want some of the changes already available for the API-first story, let's make some assumptions and rules.

All Semantic UI basic, fundamental components should be replaced by their counterparts in @plone/components. Every time that we find missing components, we should create them in @plone/components and use them in Volto components.
These components will follow the @plone/components best practices, including being written in TypeScript, have accessibility tests, and have a Storybook story.

We'd like to have these new components out of this PR and used right away, so let's make all the commits around them as atomic as possible so we can cherry pick them safely and push for them in the main branch.

Every new component used in the CMSUI will be transfered from Volto core to the package @plone/cmsui. By doing so, we will keep track of every new "clean" component, and potentially—being able to extract them when we want—we can use them in "real" life right away. It will help also to avoid merging hell.

When this PLIP is done, the src/components/manage folder should be empty (or almost empty). Code in Volto will remain references and imports to the @plone/cmsui package.

Once we start, only meaningful changes in main in CMSUI components will be backported, again to avoid merging hell.

Deliverables

• @plone/cmsui package
• @plone/components package

The CMSUI Volto components won’t use SemanticUI and it will be replaced by @plone/components components instead.
Every new component used in the CMSUI will be transfered from Volto core to the package @plone/cmsui.

The removal must be compatible with the changes introduced in the new theme and theming story by:

• New Theming System #6322
• Improve block style preview in edit mode (Block Model 3) #6316

Documentation on:

• How to use @plone/components along with its StoryBook
• How to use @plone/cmsui.

Risks

This PLIP will break all customizations in CMSUI widgets (including form components), so we will need proper documentation on what we are breaking and how to overcome it.

Eventually, one option would be to create a side add-on that contains the old SemanticUI-based components so people can pull it and force it again. However, it is unlikely that someone would want to go backwards with this change. The CMSUI is something that you barely customize and if so, you will go forwards instead of backwards.

Participants

Víctor Fernández de Alba (@sneridagh)