Add Condensed Display Prop for EuiTabs & EuiTabbedContent

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `display` prop to `EuiTabs` and `EuiTabbedContent` components for ability to use an alternative `condensed` style ([#1904](https://github.com/elastic/eui/pull/1904))
 - Added `selectable` prop to `EuiCard` ([#1895](https://github.com/elastic/eui/pull/1895))
 - Converted `EuiValidatableControl` to TS ([#1879](https://github.com/elastic/eui/pull/1879))
 

src-docs/src/views/tabs/tabs.js

@@ -1,32 +1,33 @@
 import React, { Component } from 'react';
 
-import {
-  EuiTabs,
-  EuiTab,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiTabs, EuiTab, EuiSpacer } from '../../../../src/components';
 
 class EuiTabsExample extends Component {
   constructor(props) {
     super(props);
 
-    this.tabs = [{
-      id: 'cobalt',
-      name: 'Cobalt',
-      disabled: false,
-    }, {
-      id: 'dextrose',
-      name: 'Dextrose',
-      disabled: false,
-    }, {
-      id: 'hydrogen',
-      name: 'Hydrogen',
-      disabled: true,
-    }, {
-      id: 'monosodium_glutammate',
-      name: 'Monosodium Glutamate',
-      disabled: false,
-    }];
+    this.tabs = [
+      {
+        id: 'cobalt',
+        name: 'Cobalt',
+        disabled: false,
+      },
+      {
+        id: 'dextrose',
+        name: 'Dextrose',
+        disabled: false,
+      },
+      {
+        id: 'hydrogen',
+        name: 'Hydrogen',
+        disabled: true,
+      },
+      {
+        id: 'monosodium_glutammate',
+        name: 'Monosodium Glutamate',
+        disabled: false,
+      },
+    ];
 
     this.state = {
       selectedTabId: 'cobalt',
@@ -37,7 +38,7 @@ class EuiTabsExample extends Component {
     this.setState({
       selectedTabId: id,
     });
-  }
+  };
 
   renderTabs() {
     return this.tabs.map((tab, index) => (
@@ -55,15 +56,11 @@ class EuiTabsExample extends Component {
   render() {
     return (
       <div>
-        <EuiTabs>
-          {this.renderTabs()}
-        </EuiTabs>
+        <EuiTabs>{this.renderTabs()}</EuiTabs>
 
         <EuiSpacer />
 
-        <EuiTabs size="s">
-          {this.renderTabs()}
-        </EuiTabs>
+        <EuiTabs size="s">{this.renderTabs()}</EuiTabs>
       </div>
     );
   }

src-docs/src/views/tabs/tabs_condensed.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+
+import { EuiTabs, EuiTab } from '../../../../src/components';
+
+class EuiTabsExample extends Component {
+  constructor(props) {
+    super(props);
+
+    this.tabs = [
+      {
+        id: 'cobalt',
+        name: 'Cobalt',
+        disabled: false,
+      },
+      {
+        id: 'dextrose',
+        name: 'Dextrose',
+        disabled: false,
+      },
+      {
+        id: 'hydrogen',
+        name: 'Hydrogen',
+        disabled: true,
+      },
+      {
+        id: 'monosodium_glutammate',
+        name: 'Monosodium Glutamate',
+        disabled: false,
+      },
+    ];
+
+    this.state = {
+      selectedTabId: 'cobalt',
+    };
+  }
+
+  onSelectedTabChanged = id => {
+    this.setState({
+      selectedTabId: id,
+    });
+  };
+
+  renderTabs() {
+    return this.tabs.map((tab, index) => (
+      <EuiTab
+        onClick={() => this.onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === this.state.selectedTabId}
+        disabled={tab.disabled}
+        key={index}
+      >
+        {tab.name}
+      </EuiTab>
+    ));
+  }
+
+  render() {
+    return (
+      <div>
+        <EuiTabs display="condensed">{this.renderTabs()}</EuiTabs>
+      </div>
+    );
+  }
+}
+
+export default EuiTabsExample;

src-docs/src/views/tabs/tabs_example.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
-  GuideSectionTypes,
-} from '../../components';
+import { GuideSectionTypes } from '../../components';
 
-import {
-  EuiCode,
-  EuiTabs,
-  EuiTabbedContent,
-} from '../../../../src/components';
+import { EuiCode, EuiTabs, EuiTabbedContent } from '../../../../src/components';
 
 import Tabs from './tabs';
 const tabsSource = require('!!raw-loader!./tabs');
 const tabsHtml = renderToHtml(Tabs);
 
+import TabsCondensed from './tabs_condensed';
+const tabsCondensedSource = require('!!raw-loader!./tabs_condensed');
+const tabsCondensedHtml = renderToHtml(TabsCondensed);
+
 import TabbedContent from './tabbed_content';
 const tabbedContentSource = require('!!raw-loader!./tabbed_content');
 const tabbedContentHtml = renderToHtml(TabbedContent);
@@ -25,64 +23,107 @@ const controlledHtml = renderToHtml(Controlled);
 
 export const TabsExample = {
   title: 'Tabs',
-  sections: [{
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: tabsSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: tabsHtml,
-    }],
-    text: (
-      <p>
-        <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>
-    ),
-    props: {
-      EuiTabs,
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: tabsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: tabsHtml,
+        },
+      ],
+      text: (
+        <p>
+          <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>
+      ),
+      props: {
+        EuiTabs,
+      },
+      demo: <Tabs />,
+    },
+    {
+      title: 'Condensed tabs',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: tabsCondensedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: tabsCondensedHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>EuiTabs</EuiCode> allow a <EuiCode>display</EuiCode> prop. In
+          general you should always use the default display. However, it is
+          acceptable to use the alternative <EuiCode>condensed</EuiCode> display
+          in situations where it is desirable to display a bolder, more compact
+          and borderless tab interface (for use as primary navigation within
+          your application or to establish a higher level hierarchy of tabs).
+        </p>
+      ),
+      props: {
+        EuiTabs,
+      },
+      demo: <TabsCondensed />,
     },
-    demo: <Tabs />,
-  }, {
-    title: 'Tabbed content',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: tabbedContentSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: tabbedContentHtml,
-    }],
-    text: (
-      <p>
-        <EuiCode>EuiTabbedContent</EuiCode> makes it easier to associate tabs with content based
-        on the selected tab. Use the <EuiCode>initialSelectedTab</EuiCode> prop to specify which
-        tab to initially select.
-      </p>
-    ),
-    props: {
-      EuiTabbedContent,
+    {
+      title: 'Tabbed content',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: tabbedContentSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: tabbedContentHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>EuiTabbedContent</EuiCode> makes it easier to associate tabs
+          with content based on the selected tab. Use the{' '}
+          <EuiCode>initialSelectedTab</EuiCode> prop to specify which tab to
+          initially select.
+        </p>
+      ),
+      props: {
+        EuiTabbedContent,
+      },
+      demo: <TabbedContent />,
     },
-    demo: <TabbedContent />,
-  }, {
-    title: 'Controlled tabbed content',
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: controlledSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: controlledHtml,
-    }],
-    text: (
-      <p>
-        You can also use the <EuiCode>selectedTab</EuiCode> and <EuiCode>onTabClick</EuiCode> props
-        to take complete control over tab selection. This can be useful if you want to change tabs
-        based on user interaction with another part of the UI.
-      </p>
-    ),
-    props: {
-      EuiTabbedContent,
+    {
+      title: 'Controlled tabbed content',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: controlledSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: controlledHtml,
+        },
+      ],
+      text: (
+        <p>
+          You can also use the <EuiCode>selectedTab</EuiCode> and{' '}
+          <EuiCode>onTabClick</EuiCode> props to take complete control over tab
+          selection. This can be useful if you want to change tabs based on user
+          interaction with another part of the UI.
+        </p>
+      ),
+      props: {
+        EuiTabbedContent,
+      },
+      demo: <Controlled />,
     },
-    demo: <Controlled />,
-  }],
+  ],
 };

src/components/tabs/__snapshots__/tabs.test.js.snap

@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiTabs props display is rendered 1`] = `
+<div
+  class="euiTabs euiTabs--condensed"
+  role="tablist"
+/>
+`;
+
 exports[`EuiTabs props expand is rendered 1`] = `
 <div
   class="euiTabs euiTabs--expand"