✨ Added tooltip props to ToggleGroupOption

[mariush2]

Azure DevOps links

User story

• AB#692329

---

• Needs to be tested locally by reviewer

Description

• Added tooltip props to ToggleGroupOption

[Copilot]

Pull request overview

This PR adds tooltip support to ToggleGroupOption components, allowing tooltips to be displayed when hovering over icon-only toggle options.

Key changes:

• Extended type definitions to support tooltip properties on icon-only toggle options
• Updated the component implementation to conditionally render tooltips around icons
• Added tooltip props to test and story examples

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/organisms/ToggleGroup/ToggleGroup.types.ts	Added new ToggleGroupOptionOnlyIconWithTooltip interface with tooltip properties and included it in the union type
src/organisms/ToggleGroup/ToggleGroupOption.tsx	Imported OptionalTooltip and added conditional logic to wrap icons with tooltips when tooltip props are present
src/organisms/ToggleGroup/ToggleGroup.test.tsx	Added tooltip props to existing "Works with icons only" test
src/organisms/ToggleGroup/ToggleGroup.stories.tsx	Added withTooltips prop to story component and integrated tooltip rendering in icon-only mode

Comments suppressed due to low confidence (1)

src/organisms/ToggleGroup/ToggleGroup.test.tsx:84

• The test "Works with icons only" doesn't actually test the tooltip functionality despite adding tooltip props. It only verifies that the icons are rendered correctly.

To properly test the tooltip feature, the test should:

1. Hover over an icon
2. Wait for the tooltip to appear
3. Verify the tooltip content is displayed

Example:

test('Works with icons and tooltips', async () => {
  // ... existing setup ...
  const user = userEvent.setup();
  const buttons = screen.getAllByRole('button');
  
  await user.hover(buttons[0]);
  await new Promise((resolve) => setTimeout(resolve, 1000));
  
  expect(screen.getByText('Car icon')).toBeInTheDocument();
});

test('Works with icons only', async () => {
  const options = new Array(faker.number.int({ min: 2, max: 3 }))
    .fill(null)
    .map(() => faker.vehicle.vehicle());
  const handlers = options.map(() => vi.fn());
  render(
    <ToggleGroup>
      {options.map((option, index) => (
        <ToggleGroup.Option
          key={option}
          onToggle={handlers[index]}
          icon={car}
          tooltip="Car icon"
          tooltipPlacement="top"
          checked={false}
        />
      ))}
    </ToggleGroup>
  );

  const icons = screen.getAllByTestId('eds-icon-path');

  for (const icon of icons) {
    expect(icon).toHaveAttribute('d', car.svgPathData);
  }
});

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔴	Lines	99.62% (🎯 100%)	16258 / 16319
🔴	Statements	99.62% (🎯 100%)	16258 / 16319
🔴	Functions	99.65% (🎯 100%)	1166 / 1170
🔴	Branches	99.67% (🎯 100%)	4003 / 4016

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/organisms/ToggleGroup/ToggleGroupOption.tsx	100%	100%	100%	100%

Generated in workflow #1957 for commit 5e204ae by the Vitest Coverage Report Action

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[aslakihle]

😎