Counter improvements #2355
Merged
Counter improvements #2355
+1,506
−248
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Allow typography sizes to be defined for individual components within content elements (e.g. counterNumber, counterDescription) rather than only at the content element type level. REDMINE-21218
The counter component's size controls have limited horizontal space. Using abbreviated labels (XL, L, M, S, XS) instead of full names (Extra large, Large, etc.) makes the slider more compact. REDMINE-21218
Slider inputs read more naturally going from small to large (left to right). The new order option on getTypographySizes allows callers to request ascending order instead of the default descending. REDMINE-21218
Allow editors to independently adjust font sizes for number, unit, and description in the counter content element via slider inputs. Sizes are defined through theme typography options with responsive breakpoints. - Define 9-step scale (xxxs to xxxl) for counterNumber typography - Define 3-step scale (xs, sm, md) for counterUnit using relative em units - Define 3-step scale (sm, md, lg) for counterDescription REDMINE-21218
Allow editors to set independent colors for number, unit, and description in the counter content element. REDMINE-21218
Existing counter elements use the textSize property with values like 'large', 'medium', 'small', 'verySmall'. Map these to the new numberSize values based on equivalent font sizes to ensure backwards compatibility in both frontend rendering and editor UI. REDMINE-21218
Allow overriding the automatic centering of wide counters with explicit left, center, centerRagged, or right alignment. Auto (default) preserves the existing behavior based on element width and section layout. REDMINE-21218
Keep the unit together with the number on the same line to avoid awkward line breaks in the middle of values like "$100" or "100%". REDMINE-21218
Prevent layout shifts during counting animation by rendering a hidden placeholder with the target value. Uses CSS grid to overlay the current value on top of the placeholder, ensuring stable dimensions throughout the animation. REDMINE-21218
tf
force-pushed
the
counter-improvements
branch
2 times, most recently
from
e7ce7d2 to
f63fbb4
Compare
Introduce a new countingAnimation setting with options none, plain, and wheel (rolling digits). This separates the animation style from the counting speed, allowing users to choose both independently. The existing countingSpeed setting now only controls speed when an animation is enabled. Backwards compatibility is preserved: entries with only countingSpeed set will default to plain animation. REDMINE-21218
Cover wheel animation, separate size/color controls, and text alignment in visual regression tests. REDMINE-21218
tf
force-pushed
the
counter-improvements
branch
from
f63fbb4 to
4eef373
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
REDMINE-21218