diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe5fd37ca4c..f374f9a4d10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
- Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991))
- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993))
- Added `EuiMark` component ([#3060](https://github.com/elastic/eui/pull/3060))
+- Add support for node `name` prop in `EuiTabbedContent`, to bring it on par with `EuiTab` ([#3100](https://github.com/elastic/eui/pull/3100))
**Bug Fixes**
@@ -336,7 +337,7 @@
## [`17.1.0`](https://github.com/elastic/eui/tree/v17.1.0)
-- Added an optional `key` property inside the `options` prop in `EuiSelectableList` component ([#2608](https://github.com/elastic/eui/pull/2608))
+- Added an optional `key` property inside the `options` prop in `EuiSelectableList` component ([#2608](https://github.com/elastic/eui/pull/2608))
- Added `toolbarAdditionalControls` prop to `EuiDataGrid` to allow for custom buttons in the toolbar ([#2594](https://github.com/elastic/eui/pull/2594))
- Added TypeScript definitions for `EuiBasicTable`, `EuiInMemoryTable`, and related components ([#2428](https://github.com/elastic/eui/pull/2428))
- Updated `logoSecurity` and `appSecurityAnalytics` icons ([#2613](https://github.com/elastic/eui/pull/2613))
diff --git a/src-docs/src/views/tabs/controlled.js b/src-docs/src/views/tabs/controlled.js
index e024a588353..68b2a5088ae 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 b40ac3620d2..ca351cce064 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--id',
- name: 'Hydrogen',
+ name: (
+
+
+ Hydrogen
+
+ ),
content: (
diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js
index 46a7a1539f3..ee896d7af30 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 cfaed07cf4b..f4f97dde619 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 12a154f7b91..010909c83ed 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
+ ,
},
]
}
@@ -123,7 +127,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
- Kibana
+
+ Kibana
+
@@ -178,7 +184,9 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
- Kibana
+
+ Kibana
+
@@ -226,7 +234,9 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
- Kibana
+
+ Kibana
+
@@ -274,7 +284,9 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
- Kibana
+
+ Kibana
+
@@ -322,7 +334,9 @@ exports[`EuiTabbedContent props display can be condensed 1`] = `
- Kibana
+
+ Kibana
+
@@ -370,7 +384,9 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
- Kibana
+
+ Kibana
+
@@ -418,7 +434,9 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
- Kibana
+
+ Kibana
+
@@ -466,7 +484,9 @@ exports[`EuiTabbedContent props size can be small 1`] = `
- Kibana
+
+ Kibana
+
diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.tsx b/src/components/tabs/tabbed_content/tabbed_content.test.tsx
index ee0c52629af..e216a1cbe66 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.test.tsx
+++ b/src/components/tabs/tabbed_content/tabbed_content.test.tsx
@@ -19,7 +19,7 @@ const elasticsearchTab = {
const kibanaTab = {
id: 'kibana',
- name: 'Kibana',
+ name: Kibana,
'data-test-subj': 'kibanaTab',
content: Kibana content
,
};
diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx
index dc3351874e0..4d06397958d 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.tsx
+++ b/src/components/tabs/tabbed_content/tabbed_content.tsx
@@ -15,7 +15,7 @@ export const AUTOFOCUS = ['initial', 'selected'] as const;
export interface EuiTabbedContentTab {
id: string;
- name: string;
+ name: ReactNode;
content: ReactNode;
}
@@ -53,7 +53,7 @@ export type EuiTabbedContentProps = CommonProps &
size?: EuiTabsSizes;
/**
* 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: EuiTabbedContentTab[];
};