fix(slider): use standard "change" and "input" events

adobe · Oct 30, 2019 · 59cf786 · 59cf786
1 parent 5e70076
commit 59cf786
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 46 deletions.
diff --git a/packages/overlay-root/stories/overlay-root.stories.ts b/packages/overlay-root/stories/overlay-root.stories.ts
@@ -21,7 +21,6 @@ import {
 
 import '../';
 import { Placement } from '../';
-import { RadioChangeDetail } from '../../radio';
 import '../../overlay-root';
 import '../../overlay-trigger';
 import '../../button';
@@ -30,6 +29,7 @@ import '../../slider';
 import '../../radio';
 import '../../radio-group';
 import '../../tooltip';
+import { Radio } from '../../radio';
 
 // Prevent infinite recursion in browser
 const MAX_DEPTH = 7;
@@ -61,23 +61,24 @@ class RecursivePopover extends LitElement {
         this.depth = 0;
     }
 
-    public onRadioChange(event: CustomEvent<RadioChangeDetail>): void {
-        this.placement = event.detail.value as Placement;
+    public onRadioChange(event: Event): void {
+        const target = event.target as Radio;
+        this.placement = target.value as Placement;
     }
 
     public render(): TemplateResult {
         return html`
             <sp-radio-group selected="${this.placement}" name="group-example">
-                <sp-radio @sp-radio:change=${this.onRadioChange} value="top">
+                <sp-radio @change=${this.onRadioChange} value="top">
                     Top
                 </sp-radio>
-                <sp-radio @sp-radio:change=${this.onRadioChange} value="right">
+                <sp-radio @change=${this.onRadioChange} value="right">
                     Right
                 </sp-radio>
-                <sp-radio @sp-radio:change=${this.onRadioChange} value="bottom">
+                <sp-radio @change=${this.onRadioChange} value="bottom">
                     Bottom
                 </sp-radio>
-                <sp-radio @sp-radio:change=${this.onRadioChange} value="left">
+                <sp-radio @change=${this.onRadioChange} value="left">
                     Left
                 </sp-radio>
             </sp-radio-group>

diff --git a/packages/radio-group/src/radio-group.ts b/packages/radio-group/src/radio-group.ts
@@ -19,7 +19,7 @@ import {
 } from 'lit-element';
 
 import radioGroupStyles from './radio-group.css.js';
-import { Radio, RadioChangeDetail } from '@spectrum-web-components/radio';
+import { Radio } from '@spectrum-web-components/radio';
 
 /**
  * Radio group component
@@ -70,12 +70,10 @@ export class RadioGroup extends LitElement {
         // If selected already assigned, don't overwrite
         this.selected = this.selected || checkedRadioValue;
 
-        this.addEventListener(
-            'sp-radio:change',
-            (ev: CustomEvent<RadioChangeDetail>) => {
-                this.selected = ev.detail.value;
-            }
-        );
+        this.addEventListener('change', (ev: Event) => {
+            const target = ev.target as Radio;
+            this.selected = target.value;
+        });
     }
 
     private deselectChecked(): void {

diff --git a/packages/radio/src/radio.ts b/packages/radio/src/radio.ts
@@ -21,10 +21,6 @@ import {
 import radioStyles from './radio.css.js';
 import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
 
-export interface RadioChangeDetail {
-    value: string;
-}
-
 /**
  * Spectrum Radio Button Component
  *
@@ -61,12 +57,9 @@ export class Radio extends Focusable {
     public handleChange(): void {
         this.checked = this.inputElement.checked;
         this.dispatchEvent(
-            new CustomEvent('sp-radio:change', {
+            new Event('change', {
                 bubbles: true,
                 composed: true,
-                detail: {
-                    value: this.value,
-                },
             })
         );
     }
@@ -88,9 +81,3 @@ export class Radio extends Focusable {
         `;
     }
 }
-
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-radio:change': CustomEvent<RadioChangeDetail>;
-    }
-}
diff --git a/packages/radio/test/radio.test.ts b/packages/radio/test/radio.test.ts
@@ -66,14 +66,25 @@ describe('Radio', () => {
     });
 
     it('handles click events', async () => {
+        let value = '';
+        let checked = false;
         const el = testDiv.querySelector('[value=third]') as Radio;
+        el.addEventListener('change', (e) => {
+            const target = e.target as Radio;
+            value = target.value;
+            checked = target.checked;
+        });
 
         expect(el.checked).to.be.false;
+        expect(value).to.equal('');
+        expect(checked).to.be.false;
 
         inputForRadio(el).click();
         await elementUpdated(el);
 
         expect(el.checked).to.be.true;
+        expect(value).to.equal('third');
+        expect(checked).to.be.true;
     });
 
     it('autofocuses', async () => {

diff --git a/packages/slider/src/slider.ts b/packages/slider/src/slider.ts
@@ -23,8 +23,6 @@ import spectrumSliderStyles from './spectrum-slider.css.js';
 import sliderStyles from './slider.css.js';
 import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
 
-export type SliderEventDetail = number;
-
 export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
 
 export class Slider extends Focusable {
@@ -435,10 +433,9 @@ export class Slider extends Focusable {
     }
 
     private dispatchInputEvent(): void {
-        const inputEvent = new CustomEvent('sp-slider:input', {
+        const inputEvent = new Event('input', {
             bubbles: true,
             composed: true,
-            detail: this.value,
         });
 
         this.dispatchEvent(inputEvent);
@@ -447,10 +444,9 @@ export class Slider extends Focusable {
     private dispatchChangeEvent(): void {
         this.input.value = this.value.toString();
 
-        const changeEvent = new CustomEvent('sp-slider:change', {
+        const changeEvent = new Event('change', {
             bubbles: true,
             composed: true,
-            detail: this.value,
         });
 
         this.dispatchEvent(changeEvent);
@@ -483,10 +479,3 @@ export class Slider extends Focusable {
         return `left: ${this.trackProgress * 100}%`;
     }
 }
-
-declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-slider:input': CustomEvent<SliderEventDetail>;
-        'sp-slider:change': CustomEvent<SliderEventDetail>;
-    }
-}
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -16,7 +16,7 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
 import '../';
-import { variants, SliderEventDetail } from '../';
+import { variants, Slider } from '../';
 
 storiesOf('Slider', module)
     .add('Default', () => {
@@ -34,8 +34,9 @@ storiesOf('Slider', module)
             sliderVariants[0],
             'Element'
         );
-        const handleEvent = (e: CustomEvent<SliderEventDetail>): void => {
-            action(e.type)(e.detail);
+        const handleEvent = (e: Event): void => {
+            const target = e.target as Slider;
+            action(e.type)(target.value);
         };
         return html`
             <div style="width: 500px; margin: 20px;">

diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts
@@ -165,7 +165,7 @@ describe('Slider', () => {
             html`
                 <sp-slider
                     style="width: 500px; float: left;"
-                    @sp-slider:input=${handleInput}
+                    @input=${handleInput}
                 ></sp-slider>
             `
         );
@@ -421,7 +421,7 @@ describe('Slider', () => {
             html`
                 <sp-slider
                     step="0"
-                    @sp-slider:input=${handleInput}
+                    @input=${handleInput}
                     style="width: 500px; float: left;"
                 ></sp-slider>
             `