When I edit a Fragment, I want to provide custom values to the common styles, so that I minimize the time it takes to customize the UI of a given Fragment.

• Type: Story
• Status: In Development
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Fragment Administration
• Labels:
  • d_22_04
  • fc_22_04
  • fc_22_08
• Epic Link: When I'm working on defining styles for non-color-related tokens, I want to have more options so that I can save time and increase accuracy

Intro/Context

The scope of this story is to redefine the look and feel of the style inputs in the Page Editor, to make it easier for the user to understand the current styles that apply to a given fragment, and the options that style book provides to that given fragment.

In addition a way will be provided for designers to apply custom values to styles that are linked to tokens, for them to better adapt to design requirements.

Requirements 

• Redesign the input fields for styles that are related to tokens.
• States
  • Linked to Style book.
  • Linked to Style book on hover (reveals detach from token action and reset value action).
  • When detached from Token, the custom field will have a "Link to Style Book" action.
  • For styles with units we have added a unit selector. This is worked on LPS-142050
  • Review Color styles to make them match to these improvements.
• For each style that is linked to a token, enable a button called "Detach Token" that decouples the style field from the need to select a value from a list of tokens, allowing the user to enter a free text for the field.
• Enable the possibility to revert this decoupling, that is, re-linking the field to a given list of tokens.
• Enable the "Reset" functionality for style inputs, to reset the value to the default. This is worked on LPS-147512 This will be done in LPS-159506--
• THIS IS AND ADVANCED OPTION. it will only be available for users who have the "Page - Update" permission enabled. Users with Update-limited or updated-basic will not have this option available.
• For fields that have the button to change the unit: 
  • When changing the unit to "CUSTOM", the field will remain empty and on focus. 
  • If the user leaves the input, the field will go back to the last saved value.

Design

Figma