starred/documenso

Fork 0

mirror of https://github.com/documenso/documenso.git synced 2026-04-24 21:36:01 +03:00

[PR #1697] [MERGED] fix: rework fields #1799

New issue

Closed

opened 2026-02-26 20:31:07 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 20:31:07 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/documenso/documenso/pull/1697
Author: @dguyen
Created: 3/11/2025
Status: ✅ Merged
Merged: 4/23/2025
Merged by: @Mythie

Base: main ← Head: fix/field-rework

📝 Commits (6)

bacb581 fix: rework fields
c992a36 fix: adjust field cropping
fb66c35 fix: checkbox error
085ed07 Merge branch 'main' into fix/field-rework
c9b1182 Merge branch 'main' into fix/field-rework
fc425e6 fix: support legacy field insertion to not break workflows

📊 Changes

62 files changed (+1829 additions, -1080 deletions)

View changed files

📝 apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx (+1 -1)
📝 apps/remix/app/components/embed/authoring/configure-fields-view.tsx (+3 -3)
📝 apps/remix/app/components/embed/embed-document-signing-page.tsx (+1 -1)
📝 apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx (+14 -9)
📝 apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx (+29 -13)
📝 apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx (+1 -1)
📝 apps/remix/app/components/general/document-signing/document-signing-date-field.tsx (+4 -6)
📝 apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx (+3 -7)
📝 apps/remix/app/components/general/document-signing/document-signing-email-field.tsx (+11 -24)
📝 apps/remix/app/components/general/document-signing/document-signing-field-container.tsx (+24 -28)
➕ apps/remix/app/components/general/document-signing/document-signing-fields.tsx (+51 -0)
📝 apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx (+14 -10)
📝 apps/remix/app/components/general/document-signing/document-signing-name-field.tsx (+13 -26)
📝 apps/remix/app/components/general/document-signing/document-signing-number-field.tsx (+11 -36)
📝 apps/remix/app/components/general/document-signing/document-signing-page-view.tsx (+6 -2)
📝 apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx (+28 -20)
📝 apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx (+3 -3)
📝 apps/remix/app/components/general/document-signing/document-signing-text-field.tsx (+17 -44)
➖ apps/remix/app/components/general/document/document-read-only-fields.tsx (+0 -171)
➕ apps/remix/app/components/general/legacy-field-warning-popover.tsx (+112 -0)

...and 42 more files

📄 Description

Description

Rework:

Field styling to improve visibility
Field insertions, better alignment, centering and overflows

Changes

General changes:

Set default text alignment to left if no meta found
Reduce borders and rings around fields to allow smaller fields
Removed lots of redundant duplicated code surrounding field rendering
Make fields more consistent across viewing, editing and signing
Add more transparency to fields to allow users to see under fields
No more optional/required/etc colors when signing, required fields will be highlighted as orange when form is "validating"

Highlighted internal changes:

Utilize native PDF fields to insert text, instead of drawing text
Change font auto scaling to only apply to when the height overflows AND no custom font is set

⚠️ Multiline changes:

Multi line is enabled for a field under these conditions

Field content exceeds field width
Field includes a new line
Field type is TEXT

[BEFORE] Field UI Signing

[AFTER] Field UI Signing

[BEFORE] Signing a checkbox

[AFTER] Signing a checkbox

[BEFORE] What a 2nd recipient sees once someone else signed a document

[AFTER] What a 2nd recipient sees once someone else signed a document

[BEFORE] Inserting fields

[AFTER] Inserting fields

Overflows, multilines and field alignments testing

Debugging borders:

Red border = The original field placement without any modifications
Blue border = The available space to overflow

Single line overflows and field alignments

This is left aligned fields, overflow will always go to the end of the page and will not wrap

This is center aligned fields, the max width is the closest edge to the page * 2

This is right aligned text, the width will extend all the way to the left hand side of the page

Multiline line overflows and field alignments

These are text fields that can be overflowed

Another example of left aligned text overflows with more text

Testing

TODO TEST EMBEDS CSS

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/documenso/documenso/pull/1697 **Author:** [@dguyen](https://github.com/dguyen) **Created:** 3/11/2025 **Status:** ✅ Merged **Merged:** 4/23/2025 **Merged by:** [@Mythie](https://github.com/Mythie) **Base:** `main` ← **Head:** `fix/field-rework` --- ### 📝 Commits (6) - [`bacb581`](https://github.com/documenso/documenso/commit/bacb5818259679fb22860d4d1b9763860c4f1a69) fix: rework fields - [`c992a36`](https://github.com/documenso/documenso/commit/c992a36b4b48116c03263f03cae5ebecde29943b) fix: adjust field cropping - [`fb66c35`](https://github.com/documenso/documenso/commit/fb66c353dacae84c2006192a662c2b8722c7eea0) fix: checkbox error - [`085ed07`](https://github.com/documenso/documenso/commit/085ed0741c027a3b65bb7a3c45e1c04e13927be8) Merge branch 'main' into fix/field-rework - [`c9b1182`](https://github.com/documenso/documenso/commit/c9b1182563b3dddca922626a2ad8c9645c71b1a4) Merge branch 'main' into fix/field-rework - [`fc425e6`](https://github.com/documenso/documenso/commit/fc425e6a9353445aaa68f5421d1eca94aca0f6a9) fix: support legacy field insertion to not break workflows ### 📊 Changes **62 files changed** (+1829 additions, -1080 deletions) <details> <summary>View changed files</summary> 📝 `apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx` (+1 -1) 📝 `apps/remix/app/components/embed/authoring/configure-fields-view.tsx` (+3 -3) 📝 `apps/remix/app/components/embed/embed-document-signing-page.tsx` (+1 -1) 📝 `apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx` (+14 -9) 📝 `apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx` (+29 -13) 📝 `apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx` (+1 -1) 📝 `apps/remix/app/components/general/document-signing/document-signing-date-field.tsx` (+4 -6) 📝 `apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx` (+3 -7) 📝 `apps/remix/app/components/general/document-signing/document-signing-email-field.tsx` (+11 -24) 📝 `apps/remix/app/components/general/document-signing/document-signing-field-container.tsx` (+24 -28) ➕ `apps/remix/app/components/general/document-signing/document-signing-fields.tsx` (+51 -0) 📝 `apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx` (+14 -10) 📝 `apps/remix/app/components/general/document-signing/document-signing-name-field.tsx` (+13 -26) 📝 `apps/remix/app/components/general/document-signing/document-signing-number-field.tsx` (+11 -36) 📝 `apps/remix/app/components/general/document-signing/document-signing-page-view.tsx` (+6 -2) 📝 `apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx` (+28 -20) 📝 `apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx` (+3 -3) 📝 `apps/remix/app/components/general/document-signing/document-signing-text-field.tsx` (+17 -44) ➖ `apps/remix/app/components/general/document/document-read-only-fields.tsx` (+0 -171) ➕ `apps/remix/app/components/general/legacy-field-warning-popover.tsx` (+112 -0) _...and 42 more files_ </details> ### 📄 Description ## Description Rework: - Field styling to improve visibility - Field insertions, better alignment, centering and overflows ## Changes General changes: - Set default text alignment to left if no meta found - Reduce borders and rings around fields to allow smaller fields - Removed lots of redundant duplicated code surrounding field rendering - Make fields more consistent across viewing, editing and signing - Add more transparency to fields to allow users to see under fields - No more optional/required/etc colors when signing, required fields will be highlighted as orange when form is "validating" Highlighted internal changes: - Utilize native PDF fields to insert text, instead of drawing text - Change font auto scaling to only apply to when the height overflows AND no custom font is set ⚠️ Multiline changes: Multi line is enabled for a field under these conditions 1. Field content exceeds field width 2. Field includes a new line 3. Field type is TEXT ## [BEFORE] Field UI Signing ![image](https://github.com/user-attachments/assets/ea002743-faeb-477c-a239-3ed240b54f55) ## [AFTER] Field UI Signing ![image](https://github.com/user-attachments/assets/0f8eb252-4cf3-4d96-8d4f-cd085881b78c) ## [BEFORE] Signing a checkbox ![image](https://github.com/user-attachments/assets/4567d745-e1da-4202-a758-5d3c178c930e) ![image](https://github.com/user-attachments/assets/c25068e7-fe80-40f5-b63a-e8a0d4b38b6c) ## [AFTER] Signing a checkbox ![image](https://github.com/user-attachments/assets/effa5e3d-385a-4c35-bc8a-405386dd27d6) ![image](https://github.com/user-attachments/assets/64be34a9-0b32-424d-9264-15361c03eca5) ## [BEFORE] What a 2nd recipient sees once someone else signed a document ![image](https://github.com/user-attachments/assets/21c21ae2-fc62-4ccc-880a-46aab012aa70) ## [AFTER] What a 2nd recipient sees once someone else signed a document ![image](https://github.com/user-attachments/assets/ae51677b-f1d5-4008-a7fd-756533166542) ## **[BEFORE]** Inserting fields ![image](https://github.com/user-attachments/assets/1a8bb8da-9a15-4deb-bc28-eb349414465c) ## **[AFTER]** Inserting fields ![image](https://github.com/user-attachments/assets/c52c5238-9836-45aa-b8a4-bc24a3462f40) ## Overflows, multilines and field alignments testing Debugging borders: - Red border = The original field placement without any modifications - Blue border = The available space to overflow ### Single line overflows and field alignments This is left aligned fields, overflow will always go to the end of the page and will not wrap ![image](https://github.com/user-attachments/assets/47003658-783e-4f9c-adbf-c4686804d98f) This is center aligned fields, the max width is the closest edge to the page * 2 ![image](https://github.com/user-attachments/assets/05a38093-75d6-4600-bae2-21ecff63e115) This is right aligned text, the width will extend all the way to the left hand side of the page ![image](https://github.com/user-attachments/assets/6a9d84a8-4166-4626-9fb3-1577fac2571e) ### Multiline line overflows and field alignments These are text fields that can be overflowed ![image](https://github.com/user-attachments/assets/f7b5456e-2c49-48b2-8d4c-ab1dc3401644) Another example of left aligned text overflows with more text ![image](https://github.com/user-attachments/assets/3db6b35e-4c8d-4ffe-8036-0da760d9c167) ## Testing ### **TODO TEST EMBEDS CSS** --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-02-26 20:31:07 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/documenso#1799

No description provided.

Rows
Columns