feat: Silder: adjust fillStart calculation for value=0 and normalizat…

…ion function (#4573) * chore: release new versions #publish * feat: add value=0 and normalization function to fillstart-calculation * Updated config.yml * feat: update golden image hash in config.yml, trigger ci * chore(overlay): overlay-trigger adds receives focus attribute (#4558) * chore(overlay): overlay-trigger adds receives focus attribute * chore(overlay): added storybook * chore(overlay): updated golden image cache --------- Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]> * feat: update golden image hash * feat: update current_golden_images_hash * feat: update Slider documentation * chore(slider): updated storybook and readme * chore(slider): updated golden image cache * chore(slider): updated golden image cache --------- Co-authored-by: Rajdeep Chandra <[email protected]> Co-authored-by: Stefan Puchta <[email protected]> Co-authored-by: Stefan Puchta <[email protected]> Co-authored-by: Rajdeep Chandra <[email protected]>
adobe · Jun 21, 2024 · 369fee7 · 369fee7
1 parent 10d456e
commit 369fee7
Show file tree

Hide file tree

Showing 7 changed files with 559 additions and 527 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 811703e0c807e3533a4ff3cfa08fb6e89b61dbc2
+        default: ff1f9faa387163392c11020d04ae5b81bdb42805
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/alert-banner/src/AlertBanner.ts b/packages/alert-banner/src/AlertBanner.ts
@@ -23,7 +23,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
 import styles from './alert-banner.css.js';
 
 const VALID_VARIANTS = ['neutral', 'info', 'negative'];
-export type AlertBannerVariants = typeof VALID_VARIANTS[number];
+export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];
 
 /**
  * @element sp-alert-banner

diff --git a/packages/slider/README.md b/packages/slider/README.md
@@ -130,6 +130,10 @@ When both `fill-start` and `variant="filled"` are used in `<sp-slider>`, the `fi
 
 ### fill-start with value
 
+Any number (including `0`) can be used as a fill-start value. If a [custom normalization](#advanced-normalization) function is provided, it will also normalize all fill-related params.
+
+#### Fill Start greater than value
+
 ```html
 <sp-slider
     id="fill-start-slider"
@@ -141,6 +145,11 @@ When both `fill-start` and `variant="filled"` are used in `<sp-slider>`, the `fi
     fill-start="0.7"
     variant="filled"
 ></sp-slider>
+```
+
+#### Fill Start less than value
+
+```html
 <sp-slider
     id="fill-start-slider"
     label="Fill Start less than Value"
@@ -151,15 +160,19 @@ When both `fill-start` and `variant="filled"` are used in `<sp-slider>`, the `fi
     fill-start="0.25"
     variant="filled"
 ></sp-slider>
+```
+
+#### Fill Start with 0 and negative minimum range
+
+```html
 <sp-slider
-    label="Slider Label"
+    label="Fill Start with 0"
     max="1"
-    min="0"
+    min="-1"
     value=".7"
     step="0.1"
-    fill-start="0.25"
+    fill-start="0"
     variant="filled"
-    disabled
 ></sp-slider>
 ```
 

diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
@@ -263,6 +263,11 @@ export class HandleController {
         this.handleOrder.push(name);
     }
 
+    public get activeHandleModel(): ModelValue {
+        const active = this.activeHandle;
+        return this.model.find((model) => model.name === active)!;
+    }
+
     private getActiveHandleElements(): HandleComponents {
         const name = this.activeHandle;
         const handleSlider = this.handles.get(name) as SliderHandle;

diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -369,33 +369,34 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         currentValue: number
     ): number {
         const distance = Math.abs(currentValue - fillStartValue);
-        return (distance / (this.max - this.min)) * 100;
-    }
-
-    /**
-     * @description calculates the fill width starting point to fill width
-     * @param value
-     */
-    private getOffsetPosition(value: number): number {
-        return ((value - this.min) / (this.max - this.min)) * 100;
+        return distance * 100;
     }
 
     private fillStyles(centerPoint: number): StyleInfo {
+        const activeModel = this.handleController.activeHandleModel;
+        const centerPointNormalized = activeModel.normalization.toNormalized(
+            centerPoint,
+            this.min,
+            this.max
+        );
         const position = this.dir === 'rtl' ? 'right' : 'left';
         const offsetPosition =
-            this.value > centerPoint
-                ? this.getOffsetPosition(centerPoint)
-                : this.getOffsetPosition(this.value);
-        const offsetWidth = this.getOffsetWidth(centerPoint, this.value);
-        const styles: StyleInfo = {
+            (this.value > centerPoint
+                ? centerPointNormalized
+                : activeModel.normalizedValue) * 100;
+        const offsetWidth = this.getOffsetWidth(
+            centerPointNormalized,
+            activeModel.normalizedValue
+        );
+        const styles = {
             [position]: `${offsetPosition}%`,
             width: `${offsetWidth}%`,
         };
         return styles;
     }
 
     private renderFillOffset(): TemplateResult {
-        if (!this._cachedValue || !this.centerPoint) {
+        if (this._cachedValue === undefined || this.centerPoint === undefined) {
             return html``;
         }
         return html`
@@ -545,12 +546,13 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
     protected override willUpdate(changed: PropertyValues): void {
         if (changed.has('value') && changed.has('fillStart')) {
             this._cachedValue = Number(this.value);
-            if (this.fillStart) {
-                this.centerPoint = Number(this.fillStart);
-            } else {
+            // Test if fill-start is set without a value
+            if (this.getAttribute('fill-start') === '') {
                 this.centerPoint =
                     (Number(this.max) - Number(this.min)) / 2 +
                     Number(this.min);
+            } else if (!Number.isNaN(Number(this.fillStart))) {
+                this.centerPoint = Number(this.fillStart);
             }
         }
     }

diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -229,6 +229,58 @@ export const FillStartWithValue = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const FillStartWithNegativeMinRange = (
+    args: StoryArgs = {}
+): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="150"
+                min="-50"
+                value="25"
+                step="1"
+                fill-start="0"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'number' }}
+                ...=${spreadProps(args)}
+            >
+                Fill start with "0" and within range -50 to 150
+            </sp-slider>
+        </div>
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="100"
+                min="-50"
+                value="-25"
+                step="1"
+                fill-start="0"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'number' }}
+                .normalization=${{
+                    toNormalized: (value: number): number => {
+                        if (value === 0) return 0.5;
+                        return value < 0
+                            ? 0.5 - (value / -50) * 0.5
+                            : 0.5 + (value / 100) * 0.5;
+                    },
+                    fromNormalized: (value: number): number => {
+                        if (value === 0.5) return 0;
+                        return value < 0.5
+                            ? (1 - value / 0.5) * -50
+                            : ((value - 0.5) / 0.5) * 100;
+                    },
+                }}
+                ...=${spreadProps(args)}
+            >
+                Fill start with "0" and normalization function within range -50
+                to 100
+            </sp-slider>
+        </div>
+    `;
+};
+
 export const autofocus = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin-inline: 20px;">