From 05f618f8d6c93242e9b52559f687cced6cf542a0 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 29 Oct 2019 14:16:04 -0500
Subject: [PATCH 1/6] docs(tabs): adjust alignment

---
 .../ComponentExample/component-overrides.scss    |  9 ++-------
 packages/components/src/components/tabs/tabs.hbs |  4 ++--
 packages/react/src/components/Tabs/Tabs-story.js | 16 ++++++++++++----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/components/demo/js/components/ComponentExample/component-overrides.scss b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
index f631cb2dafd9..06d1eb5824df 100644
--- a/packages/components/demo/js/components/ComponentExample/component-overrides.scss
+++ b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
@@ -151,8 +151,8 @@
     margin-right: 0;
   }
 
-  & .tabs {
-    & > div {
+  .tabs {
+    > div {
       min-width: 100%;
 
       @include breakpoint('42rem') {
@@ -160,11 +160,6 @@
       }
     }
 
-    .bx--tabs + div {
-      padding: 0 !important;
-      margin-top: 2rem;
-    }
-
     .bx--tabs.bx--tabs--fixed + div {
       margin-top: 0;
     }
diff --git a/packages/components/src/components/tabs/tabs.hbs b/packages/components/src/components/tabs/tabs.hbs
index 904767371780..38072fd587a2 100644
--- a/packages/components/src/components/tabs/tabs.hbs
+++ b/packages/components/src/components/tabs/tabs.hbs
@@ -23,11 +23,11 @@
   </ul>
 </div>
 <!-- The markup below is for demonstration purposes only -->
-<div>
+<div style="padding-top:1rem">
   {{#each items}}
   <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}"
     aria-hidden="{{not selected}}" {{#if (not selected)}} hidden{{/if}}>
     <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">{{panelContent}}</p>
   </div>
   {{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index e4ee2718b451..37c0cffa7ce6 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -63,12 +63,16 @@ storiesOf('Tabs', module)
     () => (
       <Tabs {...props.tabs()}>
         <Tab {...props.tab()} label="Tab label 1">
-          <div className="some-content" style={{ paddingLeft: 16 }}>
+          <div
+            className="some-content"
+            style={{ paddingTop: 16, paddingLeft: 16 }}>
             Content for first tab goes here.
           </div>
         </Tab>
         <Tab {...props.tab()} label="Tab label 2">
-          <div className="some-content" style={{ paddingLeft: 16 }}>
+          <div
+            className="some-content"
+            style={{ paddingTop: 16, paddingLeft: 16 }}>
             Content for second tab goes here.
           </div>
         </Tab>
@@ -76,12 +80,16 @@ storiesOf('Tabs', module)
           {...props.tab()}
           label="Tab label 3"
           renderContent={TabContentRenderedOnlyWhenSelected}>
-          <div className="some-content" style={{ paddingLeft: 16 }}>
+          <div
+            className="some-content"
+            style={{ paddingTop: 16, paddingLeft: 16 }}>
             Content for third tab goes here.
           </div>
         </Tab>
         <Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
-          <div className="some-content" style={{ paddingLeft: 16 }}>
+          <div
+            className="some-content"
+            style={{ paddingTop: 16, paddingLeft: 16 }}>
             Content for fourth tab goes here.
           </div>
         </Tab>

From 920c8f50eaca2959e8ff66ae98ed0eafa1cae5a3 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Fri, 1 Nov 2019 09:25:46 -0500
Subject: [PATCH 2/6] fix(tabs): match default spacing to spec

---
 .../components/src/components/tabs/_tabs.scss |  7 +++++++
 .../src/components/TabContent/TabContent.js   | 21 ++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 956566d08697..2d888a51c51b 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -397,6 +397,13 @@
     color: $text-02;
   }
 
+  //-----------------------------
+  //  Tab Content Container
+  //-----------------------------
+  .#{$prefix}--tab-content {
+    padding: $carbon--spacing-05;
+  }
+
   //-----------------------------
   // Skeleton state
   //-----------------------------
diff --git a/packages/react/src/components/TabContent/TabContent.js b/packages/react/src/components/TabContent/TabContent.js
index 56aedae4491f..4d942191f72d 100644
--- a/packages/react/src/components/TabContent/TabContent.js
+++ b/packages/react/src/components/TabContent/TabContent.js
@@ -7,18 +7,33 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import { settings } from 'carbon-components';
 
-const TabContent = props => {
-  const { selected, children, ...other } = props;
+const { prefix } = settings;
 
+const TabContent = props => {
+  const { className, selected, children, ...other } = props;
+  const tabContentClasses = classNames(`${prefix}--tab-content`, {
+    [className]: className,
+  });
   return (
-    <div {...other} selected={selected} hidden={!selected}>
+    <div
+      {...other}
+      className={tabContentClasses}
+      selected={selected}
+      hidden={!selected}>
       {children}
     </div>
   );
 };
 
 TabContent.propTypes = {
+  /**
+   * Provide a className for the tab content container
+   */
+  className: PropTypes.string,
+
   /**
    * Specify whether the TabContent is selected
    */

From 99774870f9551e2e76fa83416954bce029e79583 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Fri, 1 Nov 2019 09:26:08 -0500
Subject: [PATCH 3/6] docs(tabs): update docs examples

---
 .../components/src/components/tabs/tabs.hbs   |  4 ++--
 .../react/src/components/Tabs/Tabs-story.js   | 24 ++++---------------
 2 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/components/tabs/tabs.hbs b/packages/components/src/components/tabs/tabs.hbs
index 38072fd587a2..c46473a48f07 100644
--- a/packages/components/src/components/tabs/tabs.hbs
+++ b/packages/components/src/components/tabs/tabs.hbs
@@ -23,11 +23,11 @@
   </ul>
 </div>
 <!-- The markup below is for demonstration purposes only -->
-<div style="padding-top:1rem">
+<div class="{{@root.prefix}}--tab-content">
   {{#each items}}
   <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}"
     aria-hidden="{{not selected}}" {{#if (not selected)}} hidden{{/if}}>
-    <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">{{panelContent}}</p>
+    <p style="font-size: 14px; font-weight: 600;">{{panelContent}}</p>
   </div>
   {{/each}}
 </div>
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 37c0cffa7ce6..36bccfbae0f4 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -63,35 +63,19 @@ storiesOf('Tabs', module)
     () => (
       <Tabs {...props.tabs()}>
         <Tab {...props.tab()} label="Tab label 1">
-          <div
-            className="some-content"
-            style={{ paddingTop: 16, paddingLeft: 16 }}>
-            Content for first tab goes here.
-          </div>
+          <div className="some-content">Content for first tab goes here.</div>
         </Tab>
         <Tab {...props.tab()} label="Tab label 2">
-          <div
-            className="some-content"
-            style={{ paddingTop: 16, paddingLeft: 16 }}>
-            Content for second tab goes here.
-          </div>
+          <div className="some-content">Content for second tab goes here.</div>
         </Tab>
         <Tab
           {...props.tab()}
           label="Tab label 3"
           renderContent={TabContentRenderedOnlyWhenSelected}>
-          <div
-            className="some-content"
-            style={{ paddingTop: 16, paddingLeft: 16 }}>
-            Content for third tab goes here.
-          </div>
+          <div className="some-content">Content for third tab goes here.</div>
         </Tab>
         <Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
-          <div
-            className="some-content"
-            style={{ paddingTop: 16, paddingLeft: 16 }}>
-            Content for fourth tab goes here.
-          </div>
+          <div className="some-content">Content for fourth tab goes here.</div>
         </Tab>
       </Tabs>
     ),

From 901246fb9b8e564346ecc933dce809d0d108376f Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Fri, 8 Nov 2019 09:43:48 -0600
Subject: [PATCH 4/6] docs(Tabs): add Carbon tab content class to render prop
 example

---
 .../react/src/components/Tabs/Tabs-story.js    | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 36bccfbae0f4..5bcc557d9bc9 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -8,13 +8,15 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import './Tabs-story.scss';
-
 import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
+import { settings } from 'carbon-components';
+import classNames from 'classnames';
+import './Tabs-story.scss';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
 
+const { prefix } = settings;
 const props = {
   tabs: () => ({
     className: 'some-class',
@@ -49,9 +51,17 @@ const props = {
 
 const CustomLabel = ({ text }) => <>{text}</>;
 
-const TabContentRenderedOnlyWhenSelected = ({ selected, children, ...other }) =>
+const TabContentRenderedOnlyWhenSelected = ({
+  selected,
+  children,
+  className,
+  ...other
+}) =>
   !selected ? null : (
-    <div {...other} selected={selected}>
+    <div
+      {...other}
+      className={classNames(className, `${prefix}--tab-content`)}
+      selected={selected}>
       {children}
     </div>
   );

From 2c8bd50fdc70aa0af6e985d2b7bc5e88b5d6f25e Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Fri, 8 Nov 2019 09:45:08 -0600
Subject: [PATCH 5/6] docs(Tabs): remove fixed tabs inline padding style

---
 packages/react/src/components/Tabs/Tabs-story.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 5bcc557d9bc9..85bdca80461f 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -103,27 +103,19 @@ storiesOf('Tabs', module)
     () => (
       <Tabs type="fixed" {...props.tabs()}>
         <Tab {...props.tab()} label="Tab label 1">
-          <div className="some-content" style={{ paddingLeft: 16 }}>
-            Content for first tab goes here.
-          </div>
+          <div className="some-content">Content for first tab goes here.</div>
         </Tab>
         <Tab {...props.tab()} label="Tab label 2">
-          <div className="some-content" style={{ paddingLeft: 16 }}>
-            Content for second tab goes here.
-          </div>
+          <div className="some-content">Content for second tab goes here.</div>
         </Tab>
         <Tab
           {...props.tab()}
           label="Tab label 3"
           renderContent={TabContentRenderedOnlyWhenSelected}>
-          <div className="some-content" style={{ paddingLeft: 16 }}>
-            Content for third tab goes here.
-          </div>
+          <div className="some-content">Content for third tab goes here.</div>
         </Tab>
         <Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
-          <div className="some-content" style={{ paddingLeft: 16 }}>
-            Content for fourth tab goes here.
-          </div>
+          <div className="some-content">Content for fourth tab goes here.</div>
         </Tab>
       </Tabs>
     ),

From 32a71d7370aacb34f8c1854e209c0f4afd6e9e72 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Fri, 8 Nov 2019 09:48:41 -0600
Subject: [PATCH 6/6] docs(tabs): match React story markup

---
 packages/components/src/components/tabs/tabs.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/tabs/tabs.hbs b/packages/components/src/components/tabs/tabs.hbs
index c46473a48f07..82ea5e14911f 100644
--- a/packages/components/src/components/tabs/tabs.hbs
+++ b/packages/components/src/components/tabs/tabs.hbs
@@ -27,7 +27,7 @@
   {{#each items}}
   <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}"
     aria-hidden="{{not selected}}" {{#if (not selected)}} hidden{{/if}}>
-    <p style="font-size: 14px; font-weight: 600;">{{panelContent}}</p>
+    <div>{{panelContent}}</div>
   </div>
   {{/each}}
 </div>