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

As a UX Designer I can edit my style book while previewing the effect on any page of the site

    Details

      Description

      Intro/Context:

      It is an art to define the right combination of token values, its even more difficult without looking at the result of a combination of values on a real page.

      To be able to assist the UX Designer in editing the values of the tokens and set the right ones, it should be possible to view the result of a change on a page while editing the tokens.

      The goal of the story is to allow UX Designer define the default values of the tokens while looking at the result on a real given page.

      -

      When the UX Designer is editing a StyleBook

      Then he/she can visualise a page and keep editing the tokens while previewing the changes on a given (default) page.

      -

      When the UX Designer has edited the StyleBook

      Then he/she can save it.

      -

       

      Figma Mockup

      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?
      Can not preview style book when there are no pages in site High Manual no no Yes
      Can preview the effect on page when edit the style book Critical Manual no no Yes
      Can navigate to preview page via page preview info bar but not interact with preview page in style book editor High Manual no no Yes
      Can preview the effect on page when edit the style book in Staging site High Manual no no Yes

        Attachments

          Issue Links

          1.
          Create react app Technical Task Closed Product Team Echo  
          2.
          Update draft status Technical Task Closed Product Team Echo  
          3.
          Support RTL Technical Task Closed Victor Galan  
          4.
          Close product menu if open when opening the app Technical Task Closed Product Team Echo  
          5.
          Support tokens of different type Technical Task Closed Product Team Echo  
          6.
          Add token definition to the react app state Technical Task Closed Victor Galan  
          7.
          Load token values on first iframe load Technical Task Closed Product Team Echo  
          8.
          When changing the color debounce the request so we avoid executing a lot of requests Technical Task Closed Product Team Echo  
          9.
          Don't show style books on global Technical Task Closed Product Team Echo  
          10.
          Fix color picker Technical Task Closed Product Team Echo  
          11.
          Apply variables to the body of the iframe Technical Task Closed Product Team Echo  
          12.
          Rename and use FrontendToken Technical Task Closed Product Team Echo  
          13.
          Add message when there isn't any page in the site Technical Task Closed Product Team Echo  
          14.
          Allow adding css variable like var(--name) syntax in all fields Technical Task Closed Product Team Echo  
          15.
          Add a page tree to navigate within the iframe Technical Task Closed Product Team Echo  
          16.
          Block interactions with iframe Technical Task Closed Product Team Echo  
          17.
          overlay is covering the whole editor Technical Task Closed Victor Galan  
          18.
          Test Scenarios Coverage | Test Creation Technical Testing Closed Manoel Cyreno  
          19.
          Product QA | Test Validation - Round 1 Technical Testing Closed Manoel Cyreno  
          20.
          Shouldn't be able to interact with preview page in style book editor Impedibug Closed Yang Cao  
          21.
          Product QA | Test Validation - Round 2 Technical Testing Closed Manoel Cyreno  
          22.
          Test Scenarios Coverage | Backend Technical Testing Closed SE Support  
          23.
          Test Scenarios Coverage | Frontend Technical Testing Closed Jürgen Kappler  
          24.
          Product QA | Test Validation - Round 3 Technical Testing Closed Manoel Cyreno  

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Packages

                  Version Package
                  Master