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

Rename Tab component "style" property #1256

Closed
2 tasks done
lars-jpeg opened this issue Feb 1, 2024 · 2 comments
Closed
2 tasks done

Rename Tab component "style" property #1256

lars-jpeg opened this issue Feb 1, 2024 · 2 comments
Labels
🐛 bug Something isn't working confirmed This bug was confirmed

Comments

@lars-jpeg
Copy link

lars-jpeg commented Feb 1, 2024

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Summary

I would like Flowbite Tabs component to respect the established styling related properties from native html elements, namely "style" and "className".

In the case of the Tabs component, the "style" html property is Omitted in favor of Flowbite React's own style attribute:

export interface TabsProps extends Omit<ComponentProps<'div'>, 'ref' | 'style'> {
  onActiveTabChange?: (activeTab: number) => void;
  style?: keyof TabStyles;
  theme?: DeepPartial<FlowbiteTabsTheme>;
}

Unnecessary styling solution narrowing

I think this is an unnecessary narrowing of the component interface. Tabs is still exposing className so why can't we apply styles through the native style-property?

Eslint problem

<Tabs style="underline"/>
also results in
Style prop value must be an object eslint[react/style-prop-object](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/style-prop-object.md)

Codebase cleanliness

In my codebase I am wrapping each Flowbite component and disabling className and style properties with a utility type so that other developers in the company don't override our style system. The Tabs component's style property not being of type React.CSSProperties causes unnecessary complications in this pattern.

Proposed solution

Stop omitting 'style' from the Tabs component interface and rename the current style-property to something else.

@SutuSebastian
Copy link
Collaborator

This totally makes sense, will mark it as "to fix" for the upcoming releases.

@SutuSebastian
Copy link
Collaborator

Fixed in flowbite-react@0.10.0 release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working confirmed This bug was confirmed
Projects
None yet
Development

No branches or pull requests

2 participants