Skip to content

Fix tooltip when components are disabled #2316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 5 commits into from
Oct 21, 2025
Merged

Fix tooltip when components are disabled #2316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5e645fd
Fix tooltip when components are disabled so it doesn't appear
PelayoFelgueroso Oct 16, 2025
3f8dad7
Merge branch 'master' into PelayoFelgueroso/tooltip
PelayoFelgueroso Oct 16, 2025
41b3645
Fix condition
PelayoFelgueroso Oct 16, 2025
d8ede1f
Modify Tooltip only in Select and Chip
PelayoFelgueroso Oct 16, 2025
f8fd940
Remove unnecesary changes
PelayoFelgueroso Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/lib/src/action-icon/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type Props = {
/**
* Value for the HTML properties title and aria-label.
*/
title: string;
title?: string;
/**
* Material Symbol name or SVG element as the icon that will be placed next to the label.
*/
Expand Down
4 changes: 2 additions & 2 deletions packages/lib/src/chip/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const DxcChip = ({
icon={prefixIcon}
onClick={onClickPrefix}
tabIndex={tabIndex}
title="Prefix Action"
title={!disabled ? "Prefix Action" : undefined}
/>
) : (
<IconContainer disabled={disabled}>
Expand All @@ -86,7 +86,7 @@ const DxcChip = ({
icon={suffixIcon}
onClick={onClickSuffix}
tabIndex={tabIndex}
title="Suffix Action"
title={!disabled ? "Suffix Action" : undefined}
/>
) : (
<IconContainer disabled={disabled}>
Expand Down
10 changes: 5 additions & 5 deletions packages/lib/src/select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
import styled from "@emotion/styled";
import { spaces } from "../common/variables";
import DxcIcon from "../icon/Icon";
import { Tooltip, TooltipWrapper } from "../tooltip/Tooltip";
import { TooltipWrapper } from "../tooltip/Tooltip";
import { HalstackLanguageContext } from "../HalstackContext";
import useWidth from "../utils/useWidth";
import Listbox from "./Listbox";
Expand Down Expand Up @@ -524,7 +524,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
{multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && (
<SelectionIndicator disabled={disabled}>
<SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber>
<Tooltip label={translatedLabels.select.actionClearSelectionTitle}>
<TooltipWrapper condition={!disabled} label={translatedLabels.select.actionClearSelectionTitle}>
<ClearOptionsAction
aria-label={translatedLabels.select.actionClearSelectionTitle}
disabled={disabled}
Expand All @@ -537,7 +537,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
>
<DxcIcon icon="clear" />
</ClearOptionsAction>
</Tooltip>
</TooltipWrapper>
</SelectionIndicator>
)}
<TooltipWrapper condition={hasTooltip} label={getSelectedOptionLabel(placeholder, selectedOption)}>
Expand Down Expand Up @@ -580,14 +580,14 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
</TooltipWrapper>
<DxcFlex alignItems="center">
{searchable && searchValue.length > 0 && (
<Tooltip label={translatedLabels.select.actionClearSelectionTitle}>
<TooltipWrapper condition={!disabled} label={translatedLabels.select.actionClearSelectionTitle}>
<DxcActionIcon
icon="clear"
onClick={handleClearSearchActionOnClick}
tabIndex={-1}
title={translatedLabels.select.actionClearSearchTitle}
/>
</Tooltip>
</TooltipWrapper>
)}
<DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} />
</DxcFlex>
Expand Down