HCL-TECH-SOFTWARE · felix-hcl · Sep 4, 2024 · Sep 2, 2024 · Sep 2, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@
 - Added hover actions for the Accordion component.
 - Added sync icon for the Tile component.
 - Adjusted `IconButton` component styling
+- Added tooltips to the icons in the pagination, dialog, header, and snackbar components.
 
 ### Breaking changes
 

diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
@@ -21,6 +21,7 @@ import DialogTitle from './DialogTitle';
 import DialogContent from './DialogContent';
 import DialogActions from './DialogActions';
 import Backdrop from '../Backdrop';
+import Tooltip from '../Tooltip';
 
 export enum DialogSizes {
   EXTRA_SMALL = 'XS',
@@ -119,6 +120,7 @@ export type DialogProps = MuiDialogProps & {
   onClose: Function,
   hideHeader?: boolean,
   hideFooter?: boolean,
+  closeIconToolTip?: string,
 }
 
 const Dialog = ({ ...props }: DialogProps) => {
@@ -137,13 +139,15 @@ const Dialog = ({ ...props }: DialogProps) => {
         && (
           <DialogTitle data-testid={DialogTestIds.DIALOG_TITLE}>
             <Grid>{headerChildren}</Grid>
-            <IconButton
-              aria-label="close"
-              onClick={(e) => { rest.onClose(e, 'backdropClick'); }}
-              data-testid={DialogTestIds.DIALOG_CLOSE_ICON}
-            >
-              <CloseIcon />
-            </IconButton>
+            <Tooltip title={props.closeIconToolTip}>
+              <IconButton
+                aria-label="close"
+                onClick={(e) => { rest.onClose(e, 'backdropClick'); }}
+                data-testid={DialogTestIds.DIALOG_CLOSE_ICON}
+              >
+                <CloseIcon />
+              </IconButton>
+            </Tooltip>
           </DialogTitle>
         )}
       <DialogContent
@@ -179,6 +183,7 @@ Dialog.defaultProps = {
   /* eslint-enable no-empty-function */
   hideHeader: false,
   hideFooter: false,
+  closeIconToolTip: 'Close',
 };
 
 export * from '@mui/material/Dialog';

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -58,6 +58,7 @@ export interface IHeaderStartSection {
   avatar?: React.ReactNode,
   subtitle?: string,
   favoritesToggleIcon?: React.ReactNode,
+  backIconToolTip?: string,
 }
 
 export interface HeaderProps extends MuiContainerProps {
@@ -230,21 +231,25 @@ const Header = ({ ...props }: HeaderProps) => {
         >
           {(startSection?.withBackButton !== undefined && startSection.withBackButton && startSection?.avatar !== undefined)
             && (
-              <IconButton
-                onClick={() => { onClickBackButton(); }}
-                data-testid={HeaderTestIds.HEADER_BACK_BUTTON}
-              >
-                { theme.direction === ThemeDirectionType.RTL ? <ArrowRight /> : <ArrowLeft /> }
-              </IconButton>
+              <Tooltip title={startSection.backIconToolTip}>
+                <IconButton
+                  onClick={() => { onClickBackButton(); }}
+                  data-testid={HeaderTestIds.HEADER_BACK_BUTTON}
+                >
+                  { theme.direction === ThemeDirectionType.RTL ? <ArrowRight /> : <ArrowLeft /> }
+                </IconButton>
+              </Tooltip>
             )}
           {(startSection?.withBackButton !== undefined && startSection.withBackButton && startSection?.avatar === undefined)
             && (
-              <IconButton
-                onClick={() => { onClickBackButton(); }}
-                data-testid={HeaderTestIds.HEADER_BACK_BUTTON}
-              >
-                { theme.direction === ThemeDirectionType.RTL ? <ArrowRight /> : <ArrowLeft /> }
-              </IconButton>
+              <Tooltip title={startSection.backIconToolTip}>
+                <IconButton
+                  onClick={() => { onClickBackButton(); }}
+                  data-testid={HeaderTestIds.HEADER_BACK_BUTTON}
+                >
+                  { theme.direction === ThemeDirectionType.RTL ? <ArrowRight /> : <ArrowLeft /> }
+                </IconButton>
+              </Tooltip>
             )}
           {startSection?.avatar !== undefined && startSection.avatar}
           {startSection?.title !== undefined

diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx
@@ -232,6 +232,7 @@ const IconButton = React.forwardRef(({ ...props }: IconButtonProps, forwardRef)
           )}
         </StyledIconButtonContainer>
       </StyledSubContainer>
+      {props.label && (
       <Typography
         variant="caption"
         textAlign="center"
@@ -246,6 +247,7 @@ const IconButton = React.forwardRef(({ ...props }: IconButtonProps, forwardRef)
       >
         {props.label}
       </Typography>
+      )}
     </StyledMainContainer>
   );
 }) as React.FC<IconButtonProps>;

diff --git a/src/Pagination/CustomTablePaginationActions.tsx b/src/Pagination/CustomTablePaginationActions.tsx
@@ -27,6 +27,7 @@ import Typography from '../Typography/Typography';
 import Autocomplete from '../Autocomplete/Autocomplete';
 import { TYPOGRAPHY, ThemeDirectionType } from '../theme';
 import { TablePaginationProps, TablePaginationLocalizationPlaceholders } from './Pagination';
+import Tooltip from '../Tooltip/Tooltip';
 
 export enum TablePaginationTestIds {
   TABLE_PAGINATION_ACTIONS_ROOT = 'tablePaginationActionsRoot',
@@ -148,22 +149,26 @@ const CustomTablePaginationActions = (props: CustomTablePaginationActionsProps)
           )}
       </div>
       <div data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_DIV}>
