[Tabs] Add new property: fixedTabWidth

The fixedTabWidth property sets a fixed width to each tab label and aligns them
to the left instead of using full width. If the prop is not set, behavior is
back to normal. This solves issue mui#4420.

The docs have also been updated with information and an example for this prop.

docs/src/app/components/pages/components/Tabs/ExampleFixedWidth.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Tabs, Tab} from 'material-ui/Tabs';
+
+const TabsExampleFixedWidth = () => (
+  <Tabs fixedTabWidth={200}>
+    <Tab label="Tab One" />
+    <Tab label="Tab Two" />
+    <Tab label="Tab Three" />
+  </Tabs>
+);
+
+export default TabsExampleFixedWidth;

docs/src/app/components/pages/components/Tabs/Page.js

@@ -16,6 +16,8 @@ import tabsExampleIconCode from '!raw!./ExampleIcon';
 import TabsExampleIcon from './ExampleIcon';
 import tabsExampleIconTextCode from '!raw!./ExampleIconText';
 import TabsExampleIconText from './ExampleIconText';
+import tabsExampleFixedWidthCode from '!raw!./ExampleFixedWidth';
+import TabsExampleFixedWidth from './ExampleFixedWidth';
 import tabsCode from '!raw!material-ui/Tabs/Tabs';
 import tabCode from '!raw!material-ui/Tabs/Tab';
 
@@ -28,6 +30,8 @@ const descriptions = {
   'and allowing tabs to be swiped on touch devices.',
   icon: 'An example of tabs with icon.',
   iconText: 'An example of tabs with icon and text.',
+  fixedTabWidth: 'An example using the `fixedTabWidth` property. Each tab label has the same fixed width regardless ' +
+  'of the container\'s width and is aligned to the left.',
 };
 
 const TabsPage = () => (
@@ -55,6 +59,13 @@ const TabsPage = () => (
     >
       <TabsExampleSwipeable />
     </CodeExample>
+    <CodeExample
+      title="Fixed tab width example"
+      description={descriptions.fixedTabWidth}
+      code={tabsExampleFixedWidthCode}
+    >
+      <TabsExampleFixedWidth />
+    </CodeExample>
     <CodeExample
       title="Icon example"
       description={descriptions.icon}

src/Tabs/Tabs.js

@@ -39,6 +39,11 @@ class Tabs extends Component {
      * Override the inline-styles of the content's container.
      */
     contentContainerStyle: PropTypes.object,
+    /**
+    * Specify a fixed width for every tab-label and aligns them to the left. If
+    * this prop is not set, each tab-label takes an equal share of the container's width.
+    */
+    fixedTabWidth: PropTypes.number,
     /**
      * Specify initial visible tab index.
      * If `initialSelectedIndex` is set but larger than the total amount of specified tabs,
@@ -172,6 +177,7 @@ class Tabs extends Component {
     const {
       contentContainerClassName,
       contentContainerStyle,
+      fixedTabWidth,
       initialSelectedIndex, // eslint-disable-line no-unused-vars
       inkBarStyle,
       onChange, // eslint-disable-line no-unused-vars
@@ -187,6 +193,7 @@ class Tabs extends Component {
     const tabValue = valueLink.value;
     const tabContent = [];
     const width = 100 / this.getTabCount();
+    const widthString = fixedTabWidth ? `${fixedTabWidth}px` : `${width}%`;
 
     const tabs = this.getTabs().map((tab, index) => {
       warning(tab.type && tab.type.muiName === 'Tab',
@@ -208,15 +215,18 @@ class Tabs extends Component {
         key: index,
         index: index,
         selected: this.getSelected(tab, index),
-        width: `${width}%`,
+        width: widthString,
         onTouchTap: this.handleTabTouchTap,
       });
     });
 
-    const inkBar = this.state.selectedIndex !== -1 ? (
+    const selectedIndex = this.state.selectedIndex;
+    const inkPosition = fixedTabWidth ? `${fixedTabWidth * selectedIndex}px` :
+    `${width * selectedIndex}%`;
+    const inkBar = selectedIndex !== -1 ? (
       <InkBar
-        left={`${width * this.state.selectedIndex}%`}
-        width={`${width}%`}
+        left={inkPosition}
+        width={widthString}
         style={inkBarStyle}
       />
     ) : null;