fix(slider): double click on slider handle to reset slider position

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 2b61b82c83bc3f5e7cfff9eaf4695fc67e591aeb
+        default: a63f4602db4236d25b3401ef7761f68d588e2b28
     wireit_cache_name:
         type: string
         default: wireit

packages/overlay/stories/overlay.stories.ts

@@ -173,6 +173,7 @@ const template = ({
                         min="0"
                         max="20"
                         label="Awesomeness"
+                        default-value="10"
                     ></sp-slider>
                     <div id="styled-div">
                         The background of this div should be blue

packages/slider/README.md

@@ -232,6 +232,19 @@ An `<sp-slider>` element can be paired with an `<sp-number-field>` element via t
 <sp-slider quiet disabled editable value="50"></sp-slider>
 ```
 
+#### Default value
+
+Slider will reset to its `default-value` when the user double clicks on the slider handle or if the user presses the `escape` key when the slider handle is focused.
+
+```html
+<sp-slider value="50" default-value="20"></sp-slider>
+```
+
+Note: If a slider with `default-value` attribute is contained in a modal and the slider-handle is focused then the following interaction will occur on pressing the `escape` key:
+
+-   If the slider value is different from the default value then the slider value will be reset to the default value and the modal will not be closed.
+-   If the slider value is equal to the default value then the modal will be closed.
+
 #### Indeterminate
 
 The indeterminate attribute will be passed to the internal `<sp-number-field>` element and alter its visual delivery until a change has been made to the `<sp-slider>` element at which point the `change` event that is dispatched can be understood as always removing the indeterminate attribute from the `<sp-slider>`.

packages/slider/src/HandleController.ts

@@ -341,6 +341,22 @@ export class HandleController {
 
     private _activePointerEventData!: DataFromPointerEvent | undefined;
 
+    /**
+     * @description check for defaultvalue(value) property in sp-slider and reset on double click on sliderHandle
+     * @param event
+     */
+    public handleDoubleClick(event: PointerEvent): void {
+        const input = (event.target as Element).querySelector(
+            '.input'
+        ) as InputWithModel;
+
+        if (input.model?.handle.defaultValue !== undefined) {
+            input.model.handle.value = input.model.handle.defaultValue;
+            this.dispatchChangeEvent(input, input.model.handle);
+            this.requestUpdate();
+        }
+    }
+
     public handlePointerdown(event: PointerEvent): void {
         const { resolvedInput, model } = this.extractDataFromEvent(event);
         if (!model || this.host.disabled || event.button !== 0) {
@@ -432,7 +448,21 @@ export class HandleController {
         this.requestUpdate();
     };
 
-    private onInputKeydown = (event: Event): void => {
+    private onInputKeydown = (event: KeyboardEvent): void => {
+        if (event.key == 'Escape') {
+            const input = event.target as InputWithModel;
+            if (
+                input.model.handle?.defaultValue !== undefined &&
+                input.model.handle.value !== input.model.handle.defaultValue
+            ) {
+                input.model.handle.value = input.model.handle.defaultValue;
+                this.dispatchChangeEvent(input, input.model.handle);
+                this.requestUpdate();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            return;
+        }
         const input = event.target as InputWithModel;
         input.model.handle.highlight = true;
         this.requestUpdate();
@@ -522,12 +552,17 @@ export class HandleController {
                     aria-label=${ifDefined(model.ariaLabel)}
                     aria-labelledby=${ariaLabelledBy}
                     aria-valuetext=${this.formattedValueForHandle(model)}
+                    aria-describedby="slider-description"
                     @change=${this.onInputChange}
                     @focus=${this.onInputFocus}
                     @blur=${this.onInputBlur}
                     @keydown=${this.onInputKeydown}
                     .model=${model}
                 />
+                <span id="slider-description">
+                    Press escape or double click to reset the slider to its
+                    default value.
+                </span>
             </div>
         `;
     }

packages/slider/src/Slider.ts

@@ -362,7 +362,6 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
      * @description calculates the fill width
      * @param fillStartValue
      * @param currentValue
-     * @param cachedValue
      * @returns
      */
     private getOffsetWidth(
@@ -409,10 +408,12 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
             ></div>
         `;
     }
-
     private renderHandle(): TemplateResult {
+        if (this.variant === 'tick') {
+            return html``;
+        }
         return html`
-            ${this.variant === 'tick' ? html`` : this.handleController.render()}
+            ${this.handleController.render()}
         `;
     }
 
@@ -442,6 +443,7 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
                         ['pointerup', 'pointercancel', 'pointerleave'],
                         this.handlePointerup,
                     ],
+                    streamOutside: ['dblclick', this.handleDoubleClick],
                 })}
             >
                 <div id="controls">
@@ -475,6 +477,10 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         `;
     }
 
+    protected handleDoubleClick(event: PointerEvent): void {
+        this.handleController.handleDoubleClick(event);
+    }
+
     protected handlePointerdown(event: PointerEvent): void {
         this.handleController.handlePointerdown(event);
     }

packages/slider/src/SliderHandle.ts

@@ -92,6 +92,13 @@ export class SliderHandle extends Focusable {
     @property({ type: Number })
     value!: number;
 
+    /**
+     * Set the default value of the handle. Setting this property will cause the
+     * handle to reset to the default value on double click or pressing the `escape` key.
+     */
+    @property({ type: Number, attribute: 'default-value' })
+    defaultValue!: number;
+
     @property({ type: Boolean, reflect: true })
     public dragging = false;
 

packages/slider/src/slider.css

@@ -149,3 +149,7 @@ governing permissions and limitations under the License.
 .fill {
     z-index: 2;
 }
+
+#slider-description {
+    display: none;
+}

packages/slider/stories/slider.stories.ts

@@ -152,6 +152,26 @@ export const Filled = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const HasADefaultValue = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="1"
+                min="0"
+                value=".5"
+                step="0.01"
+                default-value="0.2"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'percent' }}
+                ...=${spreadProps(args)}
+            >
+                double click or press escape key to reset
+            </sp-slider>
+        </div>
+    `;
+};
+
 export const FillStart = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin-inline: 20px;">
@@ -397,6 +417,37 @@ export const editable = (args: StoryArgs = {}): TemplateResult => {
 
 editable.decorators = [editableDecorator];
 
+export const editableWithDefaultValue = (
+    args: StoryArgs = {}
+): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                max="360"
+                min="0"
+                value="90"
+                step="1"
+                default-value="180"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{
+                    style: 'unit',
+                    unit: 'degree',
+                    unitDisplay: 'narrow',
+                }}
+                ...=${spreadProps(args)}
+            >
+                Angle
+            </sp-slider>
+        </div>
+    `;
+};
+
+editableWithDefaultValue.swc_vrt = {
+    skip: true,
+};
+
 export const editableDisabled = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">

