DenozordecandClaude Sonnet 5.5
f3531c64f9
Install ReUI (MCP, skill, @reui registry, Tailwind v4, shadcn base-nova) and move the shared UI onto it: Button, Tag, Check, Input/Textarea, Segmented, Alert, Panel, Dialog, Tooltip, Menu and Select (Popover), Toast (sonner), the Table frame (DataGrid), the Dashboard KPI strip, the shnt Ops palette, Geist and the type scale. Design only: behaviour, texts and roles are unchanged. Tests that asserted the old DOM were updated; the tests now format numbers in English wherever they run. docs/reui-migration-plan.md records the plan and its decisions. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import type { ButtonHTMLAttributes, Ref } from 'react'
|
|
import { Button as ReuiButton } from '@/components/ui/button'
|
|
|
|
export type ButtonVariant = 'primary' | 'secondary' | 'danger'
|
|
|
|
/*
|
|
The console's button is ReUI's: the three variants map onto its `default`, `outline`
|
|
and `destructive`, and the two sizes onto `default` and `sm`.
|
|
|
|
`size="sm"` is the button for a table row. It existed as `.ib` copied across three
|
|
modules and did not exist in DHCP, which used the large button: the same action
|
|
("Edit") looked different depending on which screen you were on.
|
|
*/
|
|
const VARIANT = { primary: 'default', secondary: 'outline', danger: 'destructive' } as const
|
|
|
|
export function Button({
|
|
variant = 'secondary',
|
|
size = 'md',
|
|
icon = false,
|
|
className,
|
|
ref,
|
|
...rest
|
|
}: ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
variant?: ButtonVariant
|
|
size?: 'md' | 'sm'
|
|
/** No label: an icon only. The width comes from the icon, not from text. */
|
|
icon?: boolean
|
|
ref?: Ref<HTMLButtonElement>
|
|
}) {
|
|
return (
|
|
<ReuiButton
|
|
ref={ref}
|
|
variant={VARIANT[variant]}
|
|
size={icon ? (size === 'sm' ? 'icon-sm' : 'icon') : size === 'sm' ? 'sm' : 'default'}
|
|
data-variant={variant}
|
|
data-icon={icon || undefined}
|
|
className={className}
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|