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 = () => Form label; -export const WithTooltip = (controls) => { +export const WithToggletip = (controls) => { const { align } = controls; return ( <> -
- Form label with Tooltip - - - -
Form label with Toggletip 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 ( - + ); }; @@ -65,9 +64,7 @@ export const Default = () => { export const Alignment = () => { return ( - + ); }; @@ -89,9 +86,7 @@ export const ExperimentalAutoAlign = () => { left: '2500px', }}> - +
@@ -101,9 +96,7 @@ export const ExperimentalAutoAlign = () => { export const Duration = () => { return ( - + ); }; @@ -127,8 +120,8 @@ const PlaygroundStory = (props) => { label={label} leaveDelayMs={leaveDelayMs} closeOnActivation={closeOnActivation}> - );