diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0346eaf0d899..43b203402ae2 100644
--- 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
index e024a5883539..68b2a5088aeb 100644
--- 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: (
+
+
+ Hydrogen
+
+ ),
content: (
diff --git a/src-docs/src/views/tabs/tabbed_content.js b/src-docs/src/views/tabs/tabbed_content.js
index acb7746c754f..84adf841d8e1 100644
--- 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: (
+
+
+ Hydrogen
+
+ ),
content: (
diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
index 46a7a1539f3a..ee896d7af302 100644
--- 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: (
+
+
+ Hydrogen
+
+ ),
disabled: true,
},
{
diff --git a/src-docs/src/views/tabs/tabs_condensed.js b/src-docs/src/views/tabs/tabs_condensed.js
index cfaed07cf4bb..f4f97dde619f 100644
--- 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: (
+
+
+ Hydrogen
+
+ ),
disabled: true,
},
{
diff --git a/src-docs/src/views/tabs/tabs_example.js b/src-docs/src/views/tabs/tabs_example.js
index 12a154f7b91e..010909c83ed0 100644
--- 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: ,
- snippet: `
- Kibana
+
+ Kibana
+
@@ -66,7 +68,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
,
"data-test-subj": "kibanaTab",
"id": "kibana",
- "name": "Kibana",
+ "name":
+ Kibana
+ ,
},
]
}
@@ -127,7 +131,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
- Kibana
+
+ Kibana
+
@@ -182,7 +188,9 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
- Kibana
+
+ Kibana
+
@@ -230,7 +238,9 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
- Kibana
+
+ Kibana
+
@@ -278,7 +288,9 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
- Kibana
+
+ Kibana
+
@@ -326,7 +338,9 @@ exports[`EuiTabbedContent props display can be condensed 1`] = `
- Kibana
+
+ Kibana
+
@@ -374,7 +388,9 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
- Kibana
+
+ Kibana
+
@@ -422,7 +438,9 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
- Kibana
+
+ Kibana
+
@@ -470,7 +488,9 @@ exports[`EuiTabbedContent props size can be small 1`] = `
- Kibana
+
+ Kibana
+
diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js
index 715e355227f8..4e2289fc3b8c 100644
--- 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
index d07302919af6..53f8d8a925e1 100644
--- 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: Kibana,
'data-test-subj': 'kibanaTab',
content: Kibana content
,
};