Add Condensed Display Prop for EuiTabs & EuiTabbedContent (#1904)

* initial props, style and test additions * css alpha rules ocd * update snapshots * added prop description * add display prop to tabbed_content * update changelog * comments and desc updates * added carolines suggested docs changes * rm extraneous div * add prop to ts defs * add example snippets * change div to fragment * update tests and snapshots * correct misplaced description * switch from complex not selector to overrides * add missing EuiTab props, update snippets
elastic · May 2, 2019 · 55330de · 55330de
1 parent 4b32e06
commit 55330de
Show file tree

Hide file tree

Showing 12 changed files with 454 additions and 206 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `10.3.1`.
+- Added `display` prop to `EuiTabs` and `EuiTabbedContent` components for ability to use an alternative `condensed` style ([#1904](https://github.com/elastic/eui/pull/1904))
 
 ## [`10.3.1`](https://github.com/elastic/eui/tree/v10.3.1)
 

diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
@@ -1,32 +1,33 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } 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) => (
@@ -54,17 +55,13 @@ class EuiTabsExample extends Component {
 
   render() {
     return (
-      <div>
-        <EuiTabs>
-          {this.renderTabs()}
-        </EuiTabs>
+      <Fragment>
+        <EuiTabs>{this.renderTabs()}</EuiTabs>
 
         <EuiSpacer />
 
-        <EuiTabs size="s">
-          {this.renderTabs()}
-        </EuiTabs>
-      </div>
+        <EuiTabs size="s">{this.renderTabs()}</EuiTabs>
+      </Fragment>
     );
   }
 }

diff --git a/src-docs/src/views/tabs/tabs_condensed.js b/src-docs/src/views/tabs/tabs_condensed.js
@@ -0,0 +1,61 @@
+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 <EuiTabs display="condensed">{this.renderTabs()}</EuiTabs>;
+  }
+}
+
+export default EuiTabsExample;
diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js
@@ -1,20 +1,23 @@
 import React from 'react';
 import { renderToHtml } from '../../services';
 
-import {
-  GuideSectionTypes,
-} from '../../components';
+import { GuideSectionTypes } from '../../components';
 
 import {
   EuiCode,
   EuiTabs,
+  EuiTab,
   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 +28,130 @@ 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,
+        EuiTab,
+      },
+      demo: <Tabs />,
+      snippet: `<EuiTabs>
+  <EuiTab onClick={onClick}>Example 1</EuiTab>
+  <EuiTab onClick={onClick}>Example 2</EuiTab>
+</EuiTabs>`,
+    },
+    {
+      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 />,
+      snippet: `<EuiTabs display="condensed">
+  <EuiTab onClick={onClick}>Example 1</EuiTab>
+  <EuiTab onClick={onClick}>Example 2</EuiTab>
+</EuiTabs>`,
+    },
+    {
+      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 />,
+      snippet: `<EuiTabbedContent 
+  tabs={[
+    {
+      id: 'example1',
+      name: 'Example 1',
+      content: 'Example 1 content.',
+    },
+    {
+      id: 'example2',
+      name: 'Example 2',
+      content: 'Example 2 content.',
     },
-    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,
+  ]}
+/>`,
     },
-    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 />,
-  }],
+  ],
 };
diff --git a/src/components/tabs/__snapshots__/tabs.test.js.snap b/src/components/tabs/__snapshots__/tabs.test.js.snap
@@ -1,13 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiTabs props display can be condensed 1`] = `
+<div
+  class="euiTabs euiTabs--condensed"
+  role="tablist"
+/>
+`;
+
 exports[`EuiTabs props expand is rendered 1`] = `
 <div
   class="euiTabs euiTabs--expand"
   role="tablist"
 />
 `;
 
-exports[`EuiTabs props size is rendered 1`] = `
+exports[`EuiTabs props size can be small 1`] = `
 <div
   class="euiTabs euiTabs--small"
   role="tablist"