diff --git a/packages/webawesome/docs/docs/resources/contributing.md b/packages/webawesome/docs/docs/resources/contributing.md index e2ccac067..447dc6792 100644 --- a/packages/webawesome/docs/docs/resources/contributing.md +++ b/packages/webawesome/docs/docs/resources/contributing.md @@ -252,22 +252,16 @@ This creates confusion because the part will be documented, but it won't work wh ### Emitting Events -Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-change` instead of `waChange`. +Components must only emit events that start with `wa-` as a namespace. For compatibility with frameworks that utilize DOM templates, events must have lowercase, kebab-style names. For example, use `wa-event` instead of `waEvent`. This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem. -### Change Events - -When change events are emitted by Web Awesome components, they should be named `wa-change` and they should only be emitted as a result of user input. Programmatic changes, such as setting `el.value = '…'` _should not_ result in a change event being emitted. This is consistent with how native form controls work. - ### Data Attribute Invokers Some components can be controlled using [data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*) that trigger specific behaviors. These controls must use the following convention: ```html - + ``` The `data-component` portion corresponds to the component's name without the `wa-` prefix. For example, `data-dialog` must control a `` component. @@ -277,13 +271,9 @@ The `action` parameter is required and must be a concise, descriptive term indic The `id` parameter must point to the ID of the target component. The ID may be omitted if and only if the target component wraps the element with the `data-` attribute. ```html - - Dialog content - + Dialog content - + ``` ### CSS Custom Properties @@ -416,4 +406,4 @@ or for hydrated rendering only: ```bash SSR_ONLY="true" npm run test -``` \ No newline at end of file +``` diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts index 605e76e8f..12413922f 100644 --- a/packages/webawesome/src/components/color-picker/color-picker.ts +++ b/packages/webawesome/src/components/color-picker/color-picker.ts @@ -490,7 +490,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement { const target = event.target as HTMLInputElement; const oldValue = this.value; - // Prevent the `` element's `wa-change` event from bubbling up + // Prevent the `` element's `change` event from bubbling up event.stopPropagation(); if (this.input.value) {