From 3aa75965892d7083efba6676d5422318cb786825 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:54:56 -0600
Subject: [PATCH] docs(tooltip): use Button instead of Information icons in
 stories (#17006)

* docs(tooltip): use SquareOutline instead of Information icons in stories

* docs(tooltip): use Button instead of Information icon in stories

* docs(tooltip): use Button instead of Information icon in mdx docs

* docs(formlabel): remove tooltip example from formlabel stories

* chore(tooltip): add missing import

* fix(tooltip): add squareoutline import

* test(formlabel): remove tooltip tests

* docs(tooltip): remove classname for custom story classes

* test(formlabel): update vrt story id

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
---
 .../FormLabel/FormLabel-test.avt.e2e.js       | 20 +++++-----------
 .../FormLabel/FormLabel-test.e2e.js           |  2 +-
 .../components/FormLabel/FormLabel.stories.js | 12 +---------
 .../src/components/Tooltip/Tooltip.stories.js | 23 +++++++------------
 4 files changed, 16 insertions(+), 41 deletions(-)

diff --git a/e2e/components/FormLabel/FormLabel-test.avt.e2e.js b/e2e/components/FormLabel/FormLabel-test.avt.e2e.js
index 458009fc1378..5db62fc1b376 100644
--- a/e2e/components/FormLabel/FormLabel-test.avt.e2e.js
+++ b/e2e/components/FormLabel/FormLabel-test.avt.e2e.js
@@ -22,35 +22,27 @@ test.describe('@avt FormLabel', () => {
     await expect(page).toHaveNoACViolations('FormLabel');
   });
 
-  test('@avt-advanced-states FormLabel with tooltip', async ({ page }) => {
+  test('@avt-advanced-states FormLabel with toggletip', async ({ page }) => {
     await visitStory(page, {
       component: 'FormLabel',
-      id: 'components-formlabel--with-tooltip',
+      id: 'components-formlabel--with-toggletip',
       globals: {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('FormLabel-with-tooltip');
+    await expect(page).toHaveNoACViolations('FormLabel-with-toggletip');
   });
 
-  test('@avt-keyboard-nav FormLabel with tooltip', async ({ page }) => {
+  test('@avt-keyboard-nav FormLabel with toggletip', async ({ page }) => {
     await visitStory(page, {
       component: 'FormLabel',
-      id: 'components-formlabel--with-tooltip',
+      id: 'components-formlabel--with-toggletip',
       globals: {
         theme: 'white',
       },
     });
 
-    await expect(page.getByText('Form label with Tooltip')).toBeVisible();
-    await page.keyboard.press('Tab');
-    await expect(
-      page
-        .getByText(
-          'This can be used to provide more information about a field.'
-        )
-        .first()
-    ).toBeVisible();
+    await expect(page.getByText('Form label with toggletip')).toBeVisible();
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
     await expect(
diff --git a/e2e/components/FormLabel/FormLabel-test.e2e.js b/e2e/components/FormLabel/FormLabel-test.e2e.js
index 3063608fa485..1f7c30264cf8 100644
--- a/e2e/components/FormLabel/FormLabel-test.e2e.js
+++ b/e2e/components/FormLabel/FormLabel-test.e2e.js
@@ -25,7 +25,7 @@ test.describe('FormLabel', () => {
       test('with tooltip @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'FormLabel',
-          id: 'components-formlabel--with-tooltip',
+          id: 'components-formlabel--with-toggletip',
           theme,
         });
       });
diff --git a/packages/react/src/components/FormLabel/FormLabel.stories.js b/packages/react/src/components/FormLabel/FormLabel.stories.js
index d99839b6418c..f7bd1d6705f3 100644
--- a/packages/react/src/components/FormLabel/FormLabel.stories.js
+++ b/packages/react/src/components/FormLabel/FormLabel.stories.js
@@ -21,20 +21,10 @@ export default {
 
 export const Default = () => <FormLabel>Form label</FormLabel>;
 
-export const WithTooltip = (controls) => {
+export const WithToggletip = (controls) => {
   const { align } = controls;
   return (
     <>
-      <div className="form-wrapper">
-        <FormLabel>Form label with Tooltip</FormLabel>
-        <Tooltip
-          align="bottom"
-          label="This can be used to provide more information about a field.">
-          <button className="cds--tooltip__trigger" type="button">
-            <Information />
-          </button>
-        </Tooltip>
-      </div>
       <div className="form-wrapper">
         <FormLabel>Form label with Toggletip</FormLabel>
         <Toggletip align={align}>
diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js
index 85a17c525d35..e0bd0570e69e 100644
--- a/packages/react/src/components/Tooltip/Tooltip.stories.js
+++ b/packages/react/src/components/Tooltip/Tooltip.stories.js
@@ -7,9 +7,10 @@
 
 import './story.scss';
 
-import { Information } from '@carbon/icons-react';
 import React, { useRef, useEffect } from 'react';
+import { SquareOutline } from '@carbon/icons-react';
 import { Tooltip } from './';
+import Button from './../Button';
 import mdx from './Tooltip.mdx';
 
 export default {
@@ -55,9 +56,7 @@ export const Default = () => {
     'Occasionally, services are updated in a specified time window to ensure no down time for customers.';
   return (
     <Tooltip align="bottom" label={label}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
-      </button>
+      <Button>This button has a tooltip</Button>
     </Tooltip>
   );
 };
@@ -65,9 +64,7 @@ export const Default = () => {
 export const Alignment = () => {
   return (
     <Tooltip label="Tooltip alignment" align="bottom-left">
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
-      </button>
+      <Button>This button has a tooltip</Button>
     </Tooltip>
   );
 };
@@ -89,9 +86,7 @@ export const ExperimentalAutoAlign = () => {
           left: '2500px',
         }}>
         <Tooltip label={tooltipLabel} align="top" autoAlign>
-          <button className="sb-tooltip-trigger" type="button" ref={ref}>
-            <Information />
-          </button>
+          <Button ref={ref}>This button has a tooltip</Button>
         </Tooltip>
       </div>
     </div>
@@ -101,9 +96,7 @@ export const ExperimentalAutoAlign = () => {
 export const Duration = () => {
   return (
     <Tooltip label="Label one" enterDelayMs={0} leaveDelayMs={300}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
-      </button>
+      <Button>This button has a tooltip</Button>
     </Tooltip>
   );
 };
@@ -127,8 +120,8 @@ const PlaygroundStory = (props) => {
       label={label}
       leaveDelayMs={leaveDelayMs}
       closeOnActivation={closeOnActivation}>
-      <button className="sb-tooltip-trigger" type="button">
-        <Information />
+      <button type="button">
+        <SquareOutline />
       </button>
     </Tooltip>
   );