From 45f26ca47a86dde16700a3001e852e02224a3051 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 7 Nov 2017 16:52:52 -0800
Subject: [PATCH] size prop added to tabs, small tabs added

---
 src-docs/src/views/tabs/tabs.js         | 15 ++++++++++++---
 src-docs/src/views/tabs/tabs_example.js |  5 +++--
 src/components/tabs/_tabs.scss          | 10 ++++++++++
 src/components/tabs/tabs.js             | 16 ++++++++++++++--
 4 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
index 7e6f9b901e2..453db867c71 100644
--- 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
index 3ab3445e664..c70032dd8c6 100644
--- 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
index c01c41a3223..de191b0ac31 100644
--- 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
index 19731cf1c62..3ac7c9366ea 100644
--- 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),
 };