fix(color-slider): vertical variant orientation is upside down #3291

adobe · Jun 8, 2023 · 67c7e0a · 67c7e0a
1 parent 7ff1b6c
commit 67c7e0a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
@@ -270,7 +270,9 @@ export class ColorSlider extends Focusable {
         const size = this.vertical ? rect.height : rect.width;
 
         const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
-        const sliderHandlePosition = 100 * percent;
+        const sliderHandlePosition = this.vertical
+            ? 100 - 100 * percent
+            : 100 * percent;
 
         return sliderHandlePosition;
     }
@@ -286,7 +288,7 @@ export class ColorSlider extends Focusable {
     }
 
     private get handlePositionStyles(): string {
-        return `${this.vertical ? 'top' : 'left'}: ${
+        return `${this.vertical ? 'bottom' : 'left'}: ${
             this.sliderHandlePosition
         }%`;
     }
@@ -302,7 +304,7 @@ export class ColorSlider extends Focusable {
                     class="gradient"
                     role="presentation"
                     style="background: linear-gradient(to ${this.vertical
-                        ? 'bottom'
+                        ? 'top'
                         : 'right'}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)));"
                 >
                     <slot name="gradient"></slot>

diff --git a/packages/color-slider/src/color-slider.css b/packages/color-slider/src/color-slider.css
@@ -20,6 +20,11 @@ governing permissions and limitations under the License.
     touch-action: none;
 }
 
+:host([vertical]) .handle {
+    top: unset;
+    bottom: 0;
+}
+
 :host(:focus) {
     outline: none;
 }

diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts
@@ -564,7 +564,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(47.91666666666667);
+        expect(el.sliderHandlePosition).to.equal(100 - 47.91666666666667);
 
         handle.dispatchEvent(
             new PointerEvent('pointermove', {
@@ -589,7 +589,7 @@ describe('ColorSlider', () => {
 
         await elementUpdated(el);
 
-        expect(el.sliderHandlePosition).to.equal(53.125);
+        expect(el.sliderHandlePosition).to.equal(100 - 53.125);
     });
     it('accepts pointer events in dir="rtl"', async () => {
         document.documentElement.dir = 'rtl';