packages/slider/test/index.ts

@@ -310,6 +310,7 @@ export const testEditableSlider = (type: string): void => {
                     pointerType: 'mouse',
                 })
             );
+
             await elementUpdated(el);
 
             expect(el.dragging, 'it is dragging 1').to.be.true;
@@ -340,6 +341,7 @@ export const testEditableSlider = (type: string): void => {
                     pointerType: 'mouse',
                 })
             );
+
             await elementUpdated(el);
 
             expect(el.dragging, 'it is dragging 2').to.be.true;

packages/slider/test/slider.test.ts

@@ -12,6 +12,10 @@ governing permissions and limitations under the License.
 
 import '@spectrum-web-components/slider/sp-slider.js';
 import '@spectrum-web-components/slider/sp-slider-handle.js';
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/overlay/sp-overlay.js';
+import '@spectrum-web-components/popover/sp-popover.js';
+import { Overlay } from '@spectrum-web-components/overlay';
 import { Slider, SliderHandle } from '@spectrum-web-components/slider';
 import { tick } from '../stories/slider.stories.js';
 import {
@@ -169,7 +173,6 @@ describe('Slider', () => {
             })
         );
         await elementUpdated(el);
-
         expect(el.dragging, 'it is dragging 1').to.be.true;
         expect(pointerId, '2').to.equal(1);
 
@@ -1604,4 +1607,128 @@ describe('Slider', () => {
         await elementUpdated(el);
         expect(el.values).to.deep.equal({ a: 10, b: 20, c: 29 });
     });
+    it('resets to default value on double click after moving pointer', async () => {
+        const el = await fixture<Slider>(
+            html`
+                <sp-slider
+                    style="width: 100px"
+                    value="50"
+                    default-value="50"
+                ></sp-slider>
+            `
+        );
+        await elementUpdated(el);
+        expect(el.value, 'initial').to.equal(50);
+
+        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
+        const handleBoundingRect = handle.getBoundingClientRect();
+        const position: [number, number] = [
+            handleBoundingRect.x + handleBoundingRect.width / 2,
+            handleBoundingRect.y + handleBoundingRect.height / 2,
+        ];
+        await sendMouse({
+            steps: [
+                {
+                    type: 'move',
+                    position,
+                },
+                {
+                    type: 'down',
+                },
+            ],
+        });
+
+        await elementUpdated(el);
+        await sendMouse({
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        150,
+                        handleBoundingRect.y + handleBoundingRect.height + 100,
+                    ],
+                },
+                {
+                    type: 'up',
+                },
+            ],
+        });
+
+        await elementUpdated(el);
+
+        // since we've moved the pointer, the new value should be 100
+        expect(el.value).to.equal(100);
+
+        handle.dispatchEvent(
+            new PointerEvent('dblclick', {
+                clientX: 0,
+                cancelable: true,
+                button: 0,
+                composed: true,
+                bubbles: true,
+            })
+        );
+
+        await elementUpdated(el);
+
+        expect(
+            el.value,
+            'reset to default value on double click after moving pointer'
+        ).to.equal(50);
+    });
+    it('manages escape key interactions correctly in an overlaid context', async () => {
+        const el = await fixture<HTMLDivElement>(
+            html`
+                <div>
+                    <sp-button id="trigger">Overlay Trigger</sp-button>
+                    <sp-overlay trigger="trigger@click" placement="bottom">
+                        <sp-popover>
+                            <sp-slider
+                                style="width: 100px"
+                                value="70"
+                                default-value="50"
+                            ></sp-slider>
+                        </sp-popover>
+                    </sp-overlay>
+                </div>
+            `
+        );
+
+        await elementUpdated(el);
+
+        // open the overlay
+        const trigger = el.querySelector('#trigger') as HTMLButtonElement;
+        trigger.click();
+
+        await elementUpdated(el);
+
+        // current slider value should be 70
+        const slider = el.querySelector('sp-slider') as Slider;
+        expect(slider.value).to.equal(70);
+
+        slider.focus();
+        // send escape key
+        await sendKeys({
+            press: 'Escape',
+        });
+
+        await elementUpdated(el);
+
+        // now the slider value should be 50
+        expect(slider.value).to.equal(50);
+
+        // and the overlay should be in open state
+        const overlay = el.querySelector('sp-overlay') as Overlay;
+        expect(overlay.open).to.be.true;
+
+        // send escape key again
+        await sendKeys({
+            press: 'Escape',
+        });
+
+        await elementUpdated(el);
+
+        // now the overlay should be closed
+        expect(overlay.open).to.be.false;
+    });
 });