themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.78k stars 396 forks source link

Rename Tab component "style" property #1256

Closed lars-jpeg closed 3 weeks ago

lars-jpeg commented 5 months ago

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 commented 5 months ago

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

SutuSebastian commented 3 weeks ago

Fixed in flowbite-react@0.10.0 release.