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(react-interactive-tab): InteractiveTab component initial implementation #217

Merged
merged 7 commits into from
Sep 25, 2024

Conversation

dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Aug 19, 2024

Context

Previously, TabList was unable to support interactive tabs, such as tabs with a dismiss/close button to remove them, or tabs that included a dropdown or search box.

The primary slot for a Tab was a button designated with role=tab. Per ARIA guidelines, elements with role=tab are expected to only contain presentational children.

New Behavior

This PR introduces the InteractiveTab component, which is an extension of Tab, utilizing a div as its base. It features three additional slots: button (where role=tab is applied), beforeContent, and afterContent. This structure, reminiscent of the Input component, permits the insertion of interactive elements both before and after the tab button.

The InteractiveTab applies indicator styles to the root div and button styles to the button slot.

Related Issue(s)

Blocked by microsoft/fluentui#32125
Addresses issue #32078

@dmytrokirpa dmytrokirpa added the @fluent-contrib/react-interactive-tab Main label for the @fluentui-contrib/react-interactive-tab package label Aug 19, 2024
@dmytrokirpa dmytrokirpa self-assigned this Aug 19, 2024
@dmytrokirpa dmytrokirpa force-pushed the react-interactive-tab branch from 1fb8737 to c32f625 Compare August 21, 2024 14:13
@Hotell Hotell requested review from Hotell and removed request for Hotell August 26, 2024 15:19
@dmytrokirpa dmytrokirpa marked this pull request as ready for review September 10, 2024 10:51
@dmytrokirpa dmytrokirpa requested review from a team as code owners September 10, 2024 10:51
@tudorpopams tudorpopams requested a review from Hotell September 10, 2024 12:05
Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

left some comments. ty

@dmytrokirpa dmytrokirpa requested a review from Hotell September 11, 2024 09:57
Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

let's wait on folks guidance with the jsx custom pragma setup

packages/react-interactive-tab/package.json Outdated Show resolved Hide resolved
Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

1 actionable - for the jsx pragma

ty

@dmytrokirpa dmytrokirpa merged commit d58879f into microsoft:main Sep 25, 2024
3 checks passed
@dmytrokirpa dmytrokirpa deleted the react-interactive-tab branch September 25, 2024 14:12
@dmytrokirpa dmytrokirpa restored the react-interactive-tab branch September 25, 2024 14:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
@fluent-contrib/react-interactive-tab Main label for the @fluentui-contrib/react-interactive-tab package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants