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[]; };