From d25b344daf46cab6711f15cf5d258f201b9abb6f Mon Sep 17 00:00:00 2001 From: sirineJ <112706079+sirineJ@users.noreply.github.com> Date: Tue, 29 Oct 2024 11:32:33 +0100 Subject: [PATCH] mark the Tooltip and Toggletip components as stable --- .changeset/cuddly-worms-love.md | 5 +++++ .changeset/wet-avocados-speak.md | 16 ++++++++++++++++ .storybook/components/Icons.tsx | 2 +- .storybook/components/Theme.tsx | 2 +- .../circuit-ui/components/Calendar/Calendar.mdx | 2 +- .../components/Toggletip/Toggletip.mdx | 2 +- .../circuit-ui/components/Tooltip/Tooltip.mdx | 2 +- .../components/legacy/Tooltip/Tooltip.mdx | 10 ++++------ .../components/legacy/Tooltip/Tooltip.tsx | 2 +- packages/circuit-ui/experimental.ts | 9 --------- packages/circuit-ui/index.ts | 9 +++++++++ .../component-lifecycle-imports/index.ts | 5 +++++ 12 files changed, 45 insertions(+), 21 deletions(-) create mode 100644 .changeset/cuddly-worms-love.md create mode 100644 .changeset/wet-avocados-speak.md diff --git a/.changeset/cuddly-worms-love.md b/.changeset/cuddly-worms-love.md new file mode 100644 index 0000000000..8b65a396c7 --- /dev/null +++ b/.changeset/cuddly-worms-love.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": minor +--- + +Updated the `component-lifecycle-imports` ESLint rule to flag imports of stable components Tooltip and Toggletip from `@sumup-oss/circuit-ui/experimental`. diff --git a/.changeset/wet-avocados-speak.md b/.changeset/wet-avocados-speak.md new file mode 100644 index 0000000000..e776168913 --- /dev/null +++ b/.changeset/wet-avocados-speak.md @@ -0,0 +1,16 @@ +--- +"@sumup-oss/circuit-ui": major +--- + +Marked the `Tooltip` and `Toggletip` components as stable. Update the related imports: + +```diff +- import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui/experimental'; ++ import { Tooltip, type TooltipProps, type TooltipReferenceProps } from '@sumup-oss/circuit-ui'; +``` + +```diff +- import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui/experimental'; ++ import { Toggletip, type ToggletipProps } from '@sumup-oss/circuit-ui'; +``` + diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index d25a475a10..60634b9a6c 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -32,8 +32,8 @@ import { SelectorGroup, clsx, utilClasses, + Tooltip, } from '../../packages/circuit-ui/index.js'; -import { Tooltip } from '../../packages/circuit-ui/experimental.js'; import { slugify } from '../slugify.js'; import classes from './Icons.module.css'; diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx index 0636df2b8a..967b60a526 100644 --- a/.storybook/components/Theme.tsx +++ b/.storybook/components/Theme.tsx @@ -26,8 +26,8 @@ import { useNotificationToast, type TableHeaderCell, type TableRow, + Tooltip, } from '../../packages/circuit-ui/index.js'; -import { Tooltip } from '../../packages/circuit-ui/experimental.js'; type CustomPropertyName = `--cui-${string}`; type CustomPropertyValue = string; diff --git a/packages/circuit-ui/components/Calendar/Calendar.mdx b/packages/circuit-ui/components/Calendar/Calendar.mdx index 15a9fc2134..5891326cba 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.mdx +++ b/packages/circuit-ui/components/Calendar/Calendar.mdx @@ -42,7 +42,7 @@ Use the `onMonthChange` prop to lazy-load modifiers for the currently visible mo ```tsx import { useState } from 'react'; -import { Calendar, type CalendarProps } from '@sumup-oss/circuit-ui/experimental'; +import { Calendar, type CalendarProps } from '@sumup-oss/circuit-ui'; import { Temporal } from 'temporal-polyfill'; function App() { diff --git a/packages/circuit-ui/components/Toggletip/Toggletip.mdx b/packages/circuit-ui/components/Toggletip/Toggletip.mdx index c57bea565c..0c715352a0 100644 --- a/packages/circuit-ui/components/Toggletip/Toggletip.mdx +++ b/packages/circuit-ui/components/Toggletip/Toggletip.mdx @@ -5,7 +5,7 @@ import * as Stories from './Toggletip.stories'; # Toggletip - + Toggletips display additional information that is contextual, helpful, and nonessential to the user upon pressing a UI trigger element and can contain interactive elements. diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.mdx b/packages/circuit-ui/components/Tooltip/Tooltip.mdx index faa2cc3ea5..4233b4b00f 100644 --- a/packages/circuit-ui/components/Tooltip/Tooltip.mdx +++ b/packages/circuit-ui/components/Tooltip/Tooltip.mdx @@ -5,7 +5,7 @@ import * as Stories from './Tooltip.stories'; # Tooltip - + Tooltips display additional information upon hover or focus that is contextual, helpful, and nonessential to clarify the purpose of otherwise ambiguous interactive elements. diff --git a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx index 2268454e29..062198ee3c 100644 --- a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx +++ b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx @@ -6,7 +6,7 @@ import * as Stories from './Tooltip.stories'; # Tooltip - Use the experimental [Tooltip](Components/Tooltip/Docs) or [Toggletip](Components/Toggletip/Docs) components instead. + Use the [Tooltip](Components/Tooltip/Docs) or [Toggletip](Components/Toggletip/Docs) components instead. @@ -30,7 +30,7 @@ The Tooltip component depends on the legacy JSON theme. Wrap the the component o ```tsx import { ThemeProvider } from '@emotion/react'; import { light } from '@sumup-oss/design-tokens'; -import { Tooltip } from '@sumup-oss/circuit-ui'; +import { Tooltip } from '@sumup-oss/circuit-ui/legacy'; export default function App() { return ( @@ -87,8 +87,7 @@ function Component() { ```tsx // After -import { Badge } from "@sumup-oss/circuit-ui"; -import { Tooltip } from "@sumup-oss/circuit-ui/experimental"; +import { Badge, Tooltip } from "@sumup-oss/circuit-ui"; function Component() { return ( @@ -141,8 +140,7 @@ function Component() { ```tsx // After -import { Toggletip } from "@sumup-oss/circuit-ui/experimental"; -import { IconButton } from "@sumup-oss/circuit-ui"; +import { IconButton, Toggletip } from "@sumup-oss/circuit-ui"; import { Info } from "@sumup-oss/icons"; function Component() { diff --git a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.tsx b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.tsx index 86c32139e2..ab92c1afce 100644 --- a/packages/circuit-ui/components/legacy/Tooltip/Tooltip.tsx +++ b/packages/circuit-ui/components/legacy/Tooltip/Tooltip.tsx @@ -119,7 +119,7 @@ export interface TooltipProps { /** * @deprecated * - * Use the experimental [`Tooltip`](https://circuit.sumup.com/?path=/docs/components-tooltip--docs) + * Use the [`Tooltip`](https://circuit.sumup.com/?path=/docs/components-tooltip--docs) * or [`Toggletip`](https://circuit.sumup.com/?path=/docs/components-toggletip--docs) components instead * ([migration guide](https://circuit.sumup.com/?path=/docs/components-tooltip-legacy--docs#migration)). */ diff --git a/packages/circuit-ui/experimental.ts b/packages/circuit-ui/experimental.ts index e32e3b5857..d88415a6bb 100644 --- a/packages/circuit-ui/experimental.ts +++ b/packages/circuit-ui/experimental.ts @@ -13,12 +13,3 @@ * limitations under the License. */ -export { - Tooltip, - type TooltipProps, - type TooltipReferenceProps, -} from './components/Tooltip/index.js'; -export { - Toggletip, - type ToggletipProps, -} from './components/Toggletip/index.js'; diff --git a/packages/circuit-ui/index.ts b/packages/circuit-ui/index.ts index d907f47453..0d20bf4564 100644 --- a/packages/circuit-ui/index.ts +++ b/packages/circuit-ui/index.ts @@ -201,6 +201,15 @@ export { useComponents, } from './components/ComponentsContext/index.js'; export type { ComponentsContextType } from './components/ComponentsContext/index.js'; +export { + Tooltip, + type TooltipProps, + type TooltipReferenceProps, +} from './components/Tooltip/index.js'; +export { + Toggletip, + type ToggletipProps, +} from './components/Toggletip/index.js'; // Hooks export { useClickOutside } from './hooks/useClickOutside/index.js'; diff --git a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts index f31c6771eb..1a6c2a58af 100644 --- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts +++ b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts @@ -82,6 +82,11 @@ const mappings = [ 'ColorInputProps', 'PhoneNumberInputProps', 'PhoneNumberInput', + 'Tooltip', + 'TooltipProps', + 'TooltipReferenceProps', + 'Toggletip', + 'ToggletipProps', ], }, ];