size prop added to tabs, small tabs added

elastic · Nov 8, 2017 · 45f26ca · 45f26ca
1 parent 9fb5a41
commit 45f26ca
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
@@ -3,6 +3,7 @@ import React from 'react';
 import {
   EuiTabs,
   EuiTab,
+  EuiSpacer,
 } from '../../../../src/components';
 
 class EuiTabsExample extends React.Component {
@@ -48,9 +49,17 @@ class EuiTabsExample extends React.Component {
 
   render() {
     return (
-      <EuiTabs>
-        {this.renderTabs()}
-      </EuiTabs>
+      <div>
+        <EuiTabs>
+          {this.renderTabs()}
+        </EuiTabs>
+
+        <EuiSpacer />
+
+        <EuiTabs size="s">
+          {this.renderTabs()}
+        </EuiTabs>
+      </div>
     );
   }
 }

diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js
@@ -28,8 +28,9 @@ export default props => (
       }]}
       text={
         <p>
-          The <EuiCode>EuiTabs</EuiCode> component should have <EuiCode>EuiTab</EuiCode>
-          components as children.
+          <EuiCode>EuiTabs</EuiCode> allow a <EuiCode>size</EuiCode> prop. In general
+          you should always use the default size, but in rare cases (like putting tabs
+          within a popover of other small menu) it is OK to use the smaller sizing.
         </p>
       }
       demo={

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -1,6 +1,13 @@
 .euiTabs {
   display: flex;
   border-bottom: $euiBorderThin;
+
+  &.euiTabs--small {
+    .euiTab {
+      @include euiFontSizeS;
+      padding: $euiSizeXS $euiSizeS;
+    }
+  }
 }
 
 .euiTab {
@@ -38,8 +45,11 @@
       animation: euiTab $euiAnimSpeedFast $euiAnimSlightResistance;
     }
   }
+
 }
 
+
+
   .euiTab__content {
     display: block;
     transition: transform $euiAnimSpeedFast $euiAnimSlightBounce;

diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -2,12 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+const sizeToClassNameMap = {
+  s: 'euiTabs--small',
+};
+
+export const SIZES = Object.keys(sizeToClassNameMap);
+
 export const EuiTabs = ({
+  size,
   children,
   className,
   ...rest
 }) => {
-  const classes = classNames('euiTabs', className);
+  const classes = classNames(
+    'euiTabs',
+    sizeToClassNameMap[size],
+    className
+  );
 
   return (
     <div
@@ -22,5 +33,6 @@ export const EuiTabs = ({
 
 EuiTabs.propTypes = {
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  size: PropTypes.oneOf(SIZES),
 };