From eadb07715acb82e0947fe5029057945a54468be6 Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Wed, 31 Jul 2024 12:14:41 -0400 Subject: [PATCH 01/15] Add ability to automatically hide tab-group scroll control when there are no longer any tabs to show --- docs/pages/components/tab-group.md | 142 ++++++++++++++++++ .../tab-group/tab-group.component.ts | 37 ++++- src/components/tab-group/tab-group.styles.ts | 6 + 3 files changed, 182 insertions(+), 3 deletions(-) diff --git a/docs/pages/components/tab-group.md b/docs/pages/components/tab-group.md index f85b27b7ee..3633d9beed 100644 --- a/docs/pages/components/tab-group.md +++ b/docs/pages/components/tab-group.md @@ -411,6 +411,148 @@ const App = () => ( ); ``` +### Auto hide scroll controls + +Scroll control is hidden when there are no more tabs to show on its end. + +```html:preview + + Tab 1 + Tab 2 + Tab 3 + Tab 4 + Tab 5 + Tab 6 + Tab 7 + Tab 8 + Tab 9 + Tab 10 + Tab 11 + Tab 12 + Tab 13 + Tab 14 + Tab 15 + Tab 16 + Tab 17 + Tab 18 + Tab 19 + Tab 20 + + Tab panel 1 + Tab panel 2 + Tab panel 3 + Tab panel 4 + Tab panel 5 + Tab panel 6 + Tab panel 7 + Tab panel 8 + Tab panel 9 + Tab panel 10 + Tab panel 11 + Tab panel 12 + Tab panel 13 + Tab panel 14 + Tab panel 15 + Tab panel 16 + Tab panel 17 + Tab panel 18 + Tab panel 19 + Tab panel 20 + +``` + +```jsx:react +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; + +const App = () => ( + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + Tab 4 + + + Tab 5 + + + Tab 6 + + + Tab 7 + + + Tab 8 + + + Tab 9 + + + Tab 10 + + + Tab 11 + + + Tab 12 + + + Tab 13 + + + Tab 14 + + + Tab 15 + + + Tab 16 + + + Tab 17 + + + Tab 18 + + + Tab 19 + + + Tab 20 + + + Tab panel 1 + Tab panel 2 + Tab panel 3 + Tab panel 4 + Tab panel 5 + Tab panel 6 + Tab panel 7 + Tab panel 8 + Tab panel 9 + Tab panel 10 + Tab panel 11 + Tab panel 12 + Tab panel 13 + Tab panel 14 + Tab panel 15 + Tab panel 16 + Tab panel 17 + Tab panel 18 + Tab panel 19 + Tab panel 20 + +); +``` + ### Manual Activation When focused, keyboard users can press [[Left]] or [[Right]] to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press [[Space]] or [[Enter]] before showing the tab panel (manual activation). diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index cfbd917fc7..b60cd6dd18 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -60,6 +60,9 @@ export default class SlTabGroup extends ShoelaceElement { @state() private hasScrollControls = false; + @state() private hideScrollStartButton = false; + @state() private hideScrollEndButton = false; + /** The placement of the tabs. */ @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top'; @@ -72,6 +75,9 @@ export default class SlTabGroup extends ShoelaceElement { /** Disables the scroll arrows that appear when tabs overflow. */ @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false; + /** Hide scroll buttons when inactive. */ + @property({ attribute: 'auto-hide-scroll-buttons', type: Boolean }) autoHideScrollButtons = false; + connectedCallback() { const whenAllDefined = Promise.all([ customElements.whenDefined('sl-tab'), @@ -365,6 +371,21 @@ export default class SlTabGroup extends ShoelaceElement { return nextTab; } + private updateScrollButtons() { + if (this.hasScrollControls && this.autoHideScrollButtons) { + this.hideScrollStartButton = !this.doesHaveTabsPassedScrollStart(); + this.hideScrollEndButton = !this.doesHaveTabsPassScrollEnd(); + } + } + + private doesHaveTabsPassedScrollStart() { + return Math.abs(this.nav.scrollLeft) > 0; + } + + private doesHaveTabsPassScrollEnd() { + return (Math.abs(this.nav.scrollLeft) + this.nav.clientWidth) < this.nav.scrollWidth; + } + @watch('noScrollControls', { waitUntilFirstUpdate: true }) updateScrollControls() { if (this.noScrollControls) { @@ -378,6 +399,8 @@ export default class SlTabGroup extends ShoelaceElement { this.hasScrollControls = ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1; } + + this.updateScrollButtons(); } @watch('placement', { waitUntilFirstUpdate: true }) @@ -425,7 +448,11 @@ export default class SlTabGroup extends ShoelaceElement { +
@@ -446,7 +473,11 @@ export default class SlTabGroup extends ShoelaceElement { Date: Wed, 31 Jul 2024 14:48:28 -0400 Subject: [PATCH 02/15] code review updates --- docs/pages/components/tab-group.md | 2 +- src/components/tab-group/tab-group.component.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/pages/components/tab-group.md b/docs/pages/components/tab-group.md index 3633d9beed..a9b3adc088 100644 --- a/docs/pages/components/tab-group.md +++ b/docs/pages/components/tab-group.md @@ -413,7 +413,7 @@ const App = () => ( ### Auto hide scroll controls -Scroll control is hidden when there are no more tabs to show on its end. +When tabs are scrolled all the way to one side, the scroll button on that side can't be clicked. Add the `auto-hide-scroll-buttons` attribute to the tab group to hide the effected button in that case. ```html:preview diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index b60cd6dd18..fd28bce961 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -61,6 +61,7 @@ export default class SlTabGroup extends ShoelaceElement { @state() private hasScrollControls = false; @state() private hideScrollStartButton = false; + @state() private hideScrollEndButton = false; /** The placement of the tabs. */ From 31a2032087503a8964696d5cd07bd55992d36e28 Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Wed, 31 Jul 2024 16:34:38 -0400 Subject: [PATCH 03/15] update and document how scroll buttons are hidden --- .../tab-group/tab-group.component.ts | 48 +++++++++++++++---- 1 file changed, 38 insertions(+), 10 deletions(-) diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index fd28bce961..3441d1bfc1 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -60,9 +60,9 @@ export default class SlTabGroup extends ShoelaceElement { @state() private hasScrollControls = false; - @state() private hideScrollStartButton = false; + @state() private shouldHideScrollStartButton = false; - @state() private hideScrollEndButton = false; + @state() private shouldHideScrollEndButton = false; /** The placement of the tabs. */ @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top'; @@ -374,17 +374,45 @@ export default class SlTabGroup extends ShoelaceElement { private updateScrollButtons() { if (this.hasScrollControls && this.autoHideScrollButtons) { - this.hideScrollStartButton = !this.doesHaveTabsPassedScrollStart(); - this.hideScrollEndButton = !this.doesHaveTabsPassScrollEnd(); + const isRtl = this.localize.dir() === 'rtl'; + const doesHaveTabsPassedScrollStart = () => { + return isRtl ? + this.canScrollRight(isRtl) : + this.canScrollLeft(isRtl); + } + + const doesHaveTabsPassScrollEnd = () => { + return isRtl ? + this.canScrollLeft(isRtl) : + this.canScrollRight(isRtl); + } + + this.shouldHideScrollStartButton = !doesHaveTabsPassedScrollStart(); + this.shouldHideScrollEndButton = !doesHaveTabsPassScrollEnd(); } } - private doesHaveTabsPassedScrollStart() { - return Math.abs(this.nav.scrollLeft) > 0; + /** + * Are there tabs overflowing the left side of the {@link nav} container that can be scrolled into view + */ + private canScrollLeft(isRtl: boolean) { + // for 'rtl' this correlates with tabs overflowing the 'end' of the container + if (isRtl) { + const tolerance = 1; // Tolerance added to handle potential sub-pixel calculations and rounding errors + return Math.abs(this.nav.scrollLeft) + tolerance < this.nav.scrollWidth - this.nav.clientWidth; + } + return this.nav.scrollLeft > 0; } - private doesHaveTabsPassScrollEnd() { - return (Math.abs(this.nav.scrollLeft) + this.nav.clientWidth) < this.nav.scrollWidth; + /** + * Are there tabs overflowing the right side of the {@link nav} container that can be scrolled into view + */ + private canScrollRight(isRtl: boolean) { + // for 'rtl' this correlates with tabs overflowing the 'start' of the container + if (isRtl) { + return this.nav.scrollLeft < 0; + } + return (this.nav.clientWidth + this.nav.scrollLeft) < this.nav.scrollWidth; } @watch('noScrollControls', { waitUntilFirstUpdate: true }) @@ -452,7 +480,7 @@ export default class SlTabGroup extends ShoelaceElement { class=${classMap({ "tab-group__scroll-button": true, "tab-group__scroll-button--start": true, - "tab-group__scroll-button--start--hidden": this.hideScrollStartButton + "tab-group__scroll-button--start--hidden": this.shouldHideScrollStartButton })} name=${isRtl ? 'chevron-right' : 'chevron-left'} library="system" @@ -477,7 +505,7 @@ export default class SlTabGroup extends ShoelaceElement { class=${classMap({ "tab-group__scroll-button": true, "tab-group__scroll-button--end": true, - "tab-group__scroll-button--end--hidden": this.hideScrollEndButton + "tab-group__scroll-button--end--hidden": this.shouldHideScrollEndButton })} name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" From a29eabe7730dfe60e03cc2944d565237015621ad Mon Sep 17 00:00:00 2001 From: Yehuda Ringler Date: Wed, 31 Jul 2024 17:09:52 -0400 Subject: [PATCH 04/15] AUTO-HIDE: Simplify --- .../tab-group/tab-group.component.ts | 40 +++---------------- 1 file changed, 6 insertions(+), 34 deletions(-) diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index 3441d1bfc1..e69c137252 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -374,45 +374,17 @@ export default class SlTabGroup extends ShoelaceElement { private updateScrollButtons() { if (this.hasScrollControls && this.autoHideScrollButtons) { - const isRtl = this.localize.dir() === 'rtl'; - const doesHaveTabsPassedScrollStart = () => { - return isRtl ? - this.canScrollRight(isRtl) : - this.canScrollLeft(isRtl); - } - - const doesHaveTabsPassScrollEnd = () => { - return isRtl ? - this.canScrollLeft(isRtl) : - this.canScrollRight(isRtl); - } - - this.shouldHideScrollStartButton = !doesHaveTabsPassedScrollStart(); - this.shouldHideScrollEndButton = !doesHaveTabsPassScrollEnd(); + this.shouldHideScrollStartButton = this.scrollFromStart() <= 0; + this.shouldHideScrollEndButton = this.isScrolledToEnd(); } } - /** - * Are there tabs overflowing the left side of the {@link nav} container that can be scrolled into view - */ - private canScrollLeft(isRtl: boolean) { - // for 'rtl' this correlates with tabs overflowing the 'end' of the container - if (isRtl) { - const tolerance = 1; // Tolerance added to handle potential sub-pixel calculations and rounding errors - return Math.abs(this.nav.scrollLeft) + tolerance < this.nav.scrollWidth - this.nav.clientWidth; - } - return this.nav.scrollLeft > 0; + private isScrolledToEnd() { + return (this.scrollFromStart() + this.nav.clientWidth) >= this.nav.scrollWidth; } - /** - * Are there tabs overflowing the right side of the {@link nav} container that can be scrolled into view - */ - private canScrollRight(isRtl: boolean) { - // for 'rtl' this correlates with tabs overflowing the 'start' of the container - if (isRtl) { - return this.nav.scrollLeft < 0; - } - return (this.nav.clientWidth + this.nav.scrollLeft) < this.nav.scrollWidth; + private scrollFromStart() { + return this.localize.dir() === 'rtl' ? -this.nav.scrollLeft : this.nav.scrollLeft; } @watch('noScrollControls', { waitUntilFirstUpdate: true }) From d603b374114afa10a2e35eedbddd148a89a697cb Mon Sep 17 00:00:00 2001 From: Yehuda Ringler Date: Wed, 31 Jul 2024 17:39:17 -0400 Subject: [PATCH 05/15] AUTO-HIDE: extract to constant --- src/components/tab-group/tab-group.component.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index e69c137252..f2c497a6c9 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -372,15 +372,21 @@ export default class SlTabGroup extends ShoelaceElement { return nextTab; } + /** + * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so + * we add one pixel of wiggle room to our calculations. + */ + private scrollOffset = 1; + private updateScrollButtons() { if (this.hasScrollControls && this.autoHideScrollButtons) { - this.shouldHideScrollStartButton = this.scrollFromStart() <= 0; + this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset; this.shouldHideScrollEndButton = this.isScrolledToEnd(); } } private isScrolledToEnd() { - return (this.scrollFromStart() + this.nav.clientWidth) >= this.nav.scrollWidth; + return (this.scrollFromStart() + this.nav.clientWidth) >= this.nav.scrollWidth - this.scrollOffset; } private scrollFromStart() { From 91db30e23e2f86803a0ff5a952a71d4f3db20da1 Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Wed, 31 Jul 2024 18:13:31 -0400 Subject: [PATCH 06/15] update changelog --- docs/pages/resources/changelog.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 1d79ae57b1..2e27103215 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -12,6 +12,9 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). +## Next +- Added ability to auto hide scroll buttons for `` when scroll button is not clickable by adding the `auto-hide-scroll-buttons` attribute. + ## 2.16.0 - Added the Czech translation [#2084] From 05ad2969984fb7bf263ca135b04ab12881312d9b Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Wed, 31 Jul 2024 18:15:18 -0400 Subject: [PATCH 07/15] include pr number in changelog update --- docs/pages/resources/changelog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 2e27103215..fb65547330 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -13,7 +13,7 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). ## Next -- Added ability to auto hide scroll buttons for `` when scroll button is not clickable by adding the `auto-hide-scroll-buttons` attribute. +- Added ability to auto hide scroll buttons for `` when scroll button is not clickable by adding the `auto-hide-scroll-buttons` attribute. [#2128] ## 2.16.0 From e23553ee2f7d3b730cce6a206ee9b2eb6508a52b Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Wed, 31 Jul 2024 18:16:56 -0400 Subject: [PATCH 08/15] add line --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index fb65547330..acdab320d1 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -13,6 +13,7 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). ## Next + - Added ability to auto hide scroll buttons for `` when scroll button is not clickable by adding the `auto-hide-scroll-buttons` attribute. [#2128] ## 2.16.0 From 007b022f3b7c7cfb9598635d163596f0c7e1debc Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Thu, 1 Aug 2024 14:20:48 -0400 Subject: [PATCH 09/15] apply suggested changes --- src/components/tab-group/tab-group.component.ts | 5 +++-- src/components/tab-group/tab-group.styles.ts | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index f2c497a6c9..fee2708d6d 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -1,7 +1,8 @@ +import '../../internal/scrollend-polyfill.js'; import { classMap } from 'lit/directives/class-map.js'; +import { eventOptions, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; -import { property, query, state } from 'lit/decorators.js'; import { scrollIntoView } from '../../internal/scroll.js'; import { watch } from '../../internal/watch.js'; import componentStyles from '../../styles/component.styles.js'; @@ -61,7 +62,6 @@ export default class SlTabGroup extends ShoelaceElement { @state() private hasScrollControls = false; @state() private shouldHideScrollStartButton = false; - @state() private shouldHideScrollEndButton = false; /** The placement of the tabs. */ @@ -378,6 +378,7 @@ export default class SlTabGroup extends ShoelaceElement { */ private scrollOffset = 1; + @eventOptions({ passive: true }) private updateScrollButtons() { if (this.hasScrollControls && this.autoHideScrollButtons) { this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset; diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts index 1e34b0cae1..4330bf4732 100644 --- a/src/components/tab-group/tab-group.styles.ts +++ b/src/components/tab-group/tab-group.styles.ts @@ -33,8 +33,7 @@ export default css` .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden, .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden { - opacity: 0; - pointer-events: none; + visibility: hidden; } .tab-group__body { From e95ad56c3b38a36e768be84a7110618914be621b Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Mon, 5 Aug 2024 11:35:47 -0400 Subject: [PATCH 10/15] Prevent tab-group scroll buttons from being focusable --- src/components/tab-group/tab-group.component.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index fee2708d6d..c9de7e1f7b 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -463,6 +463,8 @@ export default class SlTabGroup extends ShoelaceElement { })} name=${isRtl ? 'chevron-right' : 'chevron-left'} library="system" + tabindex="-1" + aria-hidden="true" label=${this.localize.term('scrollToStart')} @click=${this.handleScrollToStart} > @@ -488,6 +490,8 @@ export default class SlTabGroup extends ShoelaceElement { })} name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" + tabindex="-1" + aria-hidden="true" label=${this.localize.term('scrollToEnd')} @click=${this.handleScrollToEnd} > From 4072e6eab6c7df5a1f424702337b28d938fe8978 Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Mon, 5 Aug 2024 13:53:16 -0400 Subject: [PATCH 11/15] prettier fix --- src/components/tab-group/tab-group.component.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index fee2708d6d..26f833a7da 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -387,7 +387,7 @@ export default class SlTabGroup extends ShoelaceElement { } private isScrolledToEnd() { - return (this.scrollFromStart() + this.nav.clientWidth) >= this.nav.scrollWidth - this.scrollOffset; + return this.scrollFromStart() + this.nav.clientWidth >= this.nav.scrollWidth - this.scrollOffset; } private scrollFromStart() { @@ -457,9 +457,9 @@ export default class SlTabGroup extends ShoelaceElement { part="scroll-button scroll-button--start" exportparts="base:scroll-button__base" class=${classMap({ - "tab-group__scroll-button": true, - "tab-group__scroll-button--start": true, - "tab-group__scroll-button--start--hidden": this.shouldHideScrollStartButton + 'tab-group__scroll-button': true, + 'tab-group__scroll-button--start': true, + 'tab-group__scroll-button--start--hidden': this.shouldHideScrollStartButton })} name=${isRtl ? 'chevron-right' : 'chevron-left'} library="system" @@ -469,7 +469,7 @@ export default class SlTabGroup extends ShoelaceElement { ` : ''} -
+
@@ -482,9 +482,9 @@ export default class SlTabGroup extends ShoelaceElement { part="scroll-button scroll-button--end" exportparts="base:scroll-button__base" class=${classMap({ - "tab-group__scroll-button": true, - "tab-group__scroll-button--end": true, - "tab-group__scroll-button--end--hidden": this.shouldHideScrollEndButton + 'tab-group__scroll-button': true, + 'tab-group__scroll-button--end': true, + 'tab-group__scroll-button--end--hidden': this.shouldHideScrollEndButton })} name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" From dd1d34d063c884e25b7fdee5ecd71acc67aec41e Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Mon, 5 Aug 2024 14:27:20 -0400 Subject: [PATCH 12/15] Set default for 'auto-hide-scroll-buttons' to true --- docs/pages/components/tab-group.md | 2 +- src/components/tab-group/tab-group.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/components/tab-group.md b/docs/pages/components/tab-group.md index a9b3adc088..7deb937ff6 100644 --- a/docs/pages/components/tab-group.md +++ b/docs/pages/components/tab-group.md @@ -411,7 +411,7 @@ const App = () => ( ); ``` -### Auto hide scroll controls +### Auto hide scroll controls When tabs are scrolled all the way to one side, the scroll button on that side can't be clicked. Add the `auto-hide-scroll-buttons` attribute to the tab group to hide the effected button in that case. diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index b6bb0f1877..0c1dfe0de5 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -77,7 +77,7 @@ export default class SlTabGroup extends ShoelaceElement { @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false; /** Hide scroll buttons when inactive. */ - @property({ attribute: 'auto-hide-scroll-buttons', type: Boolean }) autoHideScrollButtons = false; + @property({ attribute: 'auto-hide-scroll-buttons', type: Boolean }) autoHideScrollButtons = true; connectedCallback() { const whenAllDefined = Promise.all([ From 78c6148d10913f69dfe2f9bd84b604861f87d62c Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Mon, 5 Aug 2024 14:55:57 -0400 Subject: [PATCH 13/15] Make auto hiding scroll buttons the default behavior --- docs/pages/components/tab-group.md | 6 +++--- docs/pages/resources/changelog.md | 2 +- src/components/tab-group/tab-group.component.ts | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/pages/components/tab-group.md b/docs/pages/components/tab-group.md index 7deb937ff6..6fb3ac9d94 100644 --- a/docs/pages/components/tab-group.md +++ b/docs/pages/components/tab-group.md @@ -411,12 +411,12 @@ const App = () => ( ); ``` -### Auto hide scroll controls +### Fixed scroll controls -When tabs are scrolled all the way to one side, the scroll button on that side can't be clicked. Add the `auto-hide-scroll-buttons` attribute to the tab group to hide the effected button in that case. +When tabs are scrolled all the way to one side, the scroll button on that side can't be clicked. Set the `fixed-scroll-controls` attribute to keep the effected button visible in that case. ```html:preview - + Tab 1 Tab 2 Tab 3 diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 4326d21086..42aae0089d 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,7 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next -- Added ability to auto hide scroll buttons for `` when scroll button is not clickable by adding the `auto-hide-scroll-buttons` attribute. [#2128] +- Added ability to auto hide scroll buttons for `` when scroll button is not clickable. [#2128] - Added support for using `` in `` default slot [#2015] - Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127] diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index 0b2038320b..5f967f4f89 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -76,8 +76,8 @@ export default class SlTabGroup extends ShoelaceElement { /** Disables the scroll arrows that appear when tabs overflow. */ @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false; - /** Hide scroll buttons when inactive. */ - @property({ attribute: 'auto-hide-scroll-buttons', type: Boolean }) autoHideScrollButtons = true; + /** Prevent scroll buttons from being hidden when inactive. */ + @property({ attribute: 'fixed-scroll-controls', type: Boolean }) fixedScrollControls = false; connectedCallback() { const whenAllDefined = Promise.all([ @@ -380,7 +380,7 @@ export default class SlTabGroup extends ShoelaceElement { @eventOptions({ passive: true }) private updateScrollButtons() { - if (this.hasScrollControls && this.autoHideScrollButtons) { + if (this.hasScrollControls && !this.fixedScrollControls) { this.shouldHideScrollStartButton = this.scrollFromStart() <= this.scrollOffset; this.shouldHideScrollEndButton = this.isScrolledToEnd(); } From c2a525cf77522b2d094c21dab2705c7eba2ef6ed Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Mon, 5 Aug 2024 15:57:23 -0400 Subject: [PATCH 14/15] Update changelog --- docs/pages/resources/changelog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 42aae0089d..e6c4b58d94 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,7 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next -- Added ability to auto hide scroll buttons for `` when scroll button is not clickable. [#2128] +- Added ability to auto hide scroll buttons for `` when scroll button is not clickable. Added the `fix-scroll-control` property to optionally prevent this behavior. [#2128] - Added support for using `` in `` default slot [#2015] - Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127] From bc02e713199d30c00e3ba4f0d53abfbabc54b2ac Mon Sep 17 00:00:00 2001 From: Shmuel Leider Date: Mon, 5 Aug 2024 16:11:23 -0400 Subject: [PATCH 15/15] update changelog --- docs/pages/resources/changelog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index e6c4b58d94..faf00555f4 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,7 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next -- Added ability to auto hide scroll buttons for `` when scroll button is not clickable. Added the `fix-scroll-control` property to optionally prevent this behavior. [#2128] +- Scroll buttons for `` auto hide when they are not clickable. The `fixed-scroll-controls` attribute can be included to prevent this behavior. [#2128] - Added support for using `` in `` default slot [#2015] - Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127]