adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.25k stars 200 forks source link

feat: Silder: adjust fillStart calculation for value=0 and normalization function #4573

Closed Rajdeepc closed 3 months ago

Rajdeepc commented 3 months ago

This PR adds a way to use fill-start="0" as reference point as well as respecting a provided normalization function to correctly calculate fill offset and length.

Description

First check, if we really just have the attribute fill-start provided with no number value, if so, use centered point of track like before. For all other number values, use normalization function of model of active handle to calculate real fill-offset and fill-length.

Related issue(s)

4559

Motivation and context

2 current problems:

  1. Currently fill-start attribute only allows to set values !== 0, but sometimes clients have sliders with min<0 , so for example: min="-100", max="200" - so we need a possibility to define fill-start="0" to not start from centered track position
  2. Also currently the fill-start calculation doesn't respect any provided normalization function, so we'd like to calculate all fill-related values (offset + length) by a given normalization function of model of active handle

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

github-actions[bot] commented 3 months ago

Branch preview

Visual regression test results When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs: - [High Contrast Mode | Medium | LTR](https://d18147901518c65f2bf0a3614a9a2402--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Medium | LTR](https://1547ef392dd1907adda4b2626756f5f9--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Medium | RTL](https://e5a7fdfceca30efe6c25dde749a416a5--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Large | LTR](https://b570bf83beb72628157e06672bdf8407--spectrum-web-components.netlify.app/review/) - [Spectrum | Lightest | Large | RTL](https://4aefe1f5bce0cff353ecbc48c5a1aacd--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Medium | LTR](https://a74cbb4f40a9e0716af11ccff2000405--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Medium | RTL](https://385acf8b7e40fc2f0952987fbd5ee1a7--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Large | LTR](https://8b2a7b6452efc5b594511d7b42e43332--spectrum-web-components.netlify.app/review/) - [Spectrum | Light | Large | RTL](https://ac4e35151bf7f9fef2e68559fffb1a3c--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Medium | LTR](https://7143cf647aed6eee464bf2064a2dc978--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Medium | RTL](https://a47fa2d6c55b66b739cf5df3f7f2e7c1--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Large | LTR](https://ccf0d052d3f819ca69b5c4a9269706aa--spectrum-web-components.netlify.app/review/) - [Spectrum | Dark | Large | RTL](https://fa019778d3b715ef582070ffbed2474d--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Medium | LTR](https://3fe7adbe037d666f95b6e2e695c97b75--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Medium | RTL](https://ea7c29e882fedc55adf8bb4b4abf0b59--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Large | LTR](https://8c9229013561aa681eac5bdb087dbf7c--spectrum-web-components.netlify.app/review/) - [Spectrum | Darkest | Large | RTL](https://695a7ecb1d804b9c33b75694d5f98102--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Medium | LTR](https://deb526c0339b8a329347b56069c939e9--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Medium | RTL](https://f9994405e8ef0bb92c226e0ff21da677--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Large | LTR](https://bd2edfe41719e5278a7a6f01e8cee0ee--spectrum-web-components.netlify.app/review/) - [Express | Lightest | Large | RTL](https://1a6e132b2888743c16edac9ec6926664--spectrum-web-components.netlify.app/review/) - [Express | Light | Medium | LTR](https://c64683021c843e546ac56411377d1e81--spectrum-web-components.netlify.app/review/) - [Express | Light | Medium | RTL](https://f17652eef749fcf81b9092f3c5d19b90--spectrum-web-components.netlify.app/review/) - [Express | Light | Large | LTR](https://f84e82673d2aa5a8301763b139c965c6--spectrum-web-components.netlify.app/review/) - [Express | Light | Large | RTL](https://05e122a08e93c1d20a387e713da2b3c5--spectrum-web-components.netlify.app/review/) - [Express | Dark | Medium | LTR](https://ae43cc74101272aaa2607e3b90027118--spectrum-web-components.netlify.app/review/) - [Express | Dark | Medium | RTL](https://918f2728d216003f386e05e499ff29e0--spectrum-web-components.netlify.app/review/) - [Express | Dark | Large | LTR](https://c94ba26dc8ce7fa9e784164ef36e2273--spectrum-web-components.netlify.app/review/) - [Express | Dark | Large | RTL](https://91b398abad0f7f7acdb86335fcb3e049--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Medium | LTR](https://b973263e04b1df431bd6766f55b16112--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Medium | RTL](https://2c689c99c7c1206e50ad866c5232718b--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Large | LTR](https://b768392897b6454fc31857af252c5aff--spectrum-web-components.netlify.app/review/) - [Express | Darkest | Large | RTL](https://325b7bffb38e01a4fd1ed4c08f552924--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Medium | LTR](https://da651d326dd3b05a62672208220c79b6--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Medium | RTL](https://5ae24bf57594c957389dc6f6de5efaa6--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Large | LTR](https://f38af8b5d228eafdf2d184c13b7c8272--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Light | Large | RTL](https://03a9c4c66a56de4986c2954424adf4f5--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Medium | LTR](https://b8b6528924ea27f1f079db7e18e31c15--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Medium | RTL](https://6b2fb1b18de726e567ce616a1c5a0d52--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Large | LTR](https://c4faf49ab2d7bd57a9675959a793856d--spectrum-web-components.netlify.app/review/) - [Spectrum-two | Dark | Large | RTL](https://60000ce1ceeca42f22508c6fb992e40a--spectrum-web-components.netlify.app/review/)
github-actions[bot] commented 3 months ago

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 0.98 0.94
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this? [Lighthouse](https://github.com/GoogleChrome/lighthouse) scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but *note that the SEO scores on Netlify URLs are artifically constrained to 0.92.*

Transfer Size

Category Latest Main Branch
Total 222.647 kB 210.875 kB 210.583 kB 🏆
Scripts 54.687 kB 48.511 kB 48.261 kB 🏆
Stylesheet 34.929 kB 30.42 kB 30.379 kB 🏆
Document 6.024 kB 5.32 kB 🏆 5.337 kB
Font 127.007 kB 126.624 kB 126.606 kB 🏆

Request Count

Category Latest Main Branch
Total 45 45 45
Scripts 37 37 37
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2
github-actions[bot] commented 3 months ago

Tachometer results

Currently, no packages are changed by this PR...