feat: Add tab header "actions"

pages/tabs/permutations.page.tsx

@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
+import Button from '~components/button';
 import ButtonDropdown from '~components/button-dropdown';
+import SpaceBetween from '~components/space-between';
 import Tabs, { TabsProps } from '~components/tabs';
 
 import createPermutations from '../utils/permutations';
@@ -106,6 +108,14 @@ const tabActionPermutations = createPermutations<TabsProps>([
   {
     activeTabId: ['first', 'second'],
     variant: ['default', 'container'],
+    actions: [
+      undefined,
+      <Button key="button">Add</Button>,
+      <SpaceBetween key="space-between" size="s" direction="horizontal">
+        <Button>Add</Button>
+        <Button>Add2</Button>
+      </SpaceBetween>,
+    ],
     tabs: [
       [
         {

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -16664,7 +16664,16 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "visualRefreshTag": "\`stacked\` variant",
     },
   ],
-  "regions": [],
+  "regions": [
+    {
+      "description": "Actions for the tabs header, displayed next to the list of tabs.
+Use this to add a button or button dropdown that performs actions on the
+entire tab list. We recommend a maximum of one interactive element to
+minimize the number of keyboard tab stops between the tab list and content.",
+      "isDefault": false,
+      "name": "actions",
+    },
+  ],
   "releaseStatus": "stable",
 }
 `;

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -584,6 +584,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_wrapper_wih1l",
   ],
   "tabs": [
+    "awsui_actions-container_14rmt",
     "awsui_disabled-reason-tooltip_14rmt",
     "awsui_root_14rmt",
     "awsui_tab-dismiss-button_1nq1i",

src/tabs/__tests__/tabs.test.tsx

@@ -1260,4 +1260,8 @@ describe('Tabs', () => {
       verifyTabContentLabelledBy(secondTabId);
     });
   });
+  test('renders actions', () => {
+    const wrapper = renderTabs(<Tabs tabs={defaultTabs} actions={<div>Actions content</div>} />).wrapper;
+    expect(wrapper.findActions()!.getElement()).toHaveTextContent('Actions content');
+  });
 });

src/tabs/index.tsx

@@ -40,6 +40,7 @@ export default function Tabs({
   disableContentPaddings = false,
   i18nStrings,
   fitHeight,
+  actions,
   ...rest
 }: TabsProps) {
   for (const tab of tabs) {
@@ -49,6 +50,7 @@ export default function Tabs({
     props: { disableContentPaddings, variant, fitHeight },
     metadata: {
       hasActions: tabs.some(tab => !!tab.action),
+      hasHeaderActions: !!actions,
       hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),
     },
   });
@@ -123,6 +125,7 @@ export default function Tabs({
       ariaLabel={ariaLabel}
       ariaLabelledby={ariaLabelledby}
       tabs={tabs}
+      actions={actions}
       onChange={changeDetail => {
         setActiveTabId(changeDetail.activeTabId);
         fireNonCancelableEvent(onChange, changeDetail);

src/tabs/interfaces.ts

@@ -28,6 +28,14 @@ export interface TabsProps extends BaseComponentProps {
    */
   tabs: ReadonlyArray<TabsProps.Tab>;
 
+  /**
+   * Actions for the tabs header, displayed next to the list of tabs.
+   * Use this to add a button or button dropdown that performs actions on the
+   * entire tab list. We recommend a maximum of one interactive element to
+   * minimize the number of keyboard tab stops between the tab list and content.
+   */
+  actions?: React.ReactNode;
+
   /**
    * The possible visual variants of tabs are the following:
    * * `default` - Use in any context.

src/tabs/tab-header-bar.scss

@@ -17,6 +17,13 @@ $label-horizontal-spacing: awsui.$space-xs;
   padding-block: 0;
   padding-inline: 0;
   display: flex;
+  flex-wrap: wrap;
+}
+
+.tab-header-scroll-container {
+  display: flex;
+  flex-grow: 1;
+  max-inline-size: 100%;
 }
 
 .tabs-header-list {
@@ -66,6 +73,14 @@ $label-horizontal-spacing: awsui.$space-xs;
   }
 }
 
+.actions-container {
+  flex-shrink: 0;
+  align-self: center;
+  padding-block: awsui.$space-xs;
+  padding-inline: awsui.$space-xs;
+  margin-inline-start: auto;
+}
+
 .tabs-tab {
   // Clear list formatting that comes with list item
   list-style: none;

src/tabs/tab-header-bar.tsx

@@ -79,6 +79,7 @@
   ariaLabel?: string;
   ariaLabelledby?: string;
   i18nStrings?: TabsProps.I18nStrings;
+  actions?: TabsProps['actions'];
 }
 
 export function TabHeaderBar({
@@ -90,6 +91,7 @@
   ariaLabel,
   ariaLabelledby,
   i18nStrings,
+  actions,
 }: TabHeaderBarProps) {
   const headerBarRef = useRef<HTMLUListElement>(null);
   const activeTabHeaderRef = useRef<null | HTMLElement>(null);
@@ -289,54 +291,56 @@
   const TabList = hasActionOrDismissible ? 'div' : 'ul';
 
   return (
-    //converted span to div as list should not be a child of span for HTML validation
-    <div className={classes} ref={containerRef}>
-      {horizontalOverflow && (
-        <span ref={inlineStartOverflowButton} className={leftButtonClasses}>
-          <InternalButton
-            formAction="none"
-            variant="icon"
-            iconName="angle-left"
-            disabled={!inlineStartOverflow}
-            __focusable={true}
-            onClick={() => onPaginationClick(headerBarRef, 'backward')}
-            ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}
-          />
-        </span>
-      )}
-      <SingleTabStopNavigationProvider
-        ref={navigationAPI}
-        navigationActive={true}
-        getNextFocusTarget={getNextFocusTarget}
-        onUnregisterActive={onUnregisterActive}
-      >
-        <TabList
-          {...tabActionAttributes}
-          className={clsx(styles['tabs-header-list'], analyticsSelectors['tabs-header-list'])}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledby}
-          ref={headerBarRef as never}
-          onScroll={onScroll}
-          onKeyDown={onKeyDown}
-          onFocus={onFocus}
-          onBlur={onBlur}
+    <div className={classes}>
+      <div className={styles['tab-header-scroll-container']} ref={containerRef}>
+        {horizontalOverflow && (
+          <span ref={inlineStartOverflowButton} className={leftButtonClasses}>
+            <InternalButton
+              formAction="none"
+              variant="icon"
+              iconName="angle-left"
+              disabled={!inlineStartOverflow}
+              __focusable={true}
+              onClick={() => onPaginationClick(headerBarRef, 'backward')}
+              ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}
+            />
+          </span>
+        )}
+        <SingleTabStopNavigationProvider
+          ref={navigationAPI}
+          navigationActive={true}
+          getNextFocusTarget={getNextFocusTarget}
+          onUnregisterActive={onUnregisterActive}
         >
-          {tabs.map(renderTabHeader)}
-        </TabList>
-      </SingleTabStopNavigationProvider>
-      {horizontalOverflow && (
-        <span className={rightButtonClasses}>
-          <InternalButton
-            formAction="none"
-            variant="icon"
-            iconName="angle-right"
-            disabled={!inlineEndOverflow}
-            __focusable={true}
-            onClick={() => onPaginationClick(headerBarRef, 'forward')}
-            ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}
-          />
-        </span>
-      )}
+          <TabList
+            {...tabActionAttributes}
+            className={clsx(styles['tabs-header-list'], analyticsSelectors['tabs-header-list'])}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            ref={headerBarRef as never}
+            onScroll={onScroll}
+            onKeyDown={onKeyDown}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          >
+            {tabs.map(renderTabHeader)}
+          </TabList>
+        </SingleTabStopNavigationProvider>
+        {horizontalOverflow && (
+          <span className={rightButtonClasses}>
+            <InternalButton
+              formAction="none"
+              variant="icon"
+              iconName="angle-right"
+              disabled={!inlineEndOverflow}
+              __focusable={true}
+              onClick={() => onPaginationClick(headerBarRef, 'forward')}
+              ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}
+            />
+          </span>
+        )}
+      </div>
+      {actions && <div className={styles['actions-container']}>{actions}</div>}
     </div>
   );
 

src/test-utils/dom/tabs/index.ts

@@ -124,4 +124,8 @@ export default class TabsWrapper extends ComponentWrapper<HTMLButtonElement> {
   findActiveTabAction(): ElementWrapper | null {
     return this.find(`.${styles['tabs-tab-active']} .${styles['tabs-tab-action']}`);
   }
+
+  findActions(): ElementWrapper | null {
+    return this.find(`.${styles['actions-container']}`);
+  }
 }