fix(tabs): match default spacing to spec (#4487)

* docs(tabs): adjust alignment * fix(tabs): match default spacing to spec * docs(tabs): update docs examples * docs(Tabs): add Carbon tab content class to render prop example * docs(Tabs): remove fixed tabs inline padding style * docs(tabs): match React story markup
carbon-design-system · Nov 19, 2019 · ca92b34 · ca92b34
1 parent 7cd956b
commit ca92b34
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 41 deletions.
diff --git a/packages/components/demo/js/components/ComponentExample/component-overrides.scss b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
@@ -151,20 +151,15 @@
     margin-right: 0;
   }
 
-  & .tabs {
-    & > div {
+  .tabs {
+    > div {
       min-width: 100%;
 
       @include breakpoint('42rem') {
         min-width: 720px;
       }
     }
 
-    .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.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/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 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>
+    <div>{{panelContent}}</div>
   </div>
   {{/each}}
-</div>
+</div>
diff --git 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
    */

diff --git 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>
   );
@@ -63,27 +73,19 @@ storiesOf('Tabs', module)
     () => (
       <Tabs {...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>
     ),
@@ -101,27 +103,19 @@ storiesOf('Tabs', module)
     () => (
       <Tabs type="container" {...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>
     ),