- Replace extendTheme/ColorModeScript with createSystem Provider + Toaster shims (components/ui, provider, color-mode) and next-themes; index.tsx renders Provider, App reads useColorMode from the shim and clears both chakra and legacy theme storage keys on preference change - theme.tsx restores the v2 identity on v3 primitives: v2 gray/blue/ green/red scales, v2 solid/contrast fills, v2 text-per-size for button/input/native-select/tag, v2 input heights, v2 heading scale (xl->4xl etc), v2 switch track/thumb, brighter link underlines (currentColor/60), +1px tag top padding, 17px body base font - Default new-user theme light -> dark to match the established dark UI - App.test rewritten around Provider + MemoryRouter + Home (old CRA 'learn react' assertion no longer applies)
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
|
|
import * as React from "react"
|
|
|
|
export interface TooltipProps extends ChakraTooltip.RootProps {
|
|
showArrow?: boolean
|
|
portalled?: boolean
|
|
portalRef?: React.RefObject<HTMLElement | null>
|
|
content: React.ReactNode
|
|
contentProps?: ChakraTooltip.ContentProps
|
|
disabled?: boolean
|
|
}
|
|
|
|
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
|
|
function Tooltip(props, ref) {
|
|
const {
|
|
showArrow,
|
|
children,
|
|
disabled,
|
|
portalled = true,
|
|
content,
|
|
contentProps,
|
|
portalRef,
|
|
...rest
|
|
} = props
|
|
|
|
if (disabled) return children
|
|
|
|
return (
|
|
<ChakraTooltip.Root {...rest}>
|
|
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
|
|
<Portal disabled={!portalled} container={portalRef}>
|
|
<ChakraTooltip.Positioner>
|
|
<ChakraTooltip.Content ref={ref} {...contentProps}>
|
|
{showArrow && (
|
|
<ChakraTooltip.Arrow>
|
|
<ChakraTooltip.ArrowTip />
|
|
</ChakraTooltip.Arrow>
|
|
)}
|
|
{content}
|
|
</ChakraTooltip.Content>
|
|
</ChakraTooltip.Positioner>
|
|
</Portal>
|
|
</ChakraTooltip.Root>
|
|
)
|
|
},
|
|
)
|