From 81cb8d2fbd0f41378e47624fddf8ea9d7ea61ee2 Mon Sep 17 00:00:00 2001
From: Michael Jordan <mijordan@adobe.com>
Date: Tue, 11 Jul 2023 15:31:53 -0400
Subject: [PATCH] fix(color-wheel): add test for dir="rtl" orientation

---
 packages/color-wheel/src/color-wheel.css      |  3 ++-
 packages/color-wheel/test/color-wheel.test.ts | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/color-wheel/src/color-wheel.css b/packages/color-wheel/src/color-wheel.css
index dacef749d5..2ff2d0a188 100644
--- a/packages/color-wheel/src/color-wheel.css
+++ b/packages/color-wheel/src/color-wheel.css
@@ -38,6 +38,7 @@ governing permissions and limitations under the License.
     z-index: 0;
 }
 
-:host([dir='rtl']) .wheel {
+:host([dir='rtl']) .wheel,
+:host([dir='rtl']) ::slotted([slot='gradient']) {
     transform: scaleX(-1);
 }
diff --git a/packages/color-wheel/test/color-wheel.test.ts b/packages/color-wheel/test/color-wheel.test.ts
index 5a8d1fe31e..128cbfae6a 100644
--- a/packages/color-wheel/test/color-wheel.test.ts
+++ b/packages/color-wheel/test/color-wheel.test.ts
@@ -628,4 +628,27 @@ describe('ColorWheel', () => {
         expect(el.value).to.equal(hue);
         expect(tinyHSLA.equals(el.color)).to.be.true;
     });
+    it('should flip orientation with dir="rtl"', async () => {
+        const el = await fixture<ColorWheel>(
+            html`
+                <sp-color-wheel></sp-color-wheel>
+            `
+        );
+
+        await elementUpdated(el);
+
+        const root = el.shadowRoot ? el.shadowRoot : el;
+        expect(
+            getComputedStyle(root.querySelector('.wheel') as HTMLElement)
+                .transform
+        ).to.equal('none');
+
+        el.setAttribute('dir', 'rtl');
+
+        await elementUpdated(el);
+        expect(
+            getComputedStyle(root.querySelector('.wheel') as HTMLElement)
+                .transform
+        ).to.equal('matrix(-1, 0, 0, 1, 0, 0)');
+    });
 });