fix(tabs): invert scroll functions when rtl, flip icons (#1575)

* fix(tabs): invert scroll functions when rtl, flip icons

* chore(tabs): add changeset

* chore(tabs): fix typo in changeset

* test(tabs): add rtl test, checking reversed scrolling

* test(tabs): remove clone use connectedCallback()

.changeset/curly-jobs-eat.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tabs>`: added support for rtl language overflow scroll buttons

elements/rh-tabs/rh-tabs.css

@@ -186,6 +186,10 @@ button:disabled {
   color: var(--_overflow-button-disabled-text-color);
 }
 
+.rtl :is(#previousTab, #nextTab) pf-icon {
+  rotate: 180deg;
+}
+
 @media screen and (min-width: 768px) {
   /* VERTICAL TABS */
   :host([vertical]) [part="container"] {

elements/rh-tabs/rh-tabs.ts

@@ -17,6 +17,8 @@ import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { RhTab, TabExpandEvent } from './rh-tab.js';
 import { RhTabPanel } from './rh-tab-panel.js';
 
+import { DirController } from '../../lib/DirController.js';
+
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 import { colorContextProvider, type ColorPalette } from '../../lib/context/color/provider.js';
 
@@ -147,6 +149,8 @@ export class RhTabs extends LitElement {
     getItems: () => this.tabs ?? [],
   });
 
+  #dir = new DirController(this);
+
   get tabs() {
     return this.#tabs.tabs;
   }
@@ -192,14 +196,15 @@ export class RhTabs extends LitElement {
 
   override render() {
     const { on = '' } = this;
+    const rtl = this.#dir.dir === 'rtl';
     return html`
-      <div id="rhds-container" class="${classMap({ [on]: !!on })}">
+      <div id="rhds-container" class="${classMap({ [on]: !!on, rtl })}">
         <div part="container" class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
           <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html`
             <button id="previousTab" tabindex="-1"
                     aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
                     ?disabled="${!this.#overflow.overflowLeft}"
-                    @click="${() => this.#overflow.scrollLeft()}">
+                    @click="${() => !rtl ? this.#overflow.scrollLeft() : this.#overflow.scrollRight()}">
               <pf-icon icon="angle-left" set="fas" loading="eager"></pf-icon>
             </button>`}
             <div style="display: contents;" role="tablist">
@@ -211,7 +216,7 @@ export class RhTabs extends LitElement {
                     tabindex="-1"
                     aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
                     ?disabled="${!this.#overflow.overflowRight}"
-                    @click="${() => this.#overflow.scrollRight()}">
+                    @click="${() => !rtl ? this.#overflow.scrollRight() : this.#overflow.scrollLeft()}">
               <pf-icon icon="angle-right" set="fas" loading="eager"></pf-icon>
             </button>`}
           </div>

elements/rh-tabs/test/rh-tabs.spec.ts

@@ -1,6 +1,6 @@
 import type { ReactiveElement } from 'lit';
 
-import { expect, html, nextFrame } from '@open-wc/testing';
+import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { setViewport, sendKeys } from '@web/test-runner-commands';
 
@@ -147,5 +147,32 @@ describe('<rh-tabs>', function() {
       const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';
       expect(tabsOverflow).to.be.equal(true);
     });
+
+    describe('reversed right to left language overflow actions', function() {
+      let body: HTMLElement;
+      let clone: RhTabs;
+      beforeEach(async function() {
+        body = document.querySelector('body')!;
+        body.setAttribute('dir', 'rtl');
+        element.connectedCallback();
+        await allUpdates(element);
+      });
+
+      it('previousTab should be disabled', async function() {
+        const previousTab: HTMLButtonElement = element.shadowRoot!.querySelector('#previousTab')!;
+        expect(previousTab.disabled).to.be.equal(true);
+      });
+
+      it('click on nextTab should scroll Left', async function() {
+        const nextTab: HTMLButtonElement = element.shadowRoot!.querySelector('#nextTab')!;
+        const firstTab = element.querySelector('rh-tab')!;
+        const preClickPosition = firstTab.getBoundingClientRect().x;
+        nextTab?.click();
+        await aTimeout(50);
+        // get first tab and check its x position
+        const afterClickPosition = firstTab.getBoundingClientRect().x;
+        expect(afterClickPosition).to.be.greaterThan(preClickPosition);
+      });
+    });
   });
 });