Files
Genarrative/src/components/common/PlatformInlineOptionButton.tsx
T
JenkenB 8956ed6fe6 Unify canvas generation placement and UI changes
Add unified placement and UI updates for canvas generation: docs require ImageCanvasGenerationPlacementModel to compute placeholder positions (avoid overlaps, center viewport on placement) and limit frontend video model entries. Refactor UI components and tests: expose div props on PlatformFloatingMenu, make PlatformInlineOptionButton forwardRef, replace inline placeholder actions with ImageCanvasGenerationImageOptionsView in basic generation composer, enhance character animation panel with parameter menu portal and option choices, add reference chip UI, and update many tests to match new interactions and labels. These changes align generation workflows, accessibility labels, and positioning behavior across editor panels.
2026-06-18 11:40:19 +08:00

40 lines
1.2 KiB
TypeScript

import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
type PlatformInlineOptionButtonProps = Omit<
ButtonHTMLAttributes<HTMLButtonElement>,
'children'
> & {
children: ReactNode;
trailingIcon?: ReactNode;
};
/**
* 平台内联选项按钮。
* 统一承接工具面板里“当前选项 + 下拉箭头”这类轻量 pill 动作。
*/
export const PlatformInlineOptionButton = forwardRef<
HTMLButtonElement,
PlatformInlineOptionButtonProps
>(function PlatformInlineOptionButton(
{ children, trailingIcon, className, type = 'button', ...buttonProps },
ref,
) {
const actionClassName = [
'platform-inline-option-button inline-flex items-center justify-center border-0 bg-transparent text-sm font-black text-slate-700 transition-colors hover:text-slate-950 disabled:cursor-not-allowed disabled:opacity-55',
className,
]
.filter(Boolean)
.join(' ');
return (
<button {...buttonProps} ref={ref} type={type} className={actionClassName}>
<span className="platform-inline-option-button__label">{children}</span>
{trailingIcon ? (
<span className="platform-inline-option-button__trailing" aria-hidden="true">
{trailingIcon}
</span>
) : null}
</button>
);
});