fix(color-wheel): add test for dir="rtl" orientation

adobe · Jul 11, 2023 · 1bc5ba2 · 1bc5ba2
1 parent 98ce8b2
commit 1bc5ba2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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)');
+    });
 });