breaking(Tab): change menu.aligned prop to menuPosition and infer menu.tabular from it

docs/app/Examples/modules/Tab/MenuVariations/TabExampleMenuPositionRight.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleMenuPositionRight = () => (
+  <Tab menu={{ fluid: true, vertical: true }} menuPosition='right' panes={panes} />
+)
+
+export default TabExampleMenuPositionRight

docs/app/Examples/modules/Tab/MenuVariations/TabExampleVerticalTabular.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Tab } from 'semantic-ui-react'
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+]
+
+const TabExampleVerticalTabular = () => <Tab menu={{ fluid: true, vertical: true, tabular: true }} panes={panes} />
+
+export default TabExampleVerticalTabular

docs/app/Examples/modules/Tab/MenuVariations/TabExampleVerticalTrue.js → docs/app/Examples/modules/Tab/MenuVariations/TabExampleVerticalTabularRight.js

@@ -7,8 +7,8 @@ const panes = [
   { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
 ]
 
-const TabExampleVerticalTrue = () => (
+const TabExampleVerticalTabularRight = () => (
   <Tab menu={{ fluid: true, vertical: true, tabular: 'right' }} panes={panes} />
 )
 
-export default TabExampleVerticalTrue
+export default TabExampleVerticalTabularRight

docs/app/Examples/modules/Tab/MenuVariations/index.js

@@ -30,19 +30,22 @@ const TabMenuVariationsExamples = () => (
       description='A tab menu can be colored.'
       examplePath='modules/Tab/MenuVariations/TabExampleColored'
     >
-      <Message
-        info
-        content='Color only applies to the menu, not the pane, so they look best not attached.'
-      />
+      <Message info content='Color only applies to the menu, not the pane, so they look best not attached.' />
     </ComponentExample>
     <ComponentExample
       description='A tab menu can invert its colors.'
       examplePath='modules/Tab/MenuVariations/TabExampleColoredInverted'
     />
     <ComponentExample
-      title='Vertical'
-      description='A tab menu can be displayed in a vertical appearance.'
-      examplePath='modules/Tab/MenuVariations/TabExampleVerticalTrue'
+      title='Vertical Tabular'
+      description='A vertical tab menu can be positioned on either side.'
+      examplePath='modules/Tab/MenuVariations/TabExampleVerticalTabular'
+    />
+    <ComponentExample examplePath='modules/Tab/MenuVariations/TabExampleVerticalTabularRight' />
+    <ComponentExample
+      title='Menu Position'
+      description='A vertical non tabular menu can be positioned on either side.'
+      examplePath='modules/Tab/MenuVariations/TabExampleMenuPositionRight'
     />
   </ExampleSection>
 )

src/modules/Tab/Tab.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { SemanticShorthandItem} from '../..';
+import { SemanticShorthandItem } from '../..';
 import { default as TabPane, TabPaneProps } from './TabPane';
 
 export interface TabProps {
@@ -18,6 +18,9 @@ export interface TabProps {
   /** Shorthand props for the Menu. */
   menu?: any;
 
+  /** Align vertical menu */
+  menuPosition?: 'left' | 'right';
+
   /** Shorthand props for the Grid. */
   grid?: any;
 

src/modules/Tab/Tab.js

@@ -25,20 +25,20 @@ class Tab extends Component {
     as: customPropTypes.as,
 
     /** The initial activeIndex. */
-    defaultActiveIndex: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
+    defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     /** Index of the currently active tab. */
-    activeIndex: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
+    activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-    /** Shorthand props for the Menu. */
+    /**
+     * Shorthand props for the Menu.
+     * tabular, if true, will derive final value from `menuPosition`, otherwise set 'left' or 'right' explicitly.
+     */
     menu: PropTypes.object,
 
+    /** Align vertical menu */
+    menuPosition: PropTypes.oneOf(['left', 'right']),
+
     /** Shorthand props for the Grid. */
     grid: PropTypes.object,
 
@@ -57,23 +57,23 @@ class Tab extends Component {
      * or
      * { menuItem: 'Home', pane: 'Welcome' }
      */
-    panes: PropTypes.arrayOf(PropTypes.shape({
-      menuItem: customPropTypes.itemShorthand,
-      pane: customPropTypes.itemShorthand,
-      render: PropTypes.func,
-    })),
+    panes: PropTypes.arrayOf(
+      PropTypes.shape({
+        menuItem: customPropTypes.itemShorthand,
+        pane: customPropTypes.itemShorthand,
+        render: PropTypes.func,
+      }),
+    ),
 
     /** A Tab can render only active pane. */
     renderActiveOnly: PropTypes.bool,
   }
 
-  static autoControlledProps = [
-    'activeIndex',
-  ]
+  static autoControlledProps = ['activeIndex']
 
   static defaultProps = {
     grid: { paneWidth: 12, tabWidth: 4 },
-    menu: { attached: true, tabular: true, aligned: 'left' },
+    menu: { attached: true, tabular: true },
     renderActiveOnly: true,
   }
 
@@ -98,17 +98,23 @@ class Tab extends Component {
     const { activeIndex } = this.state
 
     if (renderActiveOnly) return _.invoke(_.get(panes, `[${activeIndex}]`), 'render', this.props)
-    return _.map(panes, ({ pane }, index) => TabPane.create(pane, {
-      overrideProps: {
-        active: index === activeIndex,
-      },
-    }))
+    return _.map(panes, ({ pane }, index) =>
+      TabPane.create(pane, {
+        overrideProps: {
+          active: index === activeIndex,
+        },
+      }),
+    )
   }
 
   renderMenu() {
-    const { menu, panes } = this.props
+    const { menu, panes, menuPosition } = this.props
     const { activeIndex } = this.state
 
+    if (menu.tabular === true && menuPosition === 'right') {
+      menu.tabular = 'right'
+    }
+
     return Menu.create(menu, {
       overrideProps: {
         items: _.map(panes, 'menuItem'),
@@ -119,18 +125,20 @@ class Tab extends Component {
   }
 
   renderVertical(menu) {
-    const { grid } = this.props
+    const { grid, menuPosition } = this.props
     const { paneWidth, tabWidth, ...gridProps } = grid
 
+    const position = menuPosition || (menu.props.tabular === 'right' && 'right') || 'left'
+
     return (
       <Grid {...gridProps}>
-        {menu.props.aligned !== 'right' && GridColumn.create({ width: tabWidth, children: menu })}
+        {position === 'left' && GridColumn.create({ width: tabWidth, children: menu })}
         {GridColumn.create({
           width: paneWidth,
           children: this.renderItems(),
           stretched: true,
         })}
-        {menu.props.aligned === 'right' && GridColumn.create({ width: tabWidth, children: menu })}
+        {position === 'right' && GridColumn.create({ width: tabWidth, children: menu })}
       </Grid>
     )
   }