Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Tabs): Emit the id of an activated Tab Panel #1854

Merged
merged 10 commits into from
Feb 11, 2025

Conversation

VincentSmedinga
Copy link
Contributor

@VincentSmedinga VincentSmedinga commented Feb 5, 2025

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

This adds an onChange callback to Tabs that emits the id of a newly activated Tab Panel. Addresses #1846.

Why

Applications can use this information, e.g. to store which Tab is active.

How

Added an onChange prop and call the provided function after updating the active Tab id.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

  • Add or update unit tests
  • Add or update documentation
  • Add or update stories
  • Add or update exports in index.* files
  • Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

  • Should the callback include the event, as requested? I’m not sure how that can be achieved.

@VincentSmedinga VincentSmedinga requested a review from a team as a code owner February 5, 2025 14:52
@VincentSmedinga VincentSmedinga changed the base branch from develop to release/v0.14.1 February 5, 2025 14:56
@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 5, 2025 14:57 Destroyed
Copy link
Contributor

@RubenSibon RubenSibon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 7, 2025 14:30 Destroyed
@RubenSibon RubenSibon self-requested a review February 10, 2025 12:51
@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 11, 2025 08:31 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 11, 2025 08:36 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 11, 2025 08:42 Destroyed
@@ -15,10 +15,12 @@ import { useKeyboardFocus } from '../common/useKeyboardFocus'
export type TabsProps = {
/** The number of the active tab. Corresponds to its `tab` value. */
activeTab?: number
/* Provides the id of the activated tab. */
onChange?: (tabId: number) => void
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the callback include the event, as requested? I’m not sure how to achieve that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not really necessary imo. The Button onClick handler returns the event, so you can access it if you need it.

@@ -15,10 +15,12 @@ import { useKeyboardFocus } from '../common/useKeyboardFocus'
export type TabsProps = {
/** The number of the active tab. Corresponds to its `tab` value. */
activeTab?: number
/* Provides the id of the activated tab. */
onChange?: (tabId: number) => void
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not really necessary imo. The Button onClick handler returns the event, so you can access it if you need it.

@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 11, 2025 09:38 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 11, 2025 09:39 Destroyed
@github-actions github-actions bot temporarily deployed to demo-DES-1168-tabs-change-event February 11, 2025 12:09 Destroyed
@alimpens alimpens merged commit 58a4976 into release/v0.14.1 Feb 11, 2025
4 checks passed
@alimpens alimpens deleted the feat/DES-1168-tabs-change-event branch February 11, 2025 12:46
@github-actions github-actions bot mentioned this pull request Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

4 participants