asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: DX improvements to a workflow / step reference page (#10906)

Browse Source
This commit is contained in:
Shahed Nasser
2025-01-10 13:47:08 +02:00
committed by GitHub
parent 428fce5313
commit a126f40bbe
23 changed files with 138116 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
www/packages/docs-ui/src/components/Tooltip/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import React, { useId } from "react"
import React, { forwardRef, useId } from "react"
import { Tooltip as ReactTooltip } from "react-tooltip"
import type { ITooltip } from "react-tooltip"
import clsx from "clsx"
@@ -15,47 +15,52 @@ export type TooltipProps = {
} & React.HTMLAttributes<HTMLSpanElement> &
ITooltip
export const Tooltip = ({
text = "",
tooltipClassName = "",
children,
html = "",
tooltipChildren,
className,
innerClassName,
...tooltipProps
}: TooltipProps) => {
const elementId = useId()
export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
function Tooltip(
{
text = "",
tooltipClassName = "",
children,
html = "",
tooltipChildren,
className,
innerClassName,
...tooltipProps
},
ref
) {
const elementId = useId()
return (
<span className={clsx(className, "notranslate")} translate="no">
<span
id={elementId}
data-tooltip-content={text}
data-tooltip-html={html}
data-tooltip-id={elementId}
className={innerClassName}
>
{children}
return (
<span className={clsx(className, "notranslate")} translate="no" ref={ref}>
<span
id={elementId}
data-tooltip-content={text}
data-tooltip-html={html}
data-tooltip-id={elementId}
className={innerClassName}
>
{children}
</span>
<ReactTooltip
anchorId={elementId}
// anchorSelect={elementId ? `#${elementId}` : undefined}
className={clsx(
"!text-compact-x-small !shadow-elevation-tooltip dark:!shadow-elevation-tooltip-dark !rounded-docs_DEFAULT",
"!py-docs_0.25 !z-[399] hidden !px-docs_0.5 lg:block",
"!bg-medusa-bg-component",
"!text-medusa-fg-base text-center",
tooltipClassName
)}
wrapper="span"
noArrow={true}
positionStrategy={"fixed"}
opacity={1}
{...tooltipProps}
>
{tooltipChildren}
</ReactTooltip>
</span>
<ReactTooltip
anchorId={elementId}
// anchorSelect={elementId ? `#${elementId}` : undefined}
className={clsx(
"!text-compact-x-small !shadow-elevation-tooltip dark:!shadow-elevation-tooltip-dark !rounded-docs_DEFAULT",
"!py-docs_0.25 !z-[399] hidden !px-docs_0.5 lg:block",
"!bg-medusa-bg-component",
"!text-medusa-fg-base text-center",
tooltipClassName
)}
wrapper="span"
noArrow={true}
positionStrategy={"fixed"}
opacity={1}
{...tooltipProps}
>
{tooltipChildren}
</ReactTooltip>
</span>
)
}
)
}
)