feat: Add icon to the IconButton's tooltip

examples/index.tsx

@@ -309,6 +309,23 @@ const app = (
             <p></p>
           </HtmlTooltip>
           <br></br>
+          <br></br>
+          <br></br>
+          <HtmlTooltip
+            placement={"top-start"}
+            open={true}
+            title={
+              <BaseTooltipTitle
+                tooltip={{
+                  name: "Tooltip With Big Status",
+                  icon: icons.betaStatus,
+                }}
+              />
+            }
+          >
+            <p></p>
+          </HtmlTooltip>
+          <br></br>
           <Box sx={{ width: "300px" }}>
             <Card title={"Example Card"}>
               <Typography>This is a basic card.</Typography>

src/BaseTooltipTitle.tsx

@@ -6,21 +6,21 @@ import {
   ThemeProvider,
   StyledEngineProvider,
 } from "@mui/material";
-
 import makeStyles from "@mui/styles/makeStyles";
-
+import SVG from "react-inlinesvg";
 import { theme, darkGrey } from "./theme";
 import type { Tooltip } from "./tooltips";
 
 type Props = {
-  tooltip: Omit<Tooltip, "icon">;
+  tooltip: Tooltip;
 };
 
 const useStyles = makeStyles({
   mainbox: {
     display: "flex",
     alignItems: "center",
     justifyItems: "space-between",
+    height: "35px",
     "& > div:first-child": {
       // Tooltip text
       marginLeft: "8px",
@@ -49,6 +49,7 @@ const useStyles = makeStyles({
     lineHeight: "9px !important",
     fontWeight: 500,
   },
+  tooltipIcon: { width: "auto", height: "24px" },
 });
 
 export const BaseTooltipTitle = ({ tooltip }: Props): ReactElement => {
@@ -67,7 +68,6 @@ export const BaseTooltipTitle = ({ tooltip }: Props): ReactElement => {
           {tooltip.shortcutSymbol.toUpperCase()}
         </Typography>
       </Avatar>
-
       <Avatar>
         <Typography
           className={
@@ -89,9 +89,20 @@ export const BaseTooltipTitle = ({ tooltip }: Props): ReactElement => {
       <ThemeProvider theme={theme}>
         <Box className={classes.mainbox}>
           <Box>
-            <Typography>{tooltip.name}</Typography>
+            <Typography
+              sx={{
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {tooltip.name}
+            </Typography>
           </Box>
-          {!tooltip.shortcut ? null : hasShortcutSymbol}
+          {tooltip.shortcut && hasShortcutSymbol}
+          {tooltip?.icon && (
+            <SVG src={tooltip?.icon} className={classes.tooltipIcon} />
+          )}
         </Box>
       </ThemeProvider>
     </StyledEngineProvider>

src/Card.tsx

@@ -21,6 +21,7 @@ interface Props extends CardProps {
   warningDialog?: boolean;
   isPinned?: boolean | null;
   handlePin?: () => void;
+  backgroundColor?: string;
 }
 
 const CardIconButton = styled(IconButton)({
@@ -42,6 +43,7 @@ export function Card(props: Props): JSX.Element {
     <MaterialCard
       sx={{
         borderRadius: "6px",
+        backgroundColor: props.backgroundColor,
       }}
     >
       <Paper
@@ -97,7 +99,10 @@ export function Card(props: Props): JSX.Element {
 
       <Paper
         elevation={0}
-        sx={{ p: props.noPadding ? null : "12px 16px 14px" }}
+        sx={{
+          p: props.noPadding ? null : "12px 16px 14px",
+          backgroundColor: "transparent",
+        }}
       >
         {props.children}
       </Paper>
@@ -111,4 +116,5 @@ Card.defaultProps = {
   warningDialog: null,
   isPinned: null,
   handlePin: null,
+  backgroundColor: "#FFFFFF",
 };

src/Dialog.tsx

@@ -9,6 +9,7 @@ interface Props {
   warningDialog?: boolean;
   close?: boolean;
   afterClose?: () => void;
+  backgroundColor?: string;
 }
 
 export function Dialog({
@@ -18,6 +19,7 @@ export function Dialog({
   close,
   warningDialog,
   afterClose,
+  backgroundColor,
 }: Props): ReactElement | null {
   const [open, setOpen] = useState<boolean>(false);
 
@@ -40,17 +42,6 @@ export function Dialog({
     }
   }, [close]);
 
-  const dialogContent = (
-    <Card
-      title={title}
-      handleClose={handleClose}
-      closeButton
-      warningDialog={warningDialog}
-    >
-      {children}
-    </Card>
-  );
-
   return (
     <>
       {cloneElement(TriggerButton, {
@@ -60,8 +51,20 @@ export function Dialog({
           if (onClick) onClick();
         },
       })}
-      <MaterialDialog open={open} onClose={handleClose}>
-        {dialogContent}
+      <MaterialDialog
+        sx={{ "& div": { maxWidth: "unset" } }}
+        open={open}
+        onClose={handleClose}
+      >
+        <Card
+          title={title}
+          handleClose={handleClose}
+          closeButton
+          warningDialog={warningDialog}
+          backgroundColor={backgroundColor}
+        >
+          {children}
+        </Card>
       </MaterialDialog>
     </>
   );
@@ -72,4 +75,5 @@ Dialog.defaultProps = {
   close: null,
   afterClose: null,
   warningDialog: null,
+  backgroundColor: "inherit",
 };

src/IconButton.tsx

@@ -17,6 +17,7 @@ export interface Tooltip {
   name: string;
   shortcut?: string;
   shortcutSymbol?: string;
+  icon?: string;
 }
 
 export interface Props extends ButtonProps {
@@ -84,6 +85,7 @@ export const IconButton = (props: Props): ReactElement => {
         >
           <span>
             <Button
+              sx={{ minWidth: "unset" }}
               disabled={disabled}
               ref={(ref) => {
                 if (!ref || !setRefCallback) return;

src/interface.ts

@@ -1,6 +1,6 @@
 export interface Tooltip {
   name: string;
-  icon: string;
+  icon?: string;
   shortcut?: string;
   shortcutSymbol?: string;
 }