Tooltip updates

apps/website/screens/components/dropdown/code/DropdownCodePage.tsx

@@ -184,6 +184,17 @@ const sections = [
                 <TableCode>0</TableCode>
               </td>
             </tr>
+            <tr>
+              <td>title</td>
+              <td>
+                <TableCode>string</TableCode>
+              </td>
+              <td>
+                Text representing advisory information related to the dropdown's trigger action. Under the hood, this
+                prop also serves as an accessible label for the component.
+              </td>
+              <td>-</td>
+            </tr>
           </tbody>
         </DxcTable>
       </>

apps/website/screens/components/heading/usage/HeadingUsagePage.tsx

@@ -39,7 +39,7 @@ const sections = [
           <>
             <DxcBulletedList>
               <DxcBulletedList.Item>
-                Use <Code>Heading</Code> componments from <Code>H1</Code> to <Code>H5</Code> when creating content
+                Use <Code>Heading</Code> components from <Code>H1</Code> to <Code>H5</Code> when creating content
                 hierarchy in the page.
               </DxcBulletedList.Item>
               <DxcBulletedList.Item>

apps/website/screens/principles/themes/ThemesPage.tsx

@@ -978,6 +978,9 @@ const sections = [
                         <td>Option font color</td>
                         <td>
                           <Code>listOptionFontColor</Code>
+                          <br />
+                          <br />
+                          <Code>listOptionIconColor</Code>
                         </td>
                       </tr>
                       <tr>

packages/lib/src/HalstackContext.tsx

@@ -255,6 +255,7 @@ const parseTheme = (theme: DeepPartial<OpinionatedTheme>): AdvancedTheme => {
   selectTokens.labelFontColor = theme?.select?.fontColor ?? selectTokens.labelFontColor;
   selectTokens.helperTextFontColor = theme?.select?.fontColor ?? selectTokens.helperTextFontColor;
   selectTokens.listOptionFontColor = theme?.select?.optionFontColor ?? selectTokens.listOptionFontColor;
+  selectTokens.listOptionIconColor = theme?.select?.optionFontColor ?? selectTokens.listOptionIconColor;
   selectTokens.placeholderFontColor = addLightness(30, theme?.select?.fontColor) ?? selectTokens.placeholderFontColor;
   selectTokens.collapseIndicatorColor = theme?.select?.fontColor ?? selectTokens.collapseIndicatorColor;
   selectTokens.hoverInputBorderColor = theme?.select?.hoverBorderColor ?? selectTokens.hoverInputBorderColor;

packages/lib/src/action-icon/ActionIcon.tsx

@@ -3,28 +3,26 @@ import ActionIconPropsTypes, { RefType } from "./types";
 import styled from "styled-components";
 import CoreTokens from "../common/coreTokens";
 import DxcIcon from "../icon/Icon";
-import DxcTooltip from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 
 const DxcActionIcon = forwardRef<RefType, ActionIconPropsTypes>(
-  ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => {
-    return (
-      <DxcTooltip label={title}>
-        <ActionIcon
-          aria-label={title}
-          disabled={disabled}
-          onClick={onClick}
-          onMouseDown={(event) => {
-            event.stopPropagation();
-          }}
-          tabIndex={tabIndex}
-          type="button"
-          ref={ref}
-        >
-          {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
-        </ActionIcon>
-      </DxcTooltip>
-    );
-  }
+  ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => (
+    <Tooltip label={title}>
+      <ActionIcon
+        aria-label={title}
+        disabled={disabled}
+        onClick={onClick}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+        tabIndex={tabIndex}
+        type="button"
+        ref={ref}
+      >
+        {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
+      </ActionIcon>
+    </Tooltip>
+  )
 );
 
 const ActionIcon = styled.button`

packages/lib/src/badge/Badge.tsx

@@ -1,9 +1,8 @@
 import styled from "styled-components";
 import BadgePropsType from "./types";
-import DxcFlex from "../flex/Flex";
 import CoreTokens from "../common/coreTokens";
 import DxcIcon from "../icon/Icon";
-import DxcTooltip from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 
 const contextualColorMap = {
   grey: {
@@ -75,14 +74,6 @@ const sizeMap = {
   },
 };
 
-const Label = ({ label, notificationLimit, size }) => {
-  return (
-    <LabelContainer size={size}>
-      {typeof label === "number" ? (label > notificationLimit ? "+" + notificationLimit : label) : label}
-    </LabelContainer>
-  );
-};
-
 const DxcBadge = ({
   label,
   title,
@@ -91,28 +82,26 @@ const DxcBadge = ({
   icon,
   notificationLimit = 99,
   size = "medium",
-}: BadgePropsType): JSX.Element => {
-  return (
-    <DxcTooltip label={title}>
-      <BadgeContainer
-        label={label}
-        mode={mode}
-        color={(mode === "contextual" && color) || undefined}
-        size={size}
-        aria-label={title}
-      >
-        {(mode === "contextual" && (
-          <DxcFlex gap="0.125rem" alignItems="center">
-            {icon && (
-              <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>
-            )}
-            <Label label={label} notificationLimit={notificationLimit} size={size} />
-          </DxcFlex>
-        )) || <Label label={label} notificationLimit={notificationLimit} size={size} />}
-      </BadgeContainer>
-    </DxcTooltip>
-  );
-};
+}: BadgePropsType): JSX.Element => (
+  <Tooltip label={title}>
+    <BadgeContainer
+      label={label}
+      mode={mode}
+      color={(mode === "contextual" && color) || undefined}
+      size={size}
+      aria-label={title}
+    >
+      {mode === "contextual" && icon && (
+        <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>
+      )}
+      {label && (
+        <Label size={size}>
+          {typeof label === "number" ? (label > notificationLimit ? "+" + notificationLimit : label) : label}
+        </Label>
+      )}
+    </BadgeContainer>
+  </Tooltip>
+);
 
 const getColor = (mode, color) => (mode === "contextual" ? contextualColorMap[color].text : CoreTokens.color_white);
 
@@ -128,17 +117,18 @@ const BadgeContainer = styled.div<{
   color: BadgePropsType["color"];
   size: BadgePropsType["size"];
 }>`
-  display: flex;
-  color: ${(props) => getColor(props.mode, props.color)};
-  background-color: ${(props) => getBackgroundColor(props.mode, props.color)};
+  box-sizing: border-box;
   border-radius: ${(props) => sizeMap[props.size].borderRadius};
+  padding: ${(props) => (props.label ? getPadding(props.mode, props.size) : "")};
   width: ${(props) => (!props.label && props.mode === "notification" ? sizeMap[props.size].width : "fit-content")};
   min-width: ${(props) => props.mode === "notification" && sizeMap[props.size].minWidth};
   height: ${(props) => sizeMap[props.size].height};
-  padding: ${(props) => (props.label ? getPadding(props.mode, props.size) : "")};
+  display: flex;
   align-items: center;
+  gap: ${CoreTokens.spacing_2};
   justify-content: center;
-  box-sizing: border-box;
+  background-color: ${(props) => getBackgroundColor(props.mode, props.color)};
+  color: ${(props) => getColor(props.mode, props.color)};
 `;
 
 const IconContainer = styled.div<{ size: BadgePropsType["size"] }>`
@@ -151,7 +141,7 @@ const IconContainer = styled.div<{ size: BadgePropsType["size"] }>`
   }
 `;
 
-const LabelContainer = styled.span<{ size: BadgePropsType["size"] }>`
+const Label = styled.span<{ size: BadgePropsType["size"] }>`
   font-family: ${CoreTokens.type_sans};
   font-size: ${(props) => sizeMap[props.size].fontSize};
   font-weight: ${CoreTokens.type_semibold};

packages/lib/src/button/Button.tsx

@@ -4,7 +4,7 @@ import { getMargin } from "../common/utils";
 import useTheme from "../useTheme";
 import ButtonPropsType from "./types";
 import DxcIcon from "../icon/Icon";
-import DxcTooltip from "../tooltip/Tooltip";
+import { Tooltip } from "../tooltip/Tooltip";
 
 const DxcButton = ({
   label = "",
@@ -24,7 +24,7 @@ const DxcButton = ({
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
-      <DxcTooltip label={title}>
+      <Tooltip label={title}>
         <Button
           aria-label={title}
           disabled={disabled}
@@ -46,7 +46,7 @@ const DxcButton = ({
             <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>
           )}
         </Button>
-      </DxcTooltip>
+      </Tooltip>
     </ThemeProvider>
   );
 };

packages/lib/src/contextual-menu/ContextualMenu.stories.tsx

@@ -6,6 +6,7 @@ import DxcContainer from "../container/Container";
 import useTheme from "../useTheme";
 import DxcContextualMenu, { ContextualMenuContext } from "./ContextualMenu";
 import SingleItem from "./SingleItem";
+import { userEvent, within } from "@storybook/test";
 
 export default {
   title: "Contextual Menu",
@@ -215,3 +216,19 @@ export const SingleItemStates = () => {
     </ThemeProvider>
   );
 };
+
+const ItemWithEllipsis = () => (
+  <ExampleContainer expanded>
+    <Title title="Tooltip in items with ellipsis" theme="light" level={3} />
+    <DxcContainer width="300px">
+      <DxcContextualMenu items={itemsWithTruncatedText} />
+    </DxcContainer>
+  </ExampleContainer>
+);
+
+export const ContextualMenuTooltip = ItemWithEllipsis.bind({});
+ContextualMenuTooltip.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.hover(canvas.getByText("Item with a very long label that should be truncated"));
+  await userEvent.hover(canvas.getByText("Item with a very long label that should be truncated"));
+};

packages/lib/src/contextual-menu/ItemAction.tsx

@@ -3,18 +3,7 @@ import styled from "styled-components";
 import CoreTokens from "../common/coreTokens";
 import { ItemActionProps } from "./types";
 import DxcIcon from "../icon/Icon";
-import DxcTooltip from "../tooltip/Tooltip";
-
-// TODO: The tooltip is not working fine, text-overflow is not ellipsis due to wrapper container.
-const TooltipWrapper = ({
-  condition,
-  children,
-  label,
-}: {
-  condition: boolean;
-  children: React.ReactNode;
-  label: string;
-}) => (condition ? <DxcTooltip label={label}>{children}</DxcTooltip> : <>{children}</>);
+import { TooltipWrapper } from "../tooltip/Tooltip";
 
 const ItemAction = ({ badge, collapseIcon, icon, label, depthLevel, ...props }: ItemActionProps) => {
   const [hasTooltip, setHasTooltip] = useState(false);
@@ -28,10 +17,10 @@ const ItemAction = ({ badge, collapseIcon, icon, label, depthLevel, ...props }:
           {icon && depthLevel === 0 && <Icon>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</Icon>}
           <Text
             selected={props.selected}
-            // onMouseEnter={(event: React.MouseEvent<HTMLSpanElement>) => {
-            //   const text = event.currentTarget;
-            //   if (text.title === "" && text.scrollWidth > text.clientWidth) setHasTooltip(true);
-            // }}
+            onMouseEnter={(event: React.MouseEvent<HTMLSpanElement>) => {
+              const text = event.currentTarget;
+              setHasTooltip(text.scrollWidth > text.clientWidth);
+            }}
           >
             {label}
           </Text>

packages/lib/src/date-input/DatePicker.tsx

@@ -7,7 +7,7 @@ import Calendar from "./Calendar";
 import YearPicker from "./YearPicker";
 import useTranslatedLabels from "../useTranslatedLabels";
 import DxcIcon from "../icon/Icon";
-import DxcTooltip from "../tooltip/Tooltip";
+import {Tooltip} from "../tooltip/Tooltip";
 
 const today = dayjs();
 
@@ -34,14 +34,14 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen
   return (
     <DatePickerContainer id={id}>
       <PickerHeader>
-        <DxcTooltip label={translatedLabels.calendar.previousMonthTitle}>
+        <Tooltip label={translatedLabels.calendar.previousMonthTitle}>
           <HeaderButton
             aria-label={translatedLabels.calendar.previousMonthTitle}
             onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))}
           >
             <DxcIcon icon="keyboard_arrow_left" />
           </HeaderButton>
-        </DxcTooltip>
+        </Tooltip>
         <HeaderYearTrigger
           aria-live="polite"
           onClick={() => setContent((content) => (content === "yearPicker" ? "calendar" : "yearPicker"))}
@@ -51,14 +51,14 @@ const DatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Elemen
           </HeaderYearTriggerLabel>
           <DxcIcon icon={content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down"} />
         </HeaderYearTrigger>
-        <DxcTooltip label={translatedLabels.calendar.nextMonthTitle}>
+        <Tooltip label={translatedLabels.calendar.nextMonthTitle}>
           <HeaderButton
             aria-label={translatedLabels.calendar.nextMonthTitle}
             onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))}
           >
             <DxcIcon icon="keyboard_arrow_right" />
           </HeaderButton>
-        </DxcTooltip>
+        </Tooltip>
       </PickerHeader>
       {content === "calendar" && (
         <Calendar