flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Rename Tab component "style" property

Open lars-jpeg opened this issue 2 years ago • 1 comments

  • [x] I have searched the Issues to see if this bug has already been reported
  • [x] 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.

lars-jpeg avatar Feb 01 '24 08:02 lars-jpeg

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

SutuSebastian avatar Feb 05 '24 09:02 SutuSebastian