✨ Added tooltip props to ToggleGroupOption (#1182)

* ✨ Added tooltip props to ToggleGroupOption

* 🏷️ Make types stricter

* 🏷️ Enhance tooltip handling in ToggleGroupOption

* ✅ Add test for tooltip

* Update src/organisms/ToggleGroup/ToggleGroupOption.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/organisms/ToggleGroup/ToggleGroup.types.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* ♻️ Copilot feedback

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: mariush2

src/organisms/ToggleGroup/ToggleGroup.stories.tsx

@@ -10,6 +10,7 @@ import { colors } from 'src/atoms/style';
 interface StoryComponentProps extends ToggleGroupProps {
   withIcons?: boolean;
   onlyIcons?: boolean;
+  withTooltips?: boolean;
   disabled?: boolean;
 }
 
@@ -19,6 +20,7 @@ const ToggleGroup: FC<StoryComponentProps> = ({
   matchParentWidth,
   withIcons = false,
   onlyIcons = false,
+  withTooltips = false,
   disabled = false,
 }) => {
   const [recentlyPublished, setRecentlyPublished] = useState(false);
@@ -50,6 +52,7 @@ const ToggleGroup: FC<StoryComponentProps> = ({
           {...(onlyIcons
             ? {
                 icon: new_label,
+                tooltip: withTooltips ? 'Recently published' : undefined,
               }
             : {
                 label: 'Recently published',
@@ -62,6 +65,7 @@ const ToggleGroup: FC<StoryComponentProps> = ({
           {...(onlyIcons
             ? {
                 icon: person,
+                tooltip: withTooltips ? 'My files' : undefined,
               }
             : {
                 label: 'My files',
@@ -74,6 +78,7 @@ const ToggleGroup: FC<StoryComponentProps> = ({
           {...(onlyIcons
             ? {
                 icon: star_outlined,
+                tooltip: withTooltips ? 'Favourites' : undefined,
               }
             : {
                 label: 'Favourites',

src/organisms/ToggleGroup/ToggleGroup.test.tsx

@@ -81,6 +81,34 @@ test('Works with icons only', async () => {
   }
 });
 
+test('Works with icons and tooltip', 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 user = userEvent.setup();
+
+  const icon = screen.getAllByTestId('eds-icon-path')[0];
+
+  await user.hover(icon);
+
+  expect(await screen.findByRole('tooltip')).toHaveTextContent('Car icon');
+});
+
 test('Match parent height works as expected', async () => {
   const options = new Array(faker.number.int({ min: 2, max: 3 }))
     .fill(null)

src/organisms/ToggleGroup/ToggleGroup.types.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 
+import { TooltipProps } from '@equinor/eds-core-react';
 import { IconData } from '@equinor/eds-icons';
 
 import { ToggleGroupOption } from './ToggleGroupOption';
@@ -11,13 +12,24 @@ interface ToggleGroupOptionWithLabel {
 
 interface ToggleGroupOptionOnlyIcon {
   icon: IconData;
+  tooltip?: undefined;
+}
+
+interface ToggleGroupOptionOnlyIconWithTooltip {
+  icon: IconData;
+  tooltip: string;
+  tooltipPlacement?: TooltipProps['placement'];
 }
 
 export type ToggleGroupOption = {
   onToggle: (newValue: boolean) => void;
   checked: boolean;
   disabled?: boolean;
-} & (ToggleGroupOptionWithLabel | ToggleGroupOptionOnlyIcon);
+} & (
+  | ToggleGroupOptionWithLabel
+  | ToggleGroupOptionOnlyIcon
+  | ToggleGroupOptionOnlyIconWithTooltip
+);
 
 /**
  * @param variant - Defaults to 'filled'

src/organisms/ToggleGroup/ToggleGroupOption.tsx

@@ -4,6 +4,7 @@ import { Icon, Typography } from '@equinor/eds-core-react';
 
 import { ToggleGroupOption as ToggleGroupOptionType } from './ToggleGroup.types';
 import { colors, shape, spacings } from 'src/atoms/style';
+import { OptionalTooltip } from 'src/molecules';
 
 import styled from 'styled-components';
 
@@ -73,6 +74,16 @@ export const ToggleGroupOption = forwardRef<
   HTMLButtonElement,
   ToggleGroupOptionProps
 >(({ checked, onToggle, icon, disabled, ...rest }, ref) => {
+  const buttonProps =
+    'tooltip' in rest
+      ? {
+          ...rest,
+          tooltip: undefined,
+          toolTipPlacement: undefined,
+        }
+      : {
+          ...rest,
+        };
   const handleOnClick = () => {
     onToggle(!checked);
   };
@@ -83,9 +94,20 @@ export const ToggleGroupOption = forwardRef<
       aria-checked={checked}
       onClick={handleOnClick}
       disabled={disabled}
-      {...rest}
+      {...buttonProps}
     >
-      {icon ? <Icon data={icon} size={24} /> : null}
+      {icon ? (
+        'tooltip' in rest && rest.tooltip ? (
+          <OptionalTooltip
+            title={rest.tooltip}
+            placement={rest.tooltipPlacement}
+          >
+            <Icon data={icon} size={24} />
+          </OptionalTooltip>
+        ) : (
+          <Icon data={icon} size={24} />
+        )
+      ) : null}
       {'label' in rest ? (
         <Typography as="span" variant="button" group="navigation">
           {rest.label}