diff --git a/.circleci/config.yml b/.circleci/config.yml index 059c24c078..c9b8813131 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts index 057c3170b4..447771ca3d 100644 --- a/packages/number-field/src/NumberField.ts +++ b/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); diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts index f363ea2295..a97fbc265a 100644 --- a/packages/slider/stories/slider.stories.ts +++ b/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` + + + Toggle menu + + +
+ +
+ + updateSliderConfig(0.25, 4, 0.75, 0.01)} + > + Duration + + updateSliderConfig(2, 100, 2, 1)} + > + Personality + + updateSliderConfig(2, 25, 3, 1)} + > + Intensity + +
+
+
+
+ `; +}; + +Multiple.args = { + min: 0.25, + max: 4, + value: 0.75, + step: 0.01, +}; + export const editableWithDefaultValue = ( args: StoryArgs = {} ): TemplateResult => {