Adjustments to fragment color styles in the Page Editor

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4.3.5 CE GA5, 7.4.13 DXP U1, Master
• Component/s: Pages > Page Editor
• Labels:
  • d_21_10
  • fc_21_10
  • pt-app-security-review
• Epic Link: Optimized usage of token references for avoiding inconsistent designs
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/6097

Intro/Context:

The color picker is proposing selecting colors from the stylebook but this selection is really messy. The colors are repeated, not optimized and not ordered correctly. This makes the selection confusing leading to errors related to inconsistent design.

The goal of this story is to have an easy/organized access to the basic colors from the color system.

Design

Figma

Requirements

• Order color samples by the Token definition doc order and sections
• scroll down
• search bar: token name, token value and sections name

Test Cases

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?
View color samples by the Token definition doc order and sections	CRITICAL	Manual	No	No	Yes
Assert scroll down bar works	HIGH	Manual	No	No	Yes
Search token name, token value and sections name	HIGH	Manual	Yes	No	Yes