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

, };