Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(DSYS-842): mark the tooltip & toggletip components as stable #2743

Merged
merged 1 commit into from
Oct 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/cuddly-worms-love.md
Original file line number Diff line number Diff line change
@@ -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`.
16 changes: 16 additions & 0 deletions .changeset/wet-avocados-speak.md
Original file line number Diff line number Diff line change
@@ -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';
```

2 changes: 1 addition & 1 deletion .storybook/components/Icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion .storybook/components/Theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Calendar/Calendar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌🏻

import { Temporal } from 'temporal-polyfill';

function App() {
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Toggletip/Toggletip.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Tooltip/Tooltip.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
10 changes: 4 additions & 6 deletions packages/circuit-ui/components/legacy/Tooltip/Tooltip.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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 (
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)).
*/
Expand Down
9 changes: 0 additions & 9 deletions packages/circuit-ui/experimental.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
9 changes: 9 additions & 0 deletions packages/circuit-ui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ const mappings = [
'ColorInputProps',
'PhoneNumberInputProps',
'PhoneNumberInput',
'Tooltip',
'TooltipProps',
'TooltipReferenceProps',
'Toggletip',
'ToggletipProps',
],
},
];
Expand Down
Loading