fix(number-field, slider): ensure cached value is cleared when toggling between different steps

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: ea0db2c152ce09dc870edef573cd5e4a0bf44e60
+        default: 62ecc57a00a4e68cdacbad3ce6f0a205fda2e002
     wireit_cache_name:
         type: string
         default: wireit

packages/number-field/src/NumberField.ts

@@ -786,13 +786,16 @@ export class NumberField extends TextfieldBase {
         if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {
             this.clearNumberFormatterCache();
         }
-        if (changes.has('value') || changes.has('max') || changes.has('min')) {
+        if (
+            changes.has('value') ||
+            changes.has('max') ||
+            changes.has('min') ||
+            changes.has('step')
+        ) {
             const value = this.numberParser.parse(
                 this.formattedValue.replace(this._forcedUnit, '')
             );
             this.value = value;
-        }
-        if (changes.has('step')) {
             this.clearValueFormatterCache();
         }
         super.update(changes);

packages/slider/stories/slider.stories.ts

@@ -67,6 +67,10 @@ export default {
         variant: undefined,
         tickStep: 0.1,
         labelVisibility: undefined,
+        min: undefined,
+        max: undefined,
+        value: undefined,
+        step: undefined,
     },
 };
 
@@ -76,6 +80,10 @@ export interface StoryArgs {
     labelVisibility?: string;
     onInput?: (val: string) => void;
     onChange?: (val: string) => void;
+    min?: number;
+    max?: number;
+    value?: number;
+    step?: number;
     [prop: string]: unknown;
 }
 
@@ -471,6 +479,80 @@ export const editable = (args: StoryArgs = {}): TemplateResult => {
 
 editable.decorators = [editableDecorator];
 
+import '@spectrum-web-components/slider/sp-slider.js';
+import '@spectrum-web-components/overlay/overlay-trigger.js';
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/tray/sp-tray.js';
+
+export const Multiple = (args: StoryArgs): TemplateResult => {
+    const updateSliderConfig = (
+        min: number,
+        max: number,
+        value: number,
+        step: number
+    ): void => {
+        const slider = document.querySelector('sp-slider');
+        if (slider) {
+            slider.value = value;
+            slider.min = min;
+            slider.max = max;
+            slider.step = step;
+        }
+    };
+
+    return html`
+        <overlay-trigger type="modal">
+            <sp-button slot="trigger" variant="secondary">
+                Toggle menu
+            </sp-button>
+            <sp-tray slot="click-content">
+                <div style="padding: 8px; width: 100%">
+                    <sp-slider
+                        label="Slider Label"
+                        min=${args.min}
+                        max=${args.max}
+                        value=${args.value}
+                        step=${args.step}
+                        variant="filled"
+                        hide-stepper
+                        editable
+                    ></sp-slider>
+                    <div
+                        style="display: grid; gap: 8px; padding: 8px; width: 50%; margin: auto;"
+                    >
+                        <sp-button
+                            size="s"
+                            @click=${() =>
+                                updateSliderConfig(0.25, 4, 0.75, 0.01)}
+                        >
+                            Duration
+                        </sp-button>
+                        <sp-button
+                            size="s"
+                            @click=${() => updateSliderConfig(2, 100, 2, 1)}
+                        >
+                            Personality
+                        </sp-button>
+                        <sp-button
+                            size="s"
+                            @click=${() => updateSliderConfig(2, 25, 3, 1)}
+                        >
+                            Intensity
+                        </sp-button>
+                    </div>
+                </div>
+            </sp-tray>
+        </overlay-trigger>
+    `;
+};
+
+Multiple.args = {
+    min: 0.25,
+    max: 4,
+    value: 0.75,
+    step: 0.01,
+};
+
 export const editableWithDefaultValue = (
     args: StoryArgs = {}
 ): TemplateResult => {