NXT-19557: Limestone Motion Token Table PoC

[vJIYEv]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• I have run automated testing and it is passed
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

New motion token table system PoC

Resolution

[styles/motion.less]

1. Global Motions
   Global motions section includes general primitive motion tokens: duration, delay, easing function

2. Component Specific Motions
   Component specific motions section includes other motions except primitive motion tokens which are used in some specific components (for now, keyframes for toggle motion of Switch and check motion of Checkbox)

• Changes
  • more primitive motion tokens are added.
  • "default" duration, easing tokens are deleted.
  • duration, easing tokens for specific motion types are deleted.
    primitive tokens are used directly in motion-mixins.less
  • --lime-bounce-motion and --lime-check-motion are deleted because they are not used anymore.
    .lime-toggle-motion and .lime-check-motion in motion-mixins.less already have the same animation.
  • custom properties for --lime-bounce-motion and --lime-check-motion are deleted.

[styles/motion-mixins.less]

1. Global Motion Mixins
   Global motion mixins section includes all motion token table spec.

Global Motion Mixins
┃
┗ motion type (ex. focus-in)
　　┃
　　┣ speed based motion mixins: receive a parameter for basic animation
　　┃　┃　　　　　　　　　　　have actual animation pattern (basic animation + duration + delay + easing)
　　┃　┣ fast
　　┃　┣ default
　　┃　┣ slow
　　┃　┗ none
　　┃
　　┗ size & tier based motion mixins: linked to speed based motion mixin
　　　　┃
　　　　┣ small-high
　　　　┣ small-low
　　　　┣ medium-high
　　　　┣ medium-low
　　　　┣ large-high
　　　　┗ large-low

2. Component Specific Motion Mixins
   Component specific motion mixins section includes motion mixins for specific components.
   • .lime-toggle-motion: Switch
   • .lime-check-motion: Checkbox
   • slider motion mixins: Slider
     • Slider focus in/out and press/release motions additionally require "translate" motion of knob.

[ThemeDecorator/ThemeDecorator.js]
Through ThemeDecorator, if an app receives hwTier prop, hwTier-high or hwTier-low class is added to the app.

• ex: <App hwTier="high" >

So each component can use different motion mixin in component.less, depending on hwTier.
In this PR, default hwTier is high when hwTier is omitted.

&:not(:global(.hwTier-low)) { .lime-focus-in-small-high-motion(1.1); }
&:global(.hwTier-low) { .lime-focus-in-small-low-motion(1.1); }

[Component Examples]
Each component uses size & tier based motion mixins.

1. Button, Card, MediaOverlay
   You can see how these component use motion mixins in each compoent.less file.

2. IconItem
   IconItem uses different (not default) parameter values in focus-in and press motions.

&:not(:global(.hwTier-low)) { .lime-focus-in-medium-high-motion(1.2); }
&:global(.hwTier-low) { .lime-focus-in-medium-low-motion(1.2); }

3. Slider
   Slider focus in/out and press/release motions additionally require "translate" motion of knob.
   So you can use its specific motion mixins defined in styles/motion-mixins.less.

&:not(:global(.hwTier-low)) { .lime-slider-focus-in-high-motion(); }
&:global(.hwTier-low) { .lime-slider-focus-in-low-motion(); }

Additional Considerations

• Although the motion token guide says each mixin gets 2 parameters,
  I made each mixin gets just 1 parameter in this PR.
  I think this is more reasonable in css style, because css scale(), translate(), and opacity: only receive "to" parameters, not "from" parameters.
• The motion token guide doesn't mention primitive tokens.
  • Should we keep primitive tokens?
  • If we keep primitive tokens, Should we add delay tokens? (I added in this PR)
• This PR doesn't show how to get hwTier.
  App developer should get it from outside the app and pass the value to the app like other options (ex. focusRing, highContrast)

Links

NXT-19557

Comments

Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.01%. Comparing base (4ec89b8) to head (cc6832f).
⚠️ Report is 21 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #424      +/-   ##
===========================================
+ Coverage    82.61%   83.01%   +0.40%     
===========================================
  Files          153      153              
  Lines         7597     7782     +185     
  Branches      2311     2395      +84     
===========================================
+ Hits          6276     6460     +184     
- Misses        1027     1028       +1     
  Partials       294      294              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.