-        <IconButton
-          onClick={handleFirstPageButtonClick}
-          disabled={page === 0}
-          aria-label={translation.firstPageAriaLabel}
-          data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_FIRST}
-        >
-          {theme.direction === ThemeDirectionType.RTL ? <LastPageIcon /> : <FirstPageIcon />}
-        </IconButton>
-        <IconButton
-          onClick={handleBackButtonClick}
-          disabled={page === 0}
-          aria-label={translation.prevPageAriaLabel}
-          data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_PREV}
-        >
-          {theme.direction === ThemeDirectionType.RTL ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
-        </IconButton>
+        <Tooltip title={theme.direction === ThemeDirectionType.RTL ? translation.lastPageAriaLabel : translation.firstPageAriaLabel} placement="top">
+          <IconButton
+            onClick={handleFirstPageButtonClick}
+            disabled={page === 0}
+            aria-label={translation.firstPageAriaLabel}
+            data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_FIRST}
+          >
+            {theme.direction === ThemeDirectionType.RTL ? <LastPageIcon /> : <FirstPageIcon />}
+          </IconButton>
+        </Tooltip>
+        <Tooltip title={theme.direction === ThemeDirectionType.RTL ? translation.nextPageAriaLabel : translation.prevPageAriaLabel} placement="top">
+          <IconButton
+            onClick={handleBackButtonClick}
+            disabled={page === 0}
+            aria-label={translation.prevPageAriaLabel}
+            data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_PREV}
+          >
+            {theme.direction === ThemeDirectionType.RTL ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
+          </IconButton>
+        </Tooltip>
         { atLeast480px
           && <Typography variant="body2" data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_LABEL}>{translation.pageLabel}</Typography>}
         <Autocomplete
@@ -224,22 +229,26 @@ const CustomTablePaginationActions = (props: CustomTablePaginationActionsProps)
               {`${translation.pageDescription.replace(TablePaginationLocalizationPlaceholders.TOTAL_PAGES_COUNT, `${Math.max(0, Math.ceil(count / rowsPerPage) - 1) + 1}`)}`}
             </Typography>
           )}
-        <IconButton
-          onClick={handleNextButtonClick}
-          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-          aria-label={translation.nextPageAriaLabel}
-          data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_NEXT}
-        >
-          {theme.direction === ThemeDirectionType.RTL ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
-        </IconButton>
-        <IconButton
-          onClick={handleLastPageButtonClick}
-          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-          aria-label={translation.lastPageAriaLabel}
-          data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_LAST}
-        >
-          {theme.direction === ThemeDirectionType.RTL ? <FirstPageIcon /> : <LastPageIcon />}
-        </IconButton>
+        <Tooltip title={theme.direction === ThemeDirectionType.RTL ? translation.prevPageAriaLabel : translation.nextPageAriaLabel} placement="top">
+          <IconButton
+            onClick={handleNextButtonClick}
+            disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+            aria-label={translation.nextPageAriaLabel}
+            data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_NEXT}
+          >
+            {theme.direction === ThemeDirectionType.RTL ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
+          </IconButton>
+        </Tooltip>
+        <Tooltip title={theme.direction === ThemeDirectionType.RTL ? translation.firstPageAriaLabel : translation.lastPageAriaLabel} placement="top">
+          <IconButton
+            onClick={handleLastPageButtonClick}
+            disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+            aria-label={translation.lastPageAriaLabel}
+            data-testid={TablePaginationTestIds.TABLE_PAGINATION_PAGE_LAST}
+          >
+            {theme.direction === ThemeDirectionType.RTL ? <FirstPageIcon /> : <LastPageIcon />}
+          </IconButton>
+        </Tooltip>
       </div>
     </Box>
   );

