Details
-
Bug
-
Status: Closed
-
Resolution: Fixed
-
Master
-
7.3.x
-
Committed
-
4
Description
Based on the private report by evan.thibodeau in the #t-echo channel private Slack thread
The current implementation of tokens (CSS Custom Properties) for buttons does not offer the expected styling workflow for simple buttons.
Steps to Reproduce
- Import the sample fragment
- Go to Design > Fragments
- Import the attached .zip file with the example fragment collection: buttons_tokens_test.zip
- Add the sample fragment to a page
- Navigate to the home page (type content page) and click the pencil button to edit
- In the sidebar, inside the Fragments & Widgets section, locate the Buttons fragment and add it to the page
- Publish the page
- Create a StyleBook
- Go to Design > Style Books
- Click on the + button to create a new style book
- Click the actions dropdown and click on Mark as Default to make the style book apply to the page
- Edit stylebook Theme Colors tokens
- Go to Design > Style Books
- Click the actions dropdown and click on Mark as Default edit the style book
Current Result
Some tokens apply and some others don't (check attached screenshot). On a quick inspection:
- The primary token works for a primary button natural state but not for the hover state
- The secondary token works for the secondary button text color in the natural state but not for the color on hover
- The success token works for a primary button natural state but not for the hover state
- The danger, info and warning tokens have no effect
Expected Result
Changing tokens properly styles the expected buttons in a consistent and coherent way
Technical Approach
The initial attempt was to make buttons react to the theme color tokens inside the theme implementation as can be seen in this PR
The current approach should work as:
- When a theme color token [danger, dark, info, light, primary, secondary, success, warning] changes in StyleEditor
- The corresponding tokens and token values should be autogenerated and pushed into the token list that will be saved
Example:
- Primary is changed to #ff00ff
- Inside StyleBookEditir the following tokens are generated:
- button-primary-bg with the value #ff00ff
- button-primary-border calculated
- button-primary-color calculated
- button-primary-hover-background calculated
- button-primary-hover-color calculated
Eduardo.allegrini and marcos.castro should provide the necessary calculations.
Attachments
Issue Links
- causes
-
LPS-120406 The custom primary and secondary of style book can not applied to page
- Closed
-
LPS-120411 Some color token fields are missing in Buttons form of style book editor
- Closed
- relates
-
LPS-120114 LPS-119638 - Product QA | Pull Request Exploratory Testing - Round 1
-
- Closed
-