Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-24 08:54:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance document signing page with field canvas style integration (#2876)

Browse Source
This commit is contained in:
Catalin Pit
2026-06-09 08:05:22 +03:00
committed by GitHub
parent 58f0f5da43
commit ecc98fbd41
12 changed files with 364 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/field/field.tsx
+2 -1
View File
@@ -7,6 +7,7 @@ import { type Field, FieldType } from '@prisma/client';
import React, { useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { FIELD_ROOT_CONTAINER_CLASS_NAME } from '../../lib/field-root-container-classes';
import type { RecipientColorStyles } from '../../lib/recipient-colors';
import { cn } from '../../lib/utils';
@@ -117,7 +118,7 @@ export function FieldRootContainer({ field, children, color, className, readonly
data-inserted={field.inserted ? 'true' : 'false'}
data-readonly={readonly ? 'true' : 'false'}
className={cn(
'field--FieldRootContainer field-card-container dark-mode-disabled group relative z-20 flex h-full w-full items-center rounded-[2px] bg-white/90 ring-2 ring-gray-200 transition-all',
FIELD_ROOT_CONTAINER_CLASS_NAME,
color?.base,
{
'px-2': field.type !== FieldType.SIGNATURE && field.type !== FieldType.FREE_SIGNATURE,
packages/ui/lib/field-root-container-classes.ts
+14
View File
@@ -0,0 +1,14 @@
const FIELD_ROOT_CONTAINER_SHARED_CLASS_NAME =
'field--FieldRootContainer field-card-container dark-mode-disabled group rounded-[2px] bg-white/90 ring-2 ring-gray-200 transition-all';
export const FIELD_ROOT_CONTAINER_CLASS_NAME = `${FIELD_ROOT_CONTAINER_SHARED_CLASS_NAME} relative z-20 flex h-full w-full items-center`;
export const FIELD_ROOT_CONTAINER_PROBE_CLASS_NAME = `field--FieldRootContainerProbe ${FIELD_ROOT_CONTAINER_SHARED_CLASS_NAME}`;
/**
* Selector for the element the probe is appended into when reading computed
* field styles. It must be an ancestor of where real fields render so the probe
* inherits the same CSS cascade (custom embed CSS is commonly scoped under
* `.embed--Root` / `.embed--DocumentContainer`).
*/
export const FIELD_PROBE_ANCHOR_SELECTOR = '.embed--DocumentContainer';
packages/ui/package.json
+1
View File
@@ -61,6 +61,7 @@
"class-variance-authority": "^0.7.1",
"clsx": "^1.2.1",
"cmdk": "^0.2.1",
"colord": "^2.9.3",
"framer-motion": "^12.23.24",
"lucide-react": "^0.554.0",
"luxon": "^3.7.2",