mark the Tooltip and Toggletip components as stable

sumup-oss · Oct 29, 2024 · d25b344 · d25b344
1 parent a4b5d2c
commit d25b344
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 21 deletions.
diff --git a/.changeset/cuddly-worms-love.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -5,7 +5,7 @@ import * as Stories from './Toggletip.stories';
 
 # Toggletip
 
-<Status variant="experimental" />
+<Status variant="stable" />
 
 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
@@ -5,7 +5,7 @@ import * as Stories from './Tooltip.stories';
 
 # Tooltip
 
-<Status variant="experimental" />
+<Status variant="stable" />
 
 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
@@ -6,7 +6,7 @@ import * as Stories from './Tooltip.stories';
 # Tooltip
 
 <Status variant="deprecated">
-  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.
 </Status>
 
 <Story of={Stories.Base} />
@@ -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
@@ -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
@@ -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
@@ -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
@@ -82,6 +82,11 @@ const mappings = [
       'ColorInputProps',
       'PhoneNumberInputProps',
       'PhoneNumberInput',
+      'Tooltip',
+      'TooltipProps',
+      'TooltipReferenceProps',
+      'Toggletip',
+      'ToggletipProps',
     ],
   },
 ];