diff --git a/src/Panel/Panel.tsx b/src/Panel/Panel.tsx
@@ -71,6 +71,7 @@ const StyledDrawer = styled(Drawer)((theme) => {
     top: 0,
     '.MuiPaper-root': {
       padding: 0,
+      overflowX: 'hidden',
     },
     '&.MuiDrawer-root': {
       padding: 0,

diff --git a/src/Panel/PanelTabs.tsx b/src/Panel/PanelTabs.tsx
@@ -109,6 +109,11 @@ const PanelTabs: React.FC<PanelTabsProps> = ({
   togglePanel,
   translation,
 }: PanelTabsProps) => {
+  const handleTabClick = (event: React.MouseEvent<HTMLDivElement>, index: number) => {
+    if (selectedTabValue === index) {
+      handleTabChange(event, index);
+    }
+  };
   return (
     <PanelTabContainerStyled>
       <PanelTabsStyled
@@ -134,6 +139,7 @@ const PanelTabs: React.FC<PanelTabsProps> = ({
               icon={iconTooltip}
               aria-label={tab.tabIcon.label}
               disableFocusRipple
+              onClick={(event) => { handleTabClick(event, index); }}
             />
           );
         })}

diff --git a/src/Snackbar/Snackbar.tsx b/src/Snackbar/Snackbar.tsx
@@ -26,6 +26,7 @@ import Button from '../Button';
 import IconButton, { IconButtonVariants } from '../IconButton';
 import Typography from '../Typography';
 import CircularProgress, { CircularProgressVariants } from '../ProgressIndicator/CircularProgress';
+import Tooltip from '../Tooltip';
 
 export enum SnackbarVariants {
   WARNING = 'warning',
@@ -205,13 +206,15 @@ export type SnackbarProps = MuiSnackbarProps & {
   variant: SnackbarVariants,
   disabledSnackbar: boolean,
   buttonText?: string,
+  buttonTextToolTip?: string,
   buttonAction: Function,
   onClose: Function,
   placeholderIcon?: JSX.Element,
   placeholderIconAction: Function,
   showPlaceholderIcon?: boolean,
   progressVariant?: CircularProgressVariants,
   progressValue?: number,
+  closeIconToolTip?: string,
 }
 
 const Snackbar = ({ ...props }: SnackbarProps) => {
@@ -254,15 +257,17 @@ const Snackbar = ({ ...props }: SnackbarProps) => {
         </Typography>
         { buttonText
           && (
-            <Button
-              data-testid={SnackbarTestIds.SNACKBAR_BUTTON}
-              onClick={() => { buttonAction(); }}
-              disabled={disabledSnackbar}
-              aria-disabled={disabledSnackbar}
-              {...showPlaceholderIcon && { 'data-hasplaceholdericon': 'true' }}
-            >
-              {buttonText}
-            </Button>
+            <Tooltip title={props.buttonTextToolTip}>
+              <Button
+                data-testid={SnackbarTestIds.SNACKBAR_BUTTON}
+                onClick={() => { buttonAction(); }}
+                disabled={disabledSnackbar}
+                aria-disabled={disabledSnackbar}
+                {...showPlaceholderIcon && { 'data-hasplaceholdericon': 'true' }}
+              >
+                {buttonText}
+              </Button>
+            </Tooltip>
           )}
         { (showPlaceholderIcon && React.isValidElement(placeholderIcon))
           && (
@@ -276,14 +281,16 @@ const Snackbar = ({ ...props }: SnackbarProps) => {
               {placeholderIcon}
             </IconButton>
           )}
-        <IconButton
-          onClick={(e) => { rest.onClose(e, 'clickaway'); }} // 2nd arg is just to provide a SnackbarCloseReason for typecheck
-          disabled={disabledSnackbar}
-          aria-disabled={disabledSnackbar}
-          variant={IconButtonVariants.WITH_PADDING}
-        >
-          <CloseIcon data-testid={SnackbarTestIds.SNACKBAR_CLOSE} />
-        </IconButton>
+        <Tooltip title={props.closeIconToolTip}>
+          <IconButton
+            onClick={(e) => { rest.onClose(e, 'clickaway'); }} // 2nd arg is just to provide a SnackbarCloseReason for typecheck
+            disabled={disabledSnackbar}
+            aria-disabled={disabledSnackbar}
+            variant={IconButtonVariants.WITH_PADDING}
+          >
+            <CloseIcon data-testid={SnackbarTestIds.SNACKBAR_CLOSE} />
+          </IconButton>
+        </Tooltip>
       </Box>
     </MuiSnackbar>
   );
@@ -301,6 +308,7 @@ Snackbar.defaultProps = {
   onClose: () => {},
   /* eslint-enable no-empty-function */
   showPlaceholderIcon: false,
+  closeIconToolTip: 'Close',
 };
 
 export * from '@mui/material/Snackbar';

diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx
@@ -50,6 +50,7 @@ const Tab = ({ ...props }: TabProps) => {
         minWidth: 'auto',
         textTransform: 'none',
       }}
+      onClick={props.onClick}
     />
   );
 };

diff --git a/src/Tabs/Tabs.tsx b/src/Tabs/Tabs.tsx
@@ -97,11 +97,12 @@ const Tabs = ({ ...props }: TabsProps) => {
   }, [props.orientation]);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-    updateIndicatorStyle(event.currentTarget as HTMLElement);
     if (props.onChange) {
       props.onChange(event, newValue);
+    } else {
+      setValue(newValue);
     }
+    updateIndicatorStyle(event.currentTarget as HTMLElement);
   };
 
   return (
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ const Tab = ({ ...props }: TabProps) => { @@
             minWidth: 'auto',
             textTransform: 'none',
           }}
+          onClick={props.onClick}
         />
       );
     };
@@ Expand Down @@