search

telerik / themebuilder

This public repository aims at providing a convenient way for developers using ThemeBuilder to report and log any issues they may encounter while using the tool. If you think that you've found a bug, you're more than welcome to create a new issue
2 stars 1 forks source link

Missing Combined Templates for Hover and Selected states #47

Open NickIliev opened 1 year ago

NickIliev commented 1 year ago

Describe the bug

Currently, in the ThemeBuilder template for Pager > Pages, the styles for Hover will always overwrite (or mask) the color styles for the Selected state if the Hover styles are applied after the Selected styles.

As a result, the combination of Hover + Selected produces undesired results (like unexpected masking of colors that are explicitly set for a specific state). If you set the Hover state before the Selected state style, the issue is not present.

However, the bug is critical as there is no means to recover if the ThemeBuilder project already has wrongly set styles (resetting and removing styles does not resolve the issue).

To Reproduce Steps to reproduce the behavior:

  1. Go to 'Page > Pages'
  2. Click on the 'Selected' template and set the Text and Background (colors).
  3. Click on the 'Hover' template and set the Text and Background (colors).
  4. See the undesired behavior in the Live Preview.

Expected behavior When styles are explicitly set, the 'Selected' template should overwrite the 'Hover' template, and no color masking should appear.

Additional context Reported through t.1625874 Discussed with @kvelikov

NickIliev commented 9 months ago

The described issue is not explicitly related to the Pager component but to all ThemeBuilder templates where the component supports different states (e.g., active, hover, selected, etc.).

That said, the proper solution requires re-designing the ThemeBuilder state template in multiple ThemeBuilder templates. The team is researching the best approach to handle the case, requiring significant rework.

Meanwhile, the temporary workaround is for the user to set the state style in a specific order - where the style he wants to have higher specificity should be placed last, and the state style with the lowest specificity should be set first. For example:

  1. Set the Normal state styles (lowest specificity)
  2. Set the Hover state styles (lower specificity than Selected, higher than Normal)
  3. Set the Selected state styles (highest specificity)

Important: In the current state, once the order is set, it can't be reset through the ThemeBuilder's UI. The only possible approach to reset the order is to explicitly delete the affected selectors from the project's metadata (that requires export metadata > delete the affected selectors > import metadata). Note that deleting metadata will result in reverting the styles of that component/template to their original state.

NickIliev commented 6 months ago

+1 from t.1648665

Reproducible with ButtonGroup when using the Selected and Hover templates and triggering both states.