Quanta

[sneridagh]

PLIP (Plone Improvement Proposal)

Responsible Persons

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

Seconder: Albert Casado Celma (@albertcasado) / Timo Stollenwerk (@tisto)

Abstract

Implement in Plone Volto the Plone's Design System (aka Quanta). Improve the Theming story by providing separation of concerns between Public Theme and CMSUI.

Quanta mainly represents these common look and feel and UX that the CMSUI should have.

Figma mockups

https://www.figma.com/file/lWRIiKmcy1kMRl1DgLkCSL/Quanta?t=pyh04lHU2vmBer8g-6
https://www.figma.com/file/YpaRSKjFcFaAkVYnTSVGuz/Volto-UI-%E2%80%93-Quanta?t=pyh04lHU2vmBer8g-6

Plone Conference 2021 Talk

https://www.youtube.com/watch?v=fvTMw36YT6A

Slides

https://www.slideshare.net/sneridagh/meet-quanta-plones-style-guide

Motivation

It's been a while since Albert Casado created Quanta specifically for Volto. Some small parts and ideas where already implemented, but the main bulk of the design is yet to be done. It has been decided since then that Quanta will be next Plone's design system and it should be implemented.

At the same time, there is a long requested feature that is the re-think of the whole Plone Volto theming system. It is desired to have complete separation of concerns between the public theme and the Volto CMSUI itself. Also, do not rely on any specific design system in the public part. By doing this, we will enable the possibility to use any design system or CSS framework of the election of the integrator/themer independent from the one used in the CMSUI.

Assumptions

During these years, we have worked in providing all the bits and pieces that will make this happen in a sane and pluggable way. If possible, to ease the transition, themes still developed with the current Volto design system (Pastanaga over SemanticUI) should be still possible. The CMSUI will have to migrate to Quanta once in place.

Proposal & Implementation

Provided as a Volto core package, see the PoC in:

#3877

Making heavy use of the Volto Component Registry, one can implement Quanta in the top of the current Volto. Could be that at some point, and specially when introducing the separation public theme/CMSUI could be that this will be no longer possible.

CSS frameworks and preprocessors

Quanta won't make use of any existing design system nor CSS framework. This will help to keep it simple and not bloated with unneeded/unused styling. Nowadays, the maintained/trendy React Design Systems in the wild offer is quite large. All of them use some kind of CSS-in-JS solution that you should drag to your implementations. While CSS-in-JS can be quite handy and useful in the single-app-styling scenario, in the CMS theming scenario is horrible. In this scenario nothing can beat the CSS cascade.

We will use SCSS as preprocessor, since LESS days seem to be over and the project is kind of stuck and unmaintained.

Default public theme strategy

Volto will abandon SemanticUI as default design component system. We will achieve that by not using any SemanticUI component, nor any related styling (.ui.XXX) in the public theme. The default public theme will use Quanta design system basic and structural components, and the rest will be implemented in plain SCSS.

The Volto public theme strategy is:

• The theming could be done using Quanta basic and structural components or dropping in the component system of the developer/integrator choice. The presence of Volto's component registry system could help for integrating/extending/adapting, if required.
• The Quanta CMSUI will be isolated from the theming because it will be extremely CSS specific, so leaks from public theming from/to the CMSUI won't happen.

CMSUI (Quanta) strategy

The Quanta strategy is:

• Provide a set of fundamental components (included in @plone/components) to build upon Volto's CMSUI and the default public theme as well.
• These components will be based in a headless component system. The best positioned right now is react-aria-components.
• The CMSUI components will be build using Quanta's fundamental components.
• A default theme will be provided as well, using reusable components included in @plone/components)
• Evaluate if using SCSS-modules for styling isolation is an option.
• The theming story should provide a way to selectively load only the required CSS when it applies and it's needed. Ideally, the CSS from the CMSUI will only be loaded when the user is logged-in, except for the common @plone/components fundamental components.

Deliverables

• Quanta Design System implementation
  • the fundamentals
  • the CMSUI
  • the default theme
• Built on the @plone/components - Framework agnostic ReactJS CMS components #4352 PLIP, the @plone/components npm package, and as a Volto core add-on.
• New separation of concerns public/CMSUI machinery
• The machinery for customising the default theme and Quanta
• The machinery required to put in place a complete different design and components system and make it work with Quanta CMSUI
• Remove SemanticUI from Volto core
• New add-on with the original Pastanaga/SemanticUI theme, so existing themes could build upon.

Documentation

• Update how to theme a Volto site
• Update how to customize a Volto site
• Best practices

StoryBook

• Write StoryBook stories for all new components

Fundamental components

• Container
• Grid
• Button
• Accordion
• Tooltip
• PopUp
• Inputs
• Selects
• Widgets in display mode
• Widgets in edit mode (a selection of them to be used in forms? TBD)

CMSUI components

• Toolbar
• Sidebar
• Widgets
• Add/Edit form
• AddLinkWidget
• BlockChooser

Public theme components

• Header
• Footer
• Breadcrumbs
• Sections / Fat Menu
• AnonTools
• Comments
• LanguageSelector
• Pagination
• Login

Risks

Existing themes (especially if they have customized the CMSUI parts) will be affected, and will have to adapt/migrate to the new theming system. Since SemanticUI will become just a design system that you could drop in for public theming, providing your own customizations or using the add-on theme with the original PastanagaUI components should be still possible with low effort.

Participants

Víctor Fernández de Alba (@sneridagh)
Timo Stollenwerk (@tisto)
Volto Team (@plone/volto-team)
Anybody that is willing to help with will be welcomed.

[stevepiercy]

Where does documentation fit into this PLIP?

• How would a developer upgrade an existing site to use Quanta?
• How would a developer customize Quanta?
• Will the theme customization story change, and if so, what would developers do differently?

Also for reference, I found this Quanta Storybook: https://quanta.pastanaga.io/

[sneridagh]

@stevepiercy added the new deliverables.

[sneridagh]

@plone/components -> https://github.com/plone/components