-
Notifications
You must be signed in to change notification settings - Fork 104
Open
Description
Referring to the new major release https://park-ui.com/changelog
It looks like the new version no longer exports the building blocks of components.
Example, this is how I used to use Tooltip:
import { Tooltip } from '#app/components/ui/tooltip.tsx';
import { cva } from '#app/styled-system/css/index.js';
import { captureException } from '#app/utilities/sentry/captureException.ts';
import { Portal } from '@ark-ui/react';
import { CheckIcon, ClipboardIcon } from 'lucide-react';
import { useState } from 'react';
const copyButton = cva({
base: {
_focus: {
outline: '1px solid #00d992',
},
_hover: {
background: '#161f21',
color: '#fff',
},
alignItems: 'center',
background: '#161f21a6',
borderRadius: '4px',
cursor: 'pointer',
display: 'flex',
height: '32px',
justifyContent: 'center',
padding: '8px',
width: '32px',
},
variants: {
disabled: {
true: {
cursor: 'default',
opacity: 0.5,
},
},
},
});
export const CopyButton = ({ content }: { readonly content: string }) => {
const [copied, setCopied] = useState(false);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(content);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 1_000);
} catch (error) {
captureException({
error,
extra: {
text,
},
message: 'could not copy text to clipboard',
});
}
};
return (
<Tooltip.Root
lazyMount
openDelay={100}
>
<Tooltip.Trigger asChild>
<button
className={copyButton({
disabled: copied,
})}
disabled={copied}
onClick={() => {
if (!copied) {
copyToClipboard(content).catch((error) => {
captureException({
error,
extra: {
text: content,
},
message: 'could not copy text to clipboard',
});
});
}
}}
title="Copy"
type="button"
>
{copied ? <CheckIcon size={14} /> : <ClipboardIcon size={14} />}
</button>
</Tooltip.Trigger>
<Portal>
<Tooltip.Positioner>
<Tooltip.Arrow>
<Tooltip.ArrowTip />
</Tooltip.Arrow>
<Tooltip.Content>Copy</Tooltip.Content>
</Tooltip.Positioner>
</Portal>
</Tooltip.Root>
);
};
Whereas now we are forced to use the abstracted https://park-ui.com/docs/components/tooltip
While the new version is nice for simple use cases, it makes it unusable for more complex applications.
Metadata
Metadata
Assignees
Labels
No labels