PLAT-102877: Display fill and load base on center

[changgilee]

Checklist

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

Issue Resolved / Feature Added

Add new type of Slider for display fill and load base on center

Resolution

balanced prop is added for this feature

Additional Considerations

Links

PLAT-102877

Comments

[codecov[bot]]

Codecov Report

Merging #2741 into develop will decrease coverage by 0.04%. The diff coverage is 16.66%.

@@             Coverage Diff             @@
##           develop    #2741      +/-   ##
===========================================
- Coverage    43.72%   43.68%   -0.05%     
===========================================
  Files          147      147              
  Lines         8059     8070      +11     
  Branches      1970     1974       +4     
===========================================
+ Hits          3524     3525       +1     
- Misses        3409     3416       +7     
- Partials      1126     1129       +3

Impacted Files	Coverage Δ
packages/ui/ProgressBar/ProgressBar.js	62.96% <16.66%> (-37.04%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update bdfda49...a615b2b. Read the comment docs.

[Djspaceg]

Honestly, I don't think we need to alter enact/ui/ProgressBar at all to support this feature in Sandstone. All of this can be done using the existing CSS variables and even an ::after pseudo-element on .bar from within the Sandstone code.

If we were going to implement this feature here, we'd need it to be much more complete, and use a different name. "separator" isn't specific enough for the semantics of the feature it's offering. There would only be one "tick mark" that we could add, which doesn't allow for multiple ticks, like a graduated progress bar or a slider with "stops". If we're really interested in adding support for such a feature, I'm in favor of that, but we should do it right and do it completely. Support for an arbitrary amount of separators (tick marks) with the ability to show or hide them.

[changgilee]

@Djspaceg Is there a good prop name to recommend instead of separator?

[Djspaceg]

@changgilee, I'd recommend not editing enact/ui at all and do all of this in Sandstone. We can add a showAnchor prop in sandstone, and use the ::after pseudo-element to display the visuals. That prop can add a .showAnchor class which configure the selectors in the ProgressBar.module.less file to display the anchor at --ui-progressbar-proportion-start. We don't need any new variables in enact/ui or anything.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}