From 27b30080a653146eaacf82637a1c22453b69b858 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 19 Jul 2024 13:26:33 -0500 Subject: [PATCH 1/9] docs(tooltip): use SquareOutline instead of Information icons in stories --- .../react/src/components/Toggletip/Toggletip.mdx | 6 +++--- .../src/components/Toggletip/Toggletip.stories.js | 10 +++++----- .../react/src/components/Tooltip/Tooltip.stories.js | 12 ++++++------ 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/Toggletip/Toggletip.mdx b/packages/react/src/components/Toggletip/Toggletip.mdx index 392370709182..3f9197b9b422 100644 --- a/packages/react/src/components/Toggletip/Toggletip.mdx +++ b/packages/react/src/components/Toggletip/Toggletip.mdx @@ -27,11 +27,11 @@ you'll need to include a `Toggletip`, `ToggletipButton` for the trigger, and ```jsx import { Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react'; -import { Information } from '@carbon/react/icons'; +import { SquareOutline } from '@carbon/react/icons'; - +

Custom content here

@@ -71,7 +71,7 @@ example: ```jsx - +

diff --git a/packages/react/src/components/Toggletip/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js index 8f6407ac7131..e6c50947a863 100644 --- a/packages/react/src/components/Toggletip/Toggletip.stories.js +++ b/packages/react/src/components/Toggletip/Toggletip.stories.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import { Information } from '@carbon/icons-react'; +import { SquareOutline } from '@carbon/icons-react'; import React, { useRef, useEffect } from 'react'; import { default as Button } from '../Button'; import { default as Link } from '../Link'; @@ -56,7 +56,7 @@ export const Default = () => { Toggletip label - +

@@ -83,7 +83,7 @@ export const Default = () => { - +

@@ -120,7 +120,7 @@ export const ExperimentalAutoAlign = () => { Toggletip label - +

@@ -149,7 +149,7 @@ const PlaygroundStory = (controls) => { - +

diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js index 85a17c525d35..9e159d41adaf 100644 --- a/packages/react/src/components/Tooltip/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/Tooltip.stories.js @@ -7,7 +7,7 @@ import './story.scss'; -import { Information } from '@carbon/icons-react'; +import { SquareOutline } from '@carbon/icons-react'; import React, { useRef, useEffect } from 'react'; import { Tooltip } from './'; import mdx from './Tooltip.mdx'; @@ -56,7 +56,7 @@ export const Default = () => { return ( ); @@ -66,7 +66,7 @@ export const Alignment = () => { return ( ); @@ -90,7 +90,7 @@ export const ExperimentalAutoAlign = () => { }}> @@ -102,7 +102,7 @@ export const Duration = () => { return ( ); @@ -128,7 +128,7 @@ const PlaygroundStory = (props) => { leaveDelayMs={leaveDelayMs} closeOnActivation={closeOnActivation}> ); From 2b6137fb8c2cd3c3271bd70c71c8d3809f8272a2 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 19 Jul 2024 13:37:58 -0500 Subject: [PATCH 2/9] docs(tooltip): use Button instead of Information icon in stories --- .../components/Toggletip/Toggletip.stories.js | 10 +++++----- .../src/components/Tooltip/Tooltip.stories.js | 19 ++++++------------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/react/src/components/Toggletip/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js index e6c50947a863..8f6407ac7131 100644 --- a/packages/react/src/components/Toggletip/Toggletip.stories.js +++ b/packages/react/src/components/Toggletip/Toggletip.stories.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import { SquareOutline } from '@carbon/icons-react'; +import { Information } from '@carbon/icons-react'; import React, { useRef, useEffect } from 'react'; import { default as Button } from '../Button'; import { default as Link } from '../Link'; @@ -56,7 +56,7 @@ export const Default = () => { Toggletip label - +

@@ -83,7 +83,7 @@ export const Default = () => { - +

@@ -120,7 +120,7 @@ export const ExperimentalAutoAlign = () => { Toggletip label - +

@@ -149,7 +149,7 @@ const PlaygroundStory = (controls) => { - +

diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js index 9e159d41adaf..16c854320bd0 100644 --- a/packages/react/src/components/Tooltip/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/Tooltip.stories.js @@ -7,7 +7,6 @@ import './story.scss'; -import { SquareOutline } from '@carbon/icons-react'; import React, { useRef, useEffect } from 'react'; import { Tooltip } from './'; import mdx from './Tooltip.mdx'; @@ -55,9 +54,7 @@ export const Default = () => { 'Occasionally, services are updated in a specified time window to ensure no down time for customers.'; return ( - + ); }; @@ -65,9 +62,7 @@ export const Default = () => { export const Alignment = () => { return ( - + ); }; @@ -89,9 +84,9 @@ export const ExperimentalAutoAlign = () => { left: '2500px', }}> - + @@ -101,9 +96,7 @@ export const ExperimentalAutoAlign = () => { export const Duration = () => { return ( - + ); }; From f80393a177e6a762733dc3d2f8247e159c29785b Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 19 Jul 2024 13:39:17 -0500 Subject: [PATCH 3/9] docs(tooltip): use Button instead of Information icon in mdx docs --- packages/react/src/components/Toggletip/Toggletip.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Toggletip/Toggletip.mdx b/packages/react/src/components/Toggletip/Toggletip.mdx index 3f9197b9b422..392370709182 100644 --- a/packages/react/src/components/Toggletip/Toggletip.mdx +++ b/packages/react/src/components/Toggletip/Toggletip.mdx @@ -27,11 +27,11 @@ you'll need to include a `Toggletip`, `ToggletipButton` for the trigger, and ```jsx import { Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react'; -import { SquareOutline } from '@carbon/react/icons'; +import { Information } from '@carbon/react/icons'; - +

Custom content here

@@ -71,7 +71,7 @@ example: ```jsx - +

From e40071662e17f09af7dd94034d6b93f0372a6b59 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 19 Jul 2024 13:44:08 -0500 Subject: [PATCH 4/9] docs(formlabel): remove tooltip example from formlabel stories --- .../src/components/FormLabel/FormLabel.stories.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) 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 From aaf26967cef170bbed2fc896ecfb2b21c4addc91 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Fri, 19 Jul 2024 13:46:45 -0500 Subject: [PATCH 5/9] chore(tooltip): add missing import --- packages/react/src/components/Tooltip/Tooltip.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js index 16c854320bd0..4e494b0a6c7f 100644 --- a/packages/react/src/components/Tooltip/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/Tooltip.stories.js @@ -9,6 +9,7 @@ import './story.scss'; import React, { useRef, useEffect } from 'react'; import { Tooltip } from './'; +import Button from './../Button'; import mdx from './Tooltip.mdx'; export default { From b308d0d371315b16a31df6570131801aa35f728f Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Mon, 12 Aug 2024 12:59:09 -0500 Subject: [PATCH 6/9] fix(tooltip): add squareoutline import --- packages/react/src/components/Tooltip/Tooltip.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js index 4e494b0a6c7f..03b7c486106d 100644 --- a/packages/react/src/components/Tooltip/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/Tooltip.stories.js @@ -8,6 +8,7 @@ import './story.scss'; import React, { useRef, useEffect } from 'react'; +import { SquareOutline } from '@carbon/icons-react'; import { Tooltip } from './'; import Button from './../Button'; import mdx from './Tooltip.mdx'; From c7d6906e538eee460acdcd87e2df49624dd5a3c5 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Thu, 15 Aug 2024 11:47:30 -0500 Subject: [PATCH 7/9] test(formlabel): remove tooltip tests --- .../FormLabel/FormLabel-test.avt.e2e.js | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 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( From 38e7e92f7961c676467966a2f0db07b6b5cbf97e Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 15 Oct 2024 14:22:45 -0500 Subject: [PATCH 8/9] docs(tooltip): remove classname for custom story classes --- .../react/src/components/Tooltip/Tooltip.stories.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js index 03b7c486106d..e0bd0570e69e 100644 --- a/packages/react/src/components/Tooltip/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/Tooltip.stories.js @@ -56,7 +56,7 @@ export const Default = () => { 'Occasionally, services are updated in a specified time window to ensure no down time for customers.'; return ( - + ); }; @@ -64,7 +64,7 @@ export const Default = () => { export const Alignment = () => { return ( - + ); }; @@ -86,9 +86,7 @@ export const ExperimentalAutoAlign = () => { left: '2500px', }}> - +
@@ -98,7 +96,7 @@ export const ExperimentalAutoAlign = () => { export const Duration = () => { return ( - + ); }; @@ -122,7 +120,7 @@ const PlaygroundStory = (props) => { label={label} leaveDelayMs={leaveDelayMs} closeOnActivation={closeOnActivation}> - From 86c0de1caadbb859386d8021793e803188f77439 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Mon, 18 Nov 2024 14:30:41 -0600 Subject: [PATCH 9/9] test(formlabel): update vrt story id --- e2e/components/FormLabel/FormLabel-test.e2e.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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, }); });