From bf590ab028443b5df1f1ed1b1d73dda69c887918 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 18 Sep 2023 09:38:56 -0400 Subject: [PATCH 1/5] fix(Tabs): allow RTL scrolling --- .../react-core/src/components/Tabs/Tabs.tsx | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 5781894ac37..ca572b1be9d 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -140,6 +140,7 @@ class Tabs extends React.Component { static displayName = 'Tabs'; tabList = React.createRef(); leftScrollButtonRef = React.createRef(); + private direction = 'ltr'; constructor(props: TabsProps) { super(props); this.state = { @@ -263,7 +264,7 @@ class Tabs extends React.Component { }, 100); }; - scrollLeft = () => { + scrollBack = () => { // find first Element that is fully in view on the left, then scroll to the element before it if (this.tabList.current) { const container = this.tabList.current; @@ -278,12 +279,18 @@ class Tabs extends React.Component { } } if (lastElementOutOfView) { - container.scrollLeft -= lastElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls left to go back + container.scrollLeft -= lastElementOutOfView.scrollWidth; + } else { + // RTL scrolls right to go back + container.scrollLeft += lastElementOutOfView.scrollWidth; + } } } }; - scrollRight = () => { + scrollForward = () => { // find last Element that is fully in view on the right, then scroll to the element after it if (this.tabList.current) { const container = this.tabList.current as any; @@ -297,7 +304,13 @@ class Tabs extends React.Component { } } if (firstElementOutOfView) { - container.scrollLeft += firstElementOutOfView.scrollWidth; + if (this.direction === 'ltr') { + // LTR scrolls right to go forward + container.scrollLeft += firstElementOutOfView.scrollWidth; + } else { + // RTL scrolls left to go forward + container.scrollLeft -= firstElementOutOfView.scrollWidth; + } } } }; @@ -314,6 +327,7 @@ class Tabs extends React.Component { if (canUseDOM) { window.addEventListener('resize', this.handleScrollButtons, false); } + this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction'); // call the handle resize function to check if scroll buttons should be shown this.handleScrollButtons(); } @@ -498,7 +512,7 @@ class Tabs extends React.Component { type="button" className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)} aria-label={leftScrollAriaLabel} - onClick={this.scrollLeft} + onClick={this.scrollBack} disabled={disableLeftScrollButton} aria-hidden={disableLeftScrollButton} ref={this.leftScrollButtonRef} @@ -515,7 +529,7 @@ class Tabs extends React.Component { type="button" className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)} aria-label={rightScrollAriaLabel} - onClick={this.scrollRight} + onClick={this.scrollForward} disabled={disableRightScrollButton} aria-hidden={disableRightScrollButton} > From 8bca2ac57f10589422ebf91beb24f75a324a68a7 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 18 Sep 2023 13:47:18 -0400 Subject: [PATCH 2/5] add direction assignment to update --- packages/react-core/src/components/Tabs/Tabs.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index ca572b1be9d..84377c12b2e 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -374,6 +374,8 @@ class Tabs extends React.Component { } else if (prevState.enableScrollButtons && !enableScrollButtons) { this.setState({ showScrollButtons: false }); } + + this.direction = getComputedStyle(this.tabList.current).getPropertyValue('direction'); } render() { From ffcc6e3bba87a05aaf1372a24282b8a5a3cf8435 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 19 Sep 2023 10:51:32 -0400 Subject: [PATCH 3/5] update aria label descriptions --- packages/react-core/src/components/Tabs/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 84377c12b2e..9f76f33f841 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -63,9 +63,9 @@ export interface TabsProps extends Omit Date: Thu, 21 Sep 2023 11:57:14 -0400 Subject: [PATCH 4/5] add props and deprecate old, update internal state names --- .../react-core/src/components/Tabs/Tabs.tsx | 48 +++++++++++-------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 9f76f33f841..45d1ffcfdbf 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -63,10 +63,14 @@ export interface TabsProps extends Omit { enableScrollButtons: false, showScrollButtons: false, renderScrollButtons: false, - disableLeftScrollButton: true, - disableRightScrollButton: true, + disableBackScrollButton: true, + disableForwardScrollButton: true, shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case uncontrolledActiveKey: this.props.defaultActiveKey, uncontrolledIsExpandedLocal: this.props.defaultIsExpanded, @@ -178,7 +182,9 @@ class Tabs extends React.Component { isBox: false, hasNoBorderBottom: false, leftScrollAriaLabel: 'Scroll left', + backScrollAriaLabel: 'Scroll back', rightScrollAriaLabel: 'Scroll right', + forwardScrollAriaLabel: 'Scroll forward', component: TabsComponent.div, mountOnEnter: false, unmountOnExit: false, @@ -233,8 +239,8 @@ class Tabs extends React.Component { clearTimeout(this.scrollTimeout); this.scrollTimeout = setTimeout(() => { const container = this.tabList.current; - let disableLeftScrollButton = true; - let disableRightScrollButton = true; + let disableBackScrollButton = true; + let disableForwardScrollButton = true; let enableScrollButtons = false; let overflowingTabCount = 0; @@ -247,8 +253,8 @@ class Tabs extends React.Component { enableScrollButtons = overflowOnLeft || overflowOnRight; - disableLeftScrollButton = !overflowOnLeft; - disableRightScrollButton = !overflowOnRight; + disableBackScrollButton = !overflowOnLeft; + disableForwardScrollButton = !overflowOnRight; } if (isOverflowHorizontal) { @@ -257,8 +263,8 @@ class Tabs extends React.Component { this.setState({ enableScrollButtons, - disableLeftScrollButton, - disableRightScrollButton, + disableBackScrollButton, + disableForwardScrollButton, overflowingTabCount }); }, 100); @@ -392,6 +398,8 @@ class Tabs extends React.Component { hasNoBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, + backScrollAriaLabel, + forwardScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, @@ -416,8 +424,8 @@ class Tabs extends React.Component { const { showScrollButtons, renderScrollButtons, - disableLeftScrollButton, - disableRightScrollButton, + disableBackScrollButton, + disableForwardScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal, @@ -513,10 +521,10 @@ class Tabs extends React.Component { From 43a6884d0e3bd54475467de1786029c0d76b83d9 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 21 Sep 2023 13:08:07 -0400 Subject: [PATCH 5/5] update desc --- packages/react-core/src/components/Tabs/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 45d1ffcfdbf..ea37e047675 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -63,9 +63,9 @@ export interface TabsProps extends Omit