From 0234fe81d592c13fbe7a05c307f2709b1e15a77f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 11 Mar 2021 12:56:45 -0500
Subject: [PATCH] fix watch handlers

---
 docs/getting-started/changelog.md           |  1 +
 src/components/alert/alert.ts               |  8 +++++---
 src/components/color-picker/color-picker.ts | 11 +++++++----
 src/components/switch/switch.ts             |  2 +-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 15585084..17720649 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with `flex-end` [#355](https://github.com/shoelace-style/shoelace/issues/355)
 - Fixed a bug where `sl-change` wasn't emitted by `sl-checkbox` or `sl-switch` [#370](https://github.com/shoelace-style/shoelace/issues/370)
+- Fixed a bug where some props weren't being watched correctly in `sl-alert` and `sl-color-picker`
 - Improved `@watch` decorator so watch handlers don't run before the first render
 - Removed guards that were added due to previous watch handler behavior
 
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index 167fa5ba..44d5530f 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -1,6 +1,6 @@
 import { LitElement, html, internalProperty, property, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./alert.scss';
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
@@ -157,11 +157,13 @@ export default class SlAlert extends LitElement {
     }
   }
 
-  openChanged() {
+  @watch('open')
+  handleOpenChange() {
     this.open ? this.show() : this.hide();
   }
 
-  durationChanged() {
+  @watch('duration')
+  handleDurationChange() {
     this.restartAutoHide();
   }
 
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index f4638b6e..0e367cbb 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -1,7 +1,7 @@
 import { LitElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
-import { event, EventEmitter, tag } from '../../internal/decorators';
+import { event, EventEmitter, tag, watch } from '../../internal/decorators';
 import styles from 'sass:./color-picker.scss';
 import { SlDropdown, SlInput } from '../../shoelace';
 import color from 'color';
@@ -579,15 +579,18 @@ export default class SlColorPicker extends LitElement {
     this.bypassValueParse = false;
   }
 
-  formatChanged() {
+  @watch('format')
+  handleFormatChange() {
     this.syncValues();
   }
 
-  opacityChanged() {
+  @watch('opacity')
+  handleOpacityChange() {
     this.alpha = 100;
   }
 
-  valueChanged(newValue: string, oldValue: string) {
+  @watch('value')
+  handleValueChange(newValue: string, oldValue: string) {
     if (!this.bypassValueParse) {
       const newColor = this.parseColor(newValue);
 
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index d9a3dd46..57c57ecf 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -108,7 +108,7 @@ export default class SlSwitch extends LitElement {
   }
 
   @watch('checked')
-  checkedChanged() {
+  handleCheckedChange() {
     if (this.input) {
       this.input.checked = this.checked;
       this.slChange.emit();