diff --git a/.changeset/curly-jobs-eat.md b/.changeset/curly-jobs-eat.md new file mode 100644 index 0000000000..66186ca786 --- /dev/null +++ b/.changeset/curly-jobs-eat.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: added support for rtl language overflow scroll buttons diff --git a/elements/rh-tabs/rh-tabs.css b/elements/rh-tabs/rh-tabs.css index 3e706170b0..e4fc30459d 100644 --- a/elements/rh-tabs/rh-tabs.css +++ b/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"] { diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts index a9511c00aa..0c6eff2c0e 100644 --- a/elements/rh-tabs/rh-tabs.ts +++ b/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` -
+
${!this.#overflow.showScrollButtons ? '' : html` `}
@@ -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()}"> `}
diff --git a/elements/rh-tabs/test/rh-tabs.spec.ts b/elements/rh-tabs/test/rh-tabs.spec.ts index 4ec2856663..d9491cde45 100644 --- a/elements/rh-tabs/test/rh-tabs.spec.ts +++ b/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('', 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); + }); + }); }); });