Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-119638

Bootstrap/Clay Buttons do not react properly to StyleBook Tokens

    Details

      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

        1. Selection_026.png
          Selection_026.png
          497 kB
        2. entries-20200826153240931.zip
          1 kB
        3. buttons_tokens_test.zip
          2 kB
        4. buttons_tokens_test.zip
          2 kB
        5. button_tokens.gif
          button_tokens.gif
          415 kB

          Issue Links

            Activity

              People

              Assignee:
              john.co John Co
              Reporter:
              jose.balsas Chema Balsas (Inactive)
              Participants of an Issue:
              Recent user:
              Tomáš Polešovský
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Days since last comment:
                1 year, 13 weeks, 1 day ago

                  Packages

                  Version Package
                  7.3.5 CE GA6
                  7.3.10 DXP GA1
                  7.3.X
                  Master