TabIndicatorProps is useless

[tommybernaciak]

I am trying to restyle Tabs and Tabs indicator component. What I wanted to achieve is to make tab indicator smaller (80%). Is surprised me this is not possible in your current implementation. Documentation (https://material-ui.com/api/tabs) says that Tabs accept TabIndicatorProps that will be passed to indicator. However, the interface for it looks like this:

export interface TabIndicatorProps
  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TabIndicatorClassKey> {
  color: 'secondary' | 'primary' | string;
  style: { left: number; width: number };
}

Accepted style property is left and width as numbers. This is then used for indicator as left margin and width both in pixels. I believe width should accept string values like 80% or 100px. Now it is inconsisted and missleading. It is also useless it will never be responsive.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

TabIndicatorProps should accept style: { left: number; width: string } and use width directly.

Current Behavior 😯

TabIndicatorProps should accepts style: { left: number; width: number } and width can be customized in pixels only.

Your Environment 🌎

{
    "compilerOptions": {
        "target": "es5",
        "downlevelIteration": true,
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve"
    },
    "include": ["src"],
	"plugins": [
		{ "transform": "ts-optchain/transform" },
	]
}

Tech	Version
Material-UI	v4.2.0
React	16.8.6
Browser	brave
TypeScript	3.4.5
etc.

[oliviertassinari]

Related to #16628 (comment). Does the changes in the pull request solve the problem?

[tommybernaciak]

@oliviertassinari O yes, this should work I believe

[oliviertassinari]

Awesome :)