Fix position bug

docs/getting-started/changelog.md

@@ -14,8 +14,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside `sl-dialog` [#252](https://github.com/shoelace-style/shoelace/issues/252)
 - Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
 - Fixed a bug where `aria-describedby` was never set on tooltip targets in `sl-tooltip`
+- Fixed a bug where setting `position` on `sl-image-comparer` wouldn't update the divider's position
 - Improved `sl-icon-button` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers [#220](https://github.com/shoelace-style/shoelace/issues/220)
 - Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
+- Refactored position logic to remove an unnecessary state variable in `sl-image-comparer`
 - Removed `console.log` from modal utility
 - 🚨 BREAKING CHANGE: Refactored `sl-menu` and `sl-menu-item` to improve accessibility by using proper focus states [#217](https://github.com/shoelace-style/shoelace/issues/217)
   - Moved `tabindex` from `sl-menu` to `sl-menu-item`

src/components/image-comparer/image-comparer.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Event, EventEmitter, Prop, Watch, h } from '@stencil/core';
 import { clamp } from '../../utilities/math';
 
 /**
@@ -25,8 +25,6 @@ export class ImageComparer {
   divider: HTMLElement;
   handle: HTMLElement;
 
-  @State() dividerPosition: number;
-
   /** The position of the divider as a percentage. */
   @Prop({ mutable: true }) position = 50;
 
@@ -39,8 +37,6 @@ export class ImageComparer {
   @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   connectedCallback() {
-    this.dividerPosition = this.position;
-
     this.handleDrag = this.handleDrag.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
@@ -80,7 +76,6 @@ export class ImageComparer {
 
     drag(event, this.base, x => {
       this.position = clamp((x / width) * 100, 0, 100);
-      this.dividerPosition = this.position;
     });
   }
 
@@ -98,7 +93,6 @@ export class ImageComparer {
       newPosition = clamp(newPosition, 0, 100);
 
       this.position = newPosition;
-      this.dividerPosition = newPosition;
     }
   }
 
@@ -114,7 +108,7 @@ export class ImageComparer {
             part="after"
             class="image-comparer__after"
             style={{
-              clipPath: `inset(0 ${100 - this.dividerPosition}% 0 0)`
+              clipPath: `inset(0 ${100 - this.position}% 0 0)`
             }}
           >
             <slot name="after" />
@@ -126,7 +120,7 @@ export class ImageComparer {
           part="divider"
           class="image-comparer__divider"
           style={{
-            left: `${this.dividerPosition}%`
+            left: `${this.position}%`
           }}
           onMouseDown={this.handleDrag}
           onTouchStart={this.handleDrag}
@@ -136,7 +130,7 @@ export class ImageComparer {
             part="handle"
             class="image-comparer__handle"
             role="scrollbar"
-            aria-valuenow={this.dividerPosition}
+            aria-valuenow={this.position}
             aria-valuemin="0"
             aria-valuemax="100"
             tabIndex={0}