When editing a Fragment, I want to customize every style on a per-viewport basis

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Fragment Administration, Pages > Page Editor
• Labels:
  • d_22_02
  • d_22_03
  • d_22_04
  • fc_22_04
  • fc_22_05
  • fc_22_06
  • now
• Epic Link: Custom styling options for Common Styles for better custom fragments integration
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/7937

Intro/Context

Nowadays, mobile-first approach has become the rule when designing multi-channel experiences. In 2021, 56% of the internet traffic happened from Mobile devices. In B2B, this percentage is as high as 50%.

Consequently, it becomes a must to provide our clients with all the available options to adapt their web experiences to mobile terminals.  

In addition to this, now that we have implemented the common styles application into classes, it becomes quite easy to provide full responsive capabilities to all the styles present in the Common Styles editor.

The main scope of this epic is to provide mobile styling capabilities so that the effort to customize the look & feel for viewports other than desktop is minimized.

Requirements

• The following options will be now available for all viewports:
  • General: the section that affects only the "Frame" of the Fragment.
  • Styling: all elements except background image, that is already using adaptive media to change the image resolution in several viewports
  • Advanced: Custom CSS (pending)
• The different styling options per viewport must be applied by adding the corresponding fragment classes to the corresponding media query section of the generated CSS.
• [this will be done when redesigning the components, the new design already has the "clear" button integrated] Provide a "Clear to default" (other potential copies: "clear values", "reset to default", etc) button, at a viewport level (one button per tab per viewport), that resets all the element values of the tab to their default values (" " or whatever it is). On values inheritance:
  • We will NOT FORCE any type of inheritance per viewport. The default behavior will be "Desktop first". 
• If I save a composition containing a fragment with different style values, values in all viewports must be saved.

Design

Acceptance criteria

TBD

Test Scenarios

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)	Could it be covered by POSHI?
The page editor could customize styles on non-desktop viewports	Critial	Manual	No	No	Yes
The page editor cannot change background image on non-desktop viewports	High	Manual	No	No	Yes
The saved fragment composition should persist styles defined on all viewports	Critial	Manual	No	Yes	Yes
The page editor only could clear color picker selection defined on current non-desktop viewport	High	Manual	No	No	Yes