diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md index 9c1085eaf..90e8b9c97 100644 --- a/docs/components/tab-group.md +++ b/docs/components/tab-group.md @@ -162,4 +162,22 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl ``` +### 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). + +```html preview + + General + Custom + Advanced + Disabled + + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + This is a disabled tab panel. + +``` + [component-metadata:sl-tab-group] diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index e2743e374..33dd532d9 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next - Added `click()` method to `sl-checkbox`, `sl-radio`, and `sl-switch` +- Added the `activation` prop to `sl-tab-group` to allow for automatic and manual tab activation - Fixed a bug in `sl-tooltip` where events weren't properly cleaned up on disconnect - Fixed a bug in `sl-tooltip` where they wouldn't display after toggling `disabled` off and on again [#391](https://github.com/shoelace-style/shoelace/issues/391) - Fixed a bug in `sl-details` where `show()` and `hide()` would toggle the control when disabled diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 3349e3ef3..7d58bf9d7 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -44,6 +44,12 @@ export default class SlTabGroup extends LitElement { /** The placement of the tabs. */ @property() placement: 'top' | 'bottom' | 'left' | 'right' = 'top'; + /** + * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to + * manual, the tab will receive focus but will not show until the user presses spacebar or enter. + */ + @property() activation: 'auto' | 'manual' = 'auto'; + /** Disables the scroll arrows that appear when tabs overflow. */ @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false; @@ -177,6 +183,10 @@ export default class SlTabGroup extends LitElement { this.tabs[index].focus({ preventScroll: true }); + if (this.activation === 'auto') { + this.setActiveTab(this.tabs[index]); + } + if (['top', 'bottom'].includes(this.placement)) { scrollIntoView(this.tabs[index], this.nav, 'horizontal'); }