Skip to content

(fix) Make the whole label as tooltip trigger #475

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+45 −42
Open

(fix) Make the whole label as tooltip trigger #475

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
39795a6
Change the alignment of the tooltip to right
vasharma05 Mar 13, 2025
b9c666a
Make the whole label as tooltip trigger
vasharma05 Apr 4, 2025
8d9c3f9
Refactor
vasharma05 Apr 4, 2025
eac6726
Fix failing tests
vasharma05 Apr 10, 2025
79a5fb5
Review changes
vasharma05 Apr 16, 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
42 changes: 32 additions & 10 deletions src/components/field-label/field-label.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import { Tooltip as CarbonTooltip } from '@carbon/react';
import { useTranslation } from 'react-i18next';
import { type FormField } from '../../types';
import Tooltip from '../inputs/tooltip/tooltip.component';

import styles from './field-label.scss';
import { Information } from '@carbon/react/icons';

interface FieldLabelProps {
field: FormField;
Expand All @@ -13,19 +14,40 @@ interface FieldLabelProps {
customLabel?: string;
}

const TooltipWrapper: React.FC<{ hasTooltip: boolean; field: FormField; children: React.ReactNode }> = ({
field,
children,
hasTooltip,
}) => {
const { t } = useTranslation();
return hasTooltip ? (
<CarbonTooltip align="top-left" label={t(field.questionInfo)}>
{children}
</CarbonTooltip>
) : (
<>{children}</>
);
};

const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
const { t } = useTranslation();
const hasTooltip = Boolean(field.questionInfo);
const labelText = customLabel || t(field.label);

return (
<div className={styles.questionLabel}>
<span>{labelText}</span>
{field.isRequired && (
<span title={t('required', 'Required')} className={styles.required}>
*
</span>
)}
{field.questionInfo && <Tooltip field={field} />}
</div>
<TooltipWrapper field={field} hasTooltip={hasTooltip}>
<div className={styles.questionLabel} data-testid={`${field.id}-label`}>
<span>{labelText}</span>
{field.isRequired && (
<span title={t('required', 'Required')} className={styles.required}>
*
</span>
)}
{hasTooltip && (
<Information size={20} aria-hidden="true" className={styles.tooltipIcon} data-testid="information-icon" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vasharma05 do you think we should include the field's ID in the data-testid to guarantee its uniqueness?

)}
</div>
</TooltipWrapper>
);
};

Expand Down
9 changes: 9 additions & 0 deletions src/components/field-label/field-label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,12 @@
display: flex;
align-items: center;
}

.tooltip {
display: flex;
align-items: center;
}

.tooltipIcon {
margin-left: 0.25rem;
}
23 changes: 0 additions & 23 deletions src/components/inputs/tooltip/tooltip.component.tsx
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions src/components/inputs/tooltip/tooltip.scss
View file
Open in desktop

This file was deleted.

5 changes: 4 additions & 1 deletion src/form-engine.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,9 +255,12 @@ describe('Form engine component', () => {

screen.findByRole('textbox', { name: /text question/i });

const textFieldTooltip = screen.getByTestId('id_text');
const textFieldTooltip = screen.getByTestId('id_text-label');
expect(textFieldTooltip).toBeInTheDocument();

const informationIcon = screen.getByTestId('information-icon');
expect(informationIcon).toBeInTheDocument();

await user.hover(textFieldTooltip);
await screen.findByText(/sample tooltip info for text/i);
});
Expand Down
Loading