feat(badge-indicator): ui-shell and tab implementation (#18583)

* feat(badge-indicators): new component

* fix(badge): clean up stories and add imports

* test(avt): badge indicator

* fix(button): revert

* fix(Styles): badge

* chore(test): update

* fix(badge-indicator): make internal and add prop

* fix(badgeIndicator): add badgeCountLabel

* refactor: combines label and badgeLabel props

* fix: updates SR announcement & stories

* fix(iconButton): default is really lg and label

* fix(badgeIndicator): remove badgeCountLabel use aria-describedby

* fix(button): cleanup

* fix(icon-button): badgeId and label description

* feat(badge-indicator): ui-shell/tab/treeview implementation

* fix(badge-indicator): remove treeview and cleanup tab and ui-shell

* chore(props): export shape/icon indicator props

* fix(styles): remove unused styles

* fix(api): update

* feat: adds badge to WC - UI shell

* chore: slot clean up

* feat(storybook): add controls

---------

Co-authored-by: Nikhil Tomar <nikhiltomar753@gmail.com>
Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>

Author: ariellalgilmore

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4403,6 +4403,9 @@ Map {
   "IconTab" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
+      "badgeIndicator": Object {
+        "type": "bool",
+      },
       "children": Object {
         "type": "node",
       },

packages/react/src/components/IconIndicator/index.tsx

@@ -56,7 +56,7 @@ const iconTypes = {
 
 export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
 
-interface IconIndicatorProps {
+export interface IconIndicatorProps {
   /**
    * Specify an optional className to add.
    */

packages/react/src/components/ShapeIndicator/index.tsx

@@ -73,7 +73,7 @@ const shapeTypes = {
 
 export type ShapeIndicatorKind = (typeof ShapeIndicatorKinds)[number];
 
-interface ShapeIndicatorProps {
+export interface ShapeIndicatorProps {
   /**
    * Specify an optional className to add.
    */

packages/react/src/components/Tabs/Tabs.stories.js

@@ -348,7 +348,7 @@ export const Manual = () => {
   );
 };
 
-export const Icon20Only = () => {
+export const Icon20Only = (args) => {
   return (
     <Tabs>
       <TabList iconSize="lg">
@@ -358,7 +358,7 @@ export const Icon20Only = () => {
         <IconTab label="Activity">
           <Activity size={20} aria-label="Activity" />
         </IconTab>
-        <IconTab label="Notification">
+        <IconTab label="New Notifications" {...args}>
           <Notification size={20} aria-label="Notification" />
         </IconTab>
         <IconTab label="Chat">
@@ -375,7 +375,16 @@ export const Icon20Only = () => {
   );
 };
 
-export const IconOnly = () => {
+Icon20Only.argTypes = {
+  badgeIndicator: {
+    description: '**Experimental**: Display an empty dot badge on the Tab.',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const IconOnly = (args) => {
   return (
     <Tabs>
       <TabList iconSize="default">
@@ -385,7 +394,7 @@ export const IconOnly = () => {
         <IconTab label="Activity">
           <Activity aria-label="Activity" />
         </IconTab>
-        <IconTab label="Notification">
+        <IconTab label="New Notifications" {...args}>
           <Notification aria-label="Notification" />
         </IconTab>
         <IconTab label="Chat">
@@ -402,6 +411,15 @@ export const IconOnly = () => {
   );
 };
 
+IconOnly.argTypes = {
+  badgeIndicator: {
+    description: '**Experimental**: Display an empty dot badge on the Tab.',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
 export const Contained = () => {
   return (
     <Tabs>

packages/react/src/components/Tabs/Tabs.tsx

@@ -15,7 +15,9 @@ import React, {
   useState,
   useRef,
   useEffect,
+  useMemo,
   forwardRef,
+  createContext,
   type ReactNode,
   type MouseEvent,
   type KeyboardEvent,
@@ -43,6 +45,7 @@ import { Close } from '@carbon/icons-react';
 import { useEvent } from '../../internal/useEvent';
 import { useMatchMedia } from '../../internal/useMatchMedia';
 import { Text } from '../Text';
+import BadgeIndicator from '../BadgeIndicator';
 
 const verticalTabHeight = 64;
 
@@ -1211,6 +1214,7 @@ const Tab = forwardRef<HTMLElement, TabProps>(function Tab(
     onTabCloseRequest,
   } = React.useContext(TabsContext);
   const { index, hasSecondaryLabel, contained } = React.useContext(TabContext);
+  const { badgeIndicator } = React.useContext(IconTabContext) || {};
   const dismissIconRef = useRef<HTMLButtonElement>(null);
   const tabRef = useRef<HTMLElement>(null);
   const ref = useMergedRefs([forwardRef, tabRef]);
@@ -1441,6 +1445,7 @@ const Tab = forwardRef<HTMLElement, TabProps>(function Tab(
             {secondaryLabel}
           </Text>
         )}
+        {!disabled && badgeIndicator && <BadgeIndicator />}
       </BaseComponent>
       {/* always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state */}
       {DismissIcon}
@@ -1504,7 +1509,15 @@ Tab.propTypes = {
  * IconTab
  */
 
+const IconTabContext = createContext<{ badgeIndicator?: boolean } | false>(
+  false
+);
+
 export interface IconTabProps extends DivAttributes {
+  /**
+   * **Experimental**: Display an empty dot badge on the Tab.
+   */
+  badgeIndicator?: boolean;
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
@@ -1529,7 +1542,8 @@ export interface IconTabProps extends DivAttributes {
    * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
    * This means that if you have text in the child node it will not be
-   * announced to the screen reader.
+   * announced to the screen reader. If using the badgeIndicator then provide a
+   * label with describing that there is a new notification.
    */
   label: ReactNode;
 
@@ -1541,6 +1555,7 @@ export interface IconTabProps extends DivAttributes {
 
 const IconTab = React.forwardRef<HTMLDivElement, IconTabProps>(function IconTab(
   {
+    badgeIndicator,
     children,
     className: customClassName,
     defaultOpen = false,
@@ -1552,27 +1567,38 @@ const IconTab = React.forwardRef<HTMLDivElement, IconTabProps>(function IconTab(
   ref
 ) {
   const prefix = usePrefix();
+  const value = useMemo(() => ({ badgeIndicator }), [badgeIndicator]);
+
+  const hasSize20 =
+    React.isValidElement(children) && children.props?.size === 20;
 
   const classNames = cx(
     `${prefix}--tabs__nav-item--icon-only`,
-    customClassName
+    customClassName,
+    { [`${prefix}--tabs__nav-item--icon-only__20`]: hasSize20 }
   );
   return (
-    <Tooltip
-      align="bottom"
-      defaultOpen={defaultOpen}
-      className={`${prefix}--icon-tooltip`}
-      enterDelayMs={enterDelayMs}
-      label={label}
-      leaveDelayMs={leaveDelayMs}>
-      <Tab className={classNames} ref={ref} {...rest}>
-        {children}
-      </Tab>
-    </Tooltip>
+    <IconTabContext.Provider value={value}>
+      <Tooltip
+        align="bottom"
+        defaultOpen={defaultOpen}
+        className={`${prefix}--icon-tooltip`}
+        enterDelayMs={enterDelayMs}
+        label={label}
+        leaveDelayMs={leaveDelayMs}>
+        <Tab className={classNames} ref={ref} {...rest}>
+          {children}
+        </Tab>
+      </Tooltip>
+    </IconTabContext.Provider>
   );
 });
 
 IconTab.propTypes = {
+  /**
+   * **Experimental**: Display an empty dot badge on the Tab.
+   */
+  badgeIndicator: PropTypes.bool,
   /**
    * Provide an icon to be rendered inside `IconTab` as the visual label for Tab.
    */
@@ -1597,7 +1623,8 @@ IconTab.propTypes = {
    * Provide the label to be rendered inside the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
    * This means that if you have text in the child node it will not be
-   * announced to the screen reader.
+   * announced to the screen reader. If using the badgeIndicator then provide a
+   * label with describing that there is a new notification.
    */
   label: PropTypes.node.isRequired,
 

packages/react/src/components/Tabs/__tests__/Tabs-test.js

@@ -7,8 +7,10 @@ import {
   TabPanels,
   TabList,
   TabListVertical,
+  IconTab,
 } from '../Tabs';
 import { act } from 'react';
+import { Notification } from '@carbon/icons-react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -234,6 +236,28 @@ describe('Tab', () => {
       'cds--tabs__nav-item--icon'
     );
   });
+  it('should render badge indicator when badgeIndicator prop is true', () => {
+    render(
+      <Tabs>
+        <TabList aria-label="List of tabs">
+          <IconTab
+            badgeIndicator
+            data-testid="icon-tab-with-badge"
+            label="New Notifications">
+            <Notification size={20} aria-label="Notification" />
+          </IconTab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Icon Tab Panel</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    // Get the icon tab
+    const iconTab = screen.getByTestId('icon-tab-with-badge');
+    const badgeIndicator = iconTab.querySelector(`.${prefix}--badge-indicator`);
+    expect(badgeIndicator).not.toBeNull();
+  });
 
   it('should call onClick from props if provided', async () => {
     const onClick = jest.fn();

packages/react/src/components/UIShell/HeaderGlobalAction.tsx

@@ -105,6 +105,8 @@ const HeaderGlobalAction: React.FC<HeaderGlobalActionProps> = React.forwardRef(
         onClick={onClick}
         type="button"
         hasIconOnly
+        size="lg"
+        kind="ghost"
         iconDescription={ariaLabel}
         tooltipPosition="bottom"
         tooltipAlignment={tooltipAlignment}

packages/react/src/components/UIShell/UIShell.HeaderBase.stories.js

@@ -505,7 +505,7 @@ export const HeaderWSideNav = () => (
 
 HeaderWSideNav.storyName = 'Header w/ SideNav';
 
-export const HeaderWActionsAndRightPanel = () => (
+export const HeaderWActionsAndRightPanel = (args) => (
   <>
     <Header aria-label="IBM Platform Name">
       <HeaderName href="#" prefix="IBM">
@@ -519,6 +519,7 @@ export const HeaderWActionsAndRightPanel = () => (
         </HeaderGlobalAction>
         <HeaderGlobalAction
           aria-label="Notifications"
+          badgeCount={args.badgeCount}
           isActive
           onClick={action('notification click')}>
           <Notification size={20} />
@@ -538,6 +539,20 @@ export const HeaderWActionsAndRightPanel = () => (
 
 HeaderWActionsAndRightPanel.storyName = 'Header w/ Actions and Right Panel';
 
+HeaderWActionsAndRightPanel.argTypes = {
+  badgeCount: {
+    description:
+      ' **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0. Must be used with size="lg" and kind="ghost"',
+    control: {
+      type: 'number',
+    },
+  },
+};
+
+HeaderWActionsAndRightPanel.args = {
+  badgeCount: 4,
+};
+
 export const HeaderWActionsAndSwitcher = (args) => (
   <HeaderContainer
     {...args}

packages/react/src/index.ts

@@ -158,6 +158,8 @@ export {
 export * from './components/Popover';
 export * from './components/ProgressBar';
 export { AILabel, AILabelContent, AILabelActions } from './components/AILabel';
+export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
+export { ShapeIndicator as unstable__ShapeIndicator } from './components/ShapeIndicator';
 // Keep until V12
 export {
   AILabel as unstable__Slug,
@@ -370,6 +372,9 @@ export type { SectionProps } from './components/Heading/index';
 export type { IconSkeletonProps } from './components/Icon/Icon.Skeleton';
 export type { IconButtonProps } from './components/IconButton/index';
 
+// icon indicator
+export type { IconIndicatorProps } from './components/IconIndicator/index';
+
 //idprefix
 export type { IdPrefixProps } from './components/IdPrefix/index';
 
@@ -480,6 +485,9 @@ export type { SelectSkeletonProps } from './components/Select/Select.Skeleton';
 export type { SelectItemProps } from './components/SelectItem/SelectItem';
 export type { SelectItemGroupProps } from './components/SelectItemGroup/SelectItemGroup';
 
+// shape indicator
+export type { ShapeIndicatorProps } from './components/ShapeIndicator/index';
+
 //skeleton items
 export type { SkeletonIconProps } from './components/SkeletonIcon/SkeletonIcon';
 export type { SkeletonPlaceholderProps } from './components/SkeletonPlaceholder/SkeletonPlaceholder';
@@ -606,7 +614,3 @@ export type { SwitcherItemProps } from './components/UIShell/SwitcherItem';
 
 //unordered list
 export type { UnorderedListProps } from './components/UnorderedList/UnorderedList';
-
-// status indicators
-export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
-export { ShapeIndicator as unstable__ShapeIndicator } from './components/ShapeIndicator';

packages/styles/scss/components/tabs/_tabs.scss

@@ -315,6 +315,7 @@
     .#{$prefix}--tabs__nav-item {
       @include reset;
 
+      position: relative;
       display: flex;
       flex: 1 0 auto;
       padding: 0;
@@ -547,6 +548,14 @@
       }
     }
 
+    .#{$prefix}--tabs__nav-item--icon-only:not(
+        .#{$prefix}--tabs__nav-item--icon-only__20
+      )
+      .#{$prefix}--badge-indicator {
+      margin-block-start: $spacing-02;
+      margin-inline-end: $spacing-02;
+    }
+
     //-----------------------------
     // Item Hover
     //-----------------------------