docs(tooltip): use Button instead of Information icons in stories (#1…

…7006) * 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 <[email protected]> Co-authored-by: kennylam <[email protected]>
carbon-design-system · Nov 18, 2024 · 3aa7596 · 3aa7596
1 parent cebcb7d
commit 3aa7596
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,19 +56,15 @@ 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>
   );
 };
 
 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>
   );