From a3445cd6e738b15b39c79bc2dd7bfa235c5ae0b6 Mon Sep 17 00:00:00 2001 From: Ikshu Jain Date: Thu, 21 May 2026 20:06:05 +0530 Subject: [PATCH 1/4] FORMS-25687: Adobe Sign Block component --- .../adobesignblock/_adobesignblock.scss | 56 +++++++++++++++++++ src/theme.scss | 1 + 2 files changed, 57 insertions(+) create mode 100644 src/components/adobesignblock/_adobesignblock.scss diff --git a/src/components/adobesignblock/_adobesignblock.scss b/src/components/adobesignblock/_adobesignblock.scss new file mode 100644 index 0000000..e888bea --- /dev/null +++ b/src/components/adobesignblock/_adobesignblock.scss @@ -0,0 +1,56 @@ +// ============================================================================ +// Adobe Sign Block — Core Adaptive Form Component +// Renders rich text with data-adobesigntype placeholder spans. +// Visibility is controlled globally by the form container: +// form:not(.cmp-adaptiveform-container--edit) [data-cmp-visible="false"] { display:none } +// That rule already hides the block during form fill and shows it in edit mode. +// ============================================================================ + +.cmp-adaptiveform-adobesignblock { + display: block; + font-family: $font-family; + font-size: $font-md; + color: $dark-gray; + margin: $field-margin; +} + +.cmp-adaptiveform-adobesignblock__label-container { + margin-bottom: 0.5rem; +} + +.cmp-adaptiveform-adobesignblock__label { + font-family: $font-family; + font-size: $font-md; + font-weight: normal; + color: $dark-gray; +} + +.cmp-adaptiveform-adobesignblock__value { + line-height: 1.5; + border: 1px solid $very-light-gray; + border-radius: 8px; + background-color: $panel-bg-color; + padding: 1.25rem 1.5rem; + min-height: 5rem; + + p { + margin: 0 0 0.5rem; + + &:last-child { + margin-bottom: 0; + } + } + + // Adobe Sign field placeholder spans. + // font-size:0 hides the raw {{…}} token text; border-bottom + min-width + // produce the visible underline that marks the signing area. + [data-adobesigntype] { + display: inline-block; + min-width: 100px; + min-height: 1em; + border-bottom: 1px solid $light-gray; + font-size: 0; + vertical-align: bottom; + margin: 0 0.5rem; + } +} diff --git a/src/theme.scss b/src/theme.scss index 3f94c08..29fa5bc 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -45,3 +45,4 @@ @import './components/scribble/_scribble.scss'; @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss'; +@import './components/adobesignblock/_adobesignblock.scss'; From bd0713ebf2d16ffec4137607d1d02ca6ec041fe3 Mon Sep 17 00:00:00 2001 From: Ikshu Jain Date: Fri, 22 May 2026 18:11:13 +0530 Subject: [PATCH 2/4] FORMS-25687: Edit button fix for Adobe Sign Block --- .../adobesignblock/_adobesignblock.scss | 57 +++++++++++++++---- src/resources/images/adobesign/checkbox.svg | 16 ++++++ .../images/adobesign/dropdown_chevron.svg | 12 ++++ .../images/adobesign/radiobutton.svg | 18 ++++++ src/resources/images/checkbox.svg | 16 ++++++ src/resources/images/dropdown_chevron.svg | 12 ++++ src/resources/images/radiobutton.svg | 18 ++++++ 7 files changed, 138 insertions(+), 11 deletions(-) create mode 100644 src/resources/images/adobesign/checkbox.svg create mode 100644 src/resources/images/adobesign/dropdown_chevron.svg create mode 100644 src/resources/images/adobesign/radiobutton.svg create mode 100644 src/resources/images/checkbox.svg create mode 100644 src/resources/images/dropdown_chevron.svg create mode 100644 src/resources/images/radiobutton.svg diff --git a/src/components/adobesignblock/_adobesignblock.scss b/src/components/adobesignblock/_adobesignblock.scss index e888bea..1818628 100644 --- a/src/components/adobesignblock/_adobesignblock.scss +++ b/src/components/adobesignblock/_adobesignblock.scss @@ -1,9 +1,7 @@ // ============================================================================ // Adobe Sign Block — Core Adaptive Form Component // Renders rich text with data-adobesigntype placeholder spans. -// Visibility is controlled globally by the form container: -// form:not(.cmp-adaptiveform-container--edit) [data-cmp-visible="false"] { display:none } -// That rule already hides the block during form fill and shows it in edit mode. +// Placeholder visuals match foundation forms (fd/afaddon/adobesign/common). // ============================================================================ .cmp-adaptiveform-adobesignblock { @@ -41,16 +39,53 @@ } } - // Adobe Sign field placeholder spans. - // font-size:0 hides the raw {{…}} token text; border-bottom + min-width - // produce the visible underline that marks the signing area. + // Hide raw {{…}} token text in placeholders (authoring + runtime) + [data-adobesigntype]::selection { + color: rgba(0, 0, 0, 0); + } + + [data-adobesigntype]::-moz-selection { + color: rgba(0, 0, 0, 0); + } + + // Default field placeholder (signature, text, number, date, etc.) [data-adobesigntype] { + width: 6rem; display: inline-block; - min-width: 100px; - min-height: 1em; - border-bottom: 1px solid $light-gray; - font-size: 0; + color: rgba(0, 0, 0, 0); + border-bottom-style: solid; + border-bottom-width: 1px; + border-bottom-color: rgba(0, 0, 0, 0.3); + margin-left: 0.5rem; + margin-right: 0.5rem; + white-space: nowrap; + overflow: hidden; + cursor: pointer; vertical-align: bottom; - margin: 0 0.5rem; + min-height: 1em; + } + + // Radio and checkbox: icon + label bar, no underline + [data-adobesigntype='radio'], + [data-adobesigntype='checkbox'] { + border-bottom-width: 0; + background-repeat: no-repeat; + background-position: left center; + width: 3rem; + min-width: 3rem; + } + + [data-adobesigntype='radio'] { + background-image: url(./resources/images/radiobutton.svg); + } + + [data-adobesigntype='checkbox'] { + background-image: url(./resources/images/checkbox.svg); + } + + [data-adobesigntype='dropdown'] { + background-image: url(./resources/images/dropdown_chevron.svg); + background-repeat: no-repeat; + background-position: right center; } } diff --git a/src/resources/images/adobesign/checkbox.svg b/src/resources/images/adobesign/checkbox.svg new file mode 100644 index 0000000..97bd161 --- /dev/null +++ b/src/resources/images/adobesign/checkbox.svg @@ -0,0 +1,16 @@ + + + + CheckBox + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/resources/images/adobesign/dropdown_chevron.svg b/src/resources/images/adobesign/dropdown_chevron.svg new file mode 100644 index 0000000..8f0b32b --- /dev/null +++ b/src/resources/images/adobesign/dropdown_chevron.svg @@ -0,0 +1,12 @@ + + + + DropdownChevron + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/resources/images/adobesign/radiobutton.svg b/src/resources/images/adobesign/radiobutton.svg new file mode 100644 index 0000000..1c4efaf --- /dev/null +++ b/src/resources/images/adobesign/radiobutton.svg @@ -0,0 +1,18 @@ + + + + RadioButton + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/resources/images/checkbox.svg b/src/resources/images/checkbox.svg new file mode 100644 index 0000000..97bd161 --- /dev/null +++ b/src/resources/images/checkbox.svg @@ -0,0 +1,16 @@ + + + + CheckBox + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/resources/images/dropdown_chevron.svg b/src/resources/images/dropdown_chevron.svg new file mode 100644 index 0000000..8f0b32b --- /dev/null +++ b/src/resources/images/dropdown_chevron.svg @@ -0,0 +1,12 @@ + + + + DropdownChevron + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/resources/images/radiobutton.svg b/src/resources/images/radiobutton.svg new file mode 100644 index 0000000..1c4efaf --- /dev/null +++ b/src/resources/images/radiobutton.svg @@ -0,0 +1,18 @@ + + + + RadioButton + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file From 0acff87bc85c09bfc4bd7d3e11b51871d9ae22ac Mon Sep 17 00:00:00 2001 From: Ikshu Jain Date: Thu, 18 Jun 2026 13:54:58 +0530 Subject: [PATCH 3/4] FORMS-25687: Removing redundant files --- src/resources/images/adobesign/checkbox.svg | 16 ---------------- .../images/adobesign/dropdown_chevron.svg | 12 ------------ src/resources/images/adobesign/radiobutton.svg | 18 ------------------ 3 files changed, 46 deletions(-) delete mode 100644 src/resources/images/adobesign/checkbox.svg delete mode 100644 src/resources/images/adobesign/dropdown_chevron.svg delete mode 100644 src/resources/images/adobesign/radiobutton.svg diff --git a/src/resources/images/adobesign/checkbox.svg b/src/resources/images/adobesign/checkbox.svg deleted file mode 100644 index 97bd161..0000000 --- a/src/resources/images/adobesign/checkbox.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - CheckBox - Created with Sketch. - - - - - - - - - - - \ No newline at end of file diff --git a/src/resources/images/adobesign/dropdown_chevron.svg b/src/resources/images/adobesign/dropdown_chevron.svg deleted file mode 100644 index 8f0b32b..0000000 --- a/src/resources/images/adobesign/dropdown_chevron.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - DropdownChevron - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/src/resources/images/adobesign/radiobutton.svg b/src/resources/images/adobesign/radiobutton.svg deleted file mode 100644 index 1c4efaf..0000000 --- a/src/resources/images/adobesign/radiobutton.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - RadioButton - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file From f085eb7e61f14b46e04dd02eecbbe9463eae3e09 Mon Sep 17 00:00:00 2001 From: Ikshu Jain Date: Thu, 18 Jun 2026 13:57:11 +0530 Subject: [PATCH 4/4] FORMS-25687: fix --- src/components/adobesignblock/_adobesignblock.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/adobesignblock/_adobesignblock.scss b/src/components/adobesignblock/_adobesignblock.scss index 1818628..7beb3eb 100644 --- a/src/components/adobesignblock/_adobesignblock.scss +++ b/src/components/adobesignblock/_adobesignblock.scss @@ -1,7 +1,6 @@ // ============================================================================ // Adobe Sign Block — Core Adaptive Form Component // Renders rich text with data-adobesigntype placeholder spans. -// Placeholder visuals match foundation forms (fd/afaddon/adobesign/common). // ============================================================================ .cmp-adaptiveform-adobesignblock {