[Tabs] Refactor to useRenderElement
#1881
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
mj12albert
commented
May 7, 2025
mj12albert
commented
- I have followed (at least) the PR section of the contributing guide.
mj12albert
added
core
commit: |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
mj12albert
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
michaldudak
reviewed
May 7, 2025
| @@ -94,12 +203,12 @@ export const TabsIndicator = React.forwardRef(function TabIndicator( | |||
|
|
|||
| export namespace TabsIndicator { | |||
| export interface State extends TabsRoot.State { | |||
| selectedTabPosition: ActiveTabPosition | null; | |||
| selectedTabSize: ActiveTabSize | null; | |||
| selectedTabPosition: TabPosition | null; | |||
There was a problem hiding this comment.
The TabPosition and TabSize types should be publicly exported as they can be used in a render function
| import { TabsListContext } from './TabsListContext'; | ||
|
|
||
| const EMPTY_ARRAY: number[] = []; | ||
|
|
||
| function getInset(tab: HTMLElement, tabsList: HTMLElement) { |
There was a problem hiding this comment.
nit: could you move these helper functions below the component? This way, while reading the code we'll go from high to low level details.
| @@ -104,7 +202,7 @@ export const TabsList = React.forwardRef(function TabsList( | |||
| export namespace TabsList { | |||
| export type State = TabsRoot.State; | |||
|
|
|||
| export interface Props extends BaseUIComponentProps<'div', TabsList.State> { | |||
| export interface Props extends BaseUIComponentProps<'div', TabsRoot.State> { | |||
There was a problem hiding this comment.
Suggested change
| export interface Props extends BaseUIComponentProps<'div', TabsRoot.State> { | |
| export interface Props extends BaseUIComponentProps<'div', State> { |
mj12albert
force-pushed
the
tabs/use-render-element
branch
from
71d70d4 to
87c9d5a
Compare
|
Fixed the comments ~ @michaldudak |
michaldudak
reviewed
May 8, 2025
| export type TabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none'; | ||
| export type TabValue = any | null; | ||
|
|
||
| export namespace TabsRoot { | ||
| export type State = { | ||
| orientation: TabsOrientation; | ||
| orientation: Orientation; |
There was a problem hiding this comment.
IMO we could re-export Orientation in the TabsRoot namespace, so types are colocated from devs' point of view.
There was a problem hiding this comment.
Makes sense, should types like TabValue/TabActivationDirection be namespaced under the root too then? (or the most suitable part) @michaldudak
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.