Add support for node name prop to EuiTabbedContent, to bring it up to…

… par with EuiTab. - Update documentation to illustrate this capability.
elastic · Mar 17, 2020 · 3916c2d · 3916c2d
1 parent f829b0e
commit 3916c2d
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360))
 - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398))
 - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391))
+- Add support for node `name` prop in `EuiTabbedContent`, to bring it on par with `EuiTab` ([]())
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/tabs/controlled.js b/src-docs/src/views/tabs/controlled.js
@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import {
   EuiButton,
+  EuiIcon,
   EuiTabbedContent,
   EuiTitle,
   EuiText,
@@ -51,7 +52,12 @@ class EuiTabsExample extends Component {
       },
       {
         id: 'hydrogen',
-        name: 'Hydrogen',
+        name: (
+          <span>
+            <EuiIcon type="heatmap" />
+            &nbsp;Hydrogen
+          </span>
+        ),
         content: (
           <Fragment>
             <EuiSpacer />

diff --git a/src-docs/src/views/tabs/tabbed_content.js b/src-docs/src/views/tabs/tabbed_content.js
@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 
 import {
+  EuiIcon,
   EuiTabbedContent,
   EuiTitle,
   EuiText,
@@ -50,7 +51,12 @@ class EuiTabsExample extends Component {
       },
       {
         id: 'hydrogen',
-        name: 'Hydrogen',
+        name: (
+          <span>
+            <EuiIcon type="heatmap" />
+            &nbsp;Hydrogen
+          </span>
+        ),
         content: (
           <Fragment>
             <EuiSpacer />

diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
@@ -1,6 +1,11 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiTabs, EuiTab, EuiSpacer } from '../../../../src/components';
+import {
+  EuiIcon,
+  EuiTabs,
+  EuiTab,
+  EuiSpacer,
+} from '../../../../src/components';
 
 class EuiTabsExample extends Component {
   constructor(props) {
@@ -19,7 +24,12 @@ class EuiTabsExample extends Component {
       },
       {
         id: 'hydrogen',
-        name: 'Hydrogen',
+        name: (
+          <span>
+            <EuiIcon type="heatmap" />
+            &nbsp;Hydrogen
+          </span>
+        ),
         disabled: true,
       },
       {

diff --git a/src-docs/src/views/tabs/tabs_condensed.js b/src-docs/src/views/tabs/tabs_condensed.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { EuiTabs, EuiTab } from '../../../../src/components';
+import { EuiIcon, EuiTabs, EuiTab } from '../../../../src/components';
 
 class EuiTabsExample extends Component {
   constructor(props) {
@@ -19,7 +19,12 @@ class EuiTabsExample extends Component {
       },
       {
         id: 'hydrogen',
-        name: 'Hydrogen',
+        name: (
+          <span>
+            <EuiIcon type="heatmap" />
+            &nbsp;Hydrogen
+          </span>
+        ),
         disabled: true,
       },
       {

diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js
@@ -119,7 +119,7 @@ export const TabsExample = {
         EuiTabbedContent,
       },
       demo: <TabbedContent />,
-      snippet: `<EuiTabbedContent 
+      snippet: `<EuiTabbedContent
   tabs={[
     {
       id: 'example1',

diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
@@ -32,7 +32,9 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -66,7 +68,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
         </p>,
         "data-test-subj": "kibanaTab",
         "id": "kibana",
-        "name": "Kibana",
+        "name": <strong>
+          Kibana
+        </strong>,
       },
     ]
   }
@@ -127,7 +131,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
             <span
               className="euiTab__content"
             >
-              Kibana
+              <strong>
+                Kibana
+              </strong>
             </span>
           </button>
         </EuiTab>
@@ -182,7 +188,9 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -230,7 +238,9 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -278,7 +288,9 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -326,7 +338,9 @@ exports[`EuiTabbedContent props display can be condensed 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -374,7 +388,9 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -422,7 +438,9 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -470,7 +488,9 @@ exports[`EuiTabbedContent props size can be small 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>

diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js
@@ -40,13 +40,13 @@ export class EuiTabbedContent extends Component {
     size: PropTypes.oneOf(SIZES),
     /**
      * Each tab needs id and content properties, so we can associate it with its panel for accessibility.
-     * The name property is also required to display to the user.
+     * The name property (a node) is also required to display to the user.
      */
     tabs: PropTypes.arrayOf(
       PropTypes.shape({
         content: PropTypes.node.isRequired,
         id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired,
+        name: PropTypes.node.isRequired,
       })
     ).isRequired,
   };

diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.js b/src/components/tabs/tabbed_content/tabbed_content.test.js
@@ -20,7 +20,7 @@ const elasticsearchTab = {
 
 const kibanaTab = {
   id: 'kibana',
-  name: 'Kibana',
+  name: <strong>Kibana</strong>,
   'data-test-subj': 'kibanaTab',
   content: <p>Kibana content</p>,
 };