Add support for node name prop to EuiTabbedContent, to bring it up to par with EuiTab

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))
+- Changed `tabs.name` prop shape in `EuiTabbedContent` to accept a `node`, which aligns it 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))

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 />

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: (
+          <span>
+            <EuiIcon type="heatmap" />
+            &nbsp;Hydrogen
+          </span>
+        ),
         content: (
           <Fragment>
             <EuiSpacer />

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,
       },
       {

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,
       },
       {

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',

src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.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>,
       },
     ]
   }
@@ -123,7 +127,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
             <span
               className="euiTab__content"
             >
-              Kibana
+              <strong>
+                Kibana
+              </strong>
             </span>
           </button>
         </EuiTab>
@@ -178,7 +184,9 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -226,7 +234,9 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -274,7 +284,9 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -322,7 +334,9 @@ exports[`EuiTabbedContent props display can be condensed 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -370,7 +384,9 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -418,7 +434,9 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>
@@ -466,7 +484,9 @@ exports[`EuiTabbedContent props size can be small 1`] = `
       <span
         class="euiTab__content"
       >
-        Kibana
+        <strong>
+          Kibana
+        </strong>
       </span>
     </button>
   </div>

src/components/tabs/tabbed_content/tabbed_content.test.tsx

@@ -19,7 +19,7 @@ const elasticsearchTab = {
 
 const kibanaTab = {
   id: 'kibana',
-  name: 'Kibana',
+  name: <strong>Kibana</strong>,
   'data-test-subj': 'kibanaTab',
   content: <p>Kibana content</p>,
 };

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