From be9d10d41aef9e71a8aa89f618dae1fda0fdacf4 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 30 Dec 2024 09:32:26 +0200 Subject: [PATCH 1/2] Form block: Fix submit button styles when there are errors --- .../packages/forms/src/contact-form/css/grunion.css | 13 ++++++------- .../forms/src/contact-form/js/accessible-form.js | 2 +- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 660dbbd5cf428..885326a247da1 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -321,16 +321,16 @@ .contact-form .contact-form__select-wrapper::after { position: absolute; inset-inline-end: calc(var(--jetpack--contact-form--input-padding-left) + 4px); - top: calc(var(--jetpack--contact-form--input-padding-top) + var(--jetpack--contact-form--line-height) / 2); + top: calc(var(--jetpack--contact-form--input-padding-top) + var(--jetpack--contact-form--line-height) / 2); content: ""; display: block; width: 8px; height: 8px; - + border-bottom: 2px solid; border-right: 2px solid; - + transform: translateY(-50%) rotate(45deg); transform-origin: center center; @@ -594,7 +594,7 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .grunion-field-wrap input.checkbox-multiple:checked::before { content: "\2713"; - + position: absolute; top: calc(var(--jetpack--contact-form--font-size) / 2); left: calc(var(--jetpack--contact-form--font-size) / 2); @@ -603,7 +603,7 @@ on production builds, the attributes are being reordered, causing side-effects font-size: var(--jetpack--contact-form--font-size); line-height: 1; - + transform: translate(-50%, -50%); } @@ -714,7 +714,6 @@ on production builds, the attributes are being reordered, causing side-effects } .contact-form__error { - margin-bottom: var(--wp--style--block-gap, 1.5rem); padding: 1em; gap: var(--warning-icon-margin); @@ -815,4 +814,4 @@ on production builds, the attributes are being reordered, causing side-effects position: absolute; white-space: nowrap; width: 1px; -} \ No newline at end of file +} diff --git a/projects/packages/forms/src/contact-form/js/accessible-form.js b/projects/packages/forms/src/contact-form/js/accessible-form.js index 20a1d6ff43d86..229b553bd415b 100644 --- a/projects/packages/forms/src/contact-form/js/accessible-form.js +++ b/projects/packages/forms/src/contact-form/js/accessible-form.js @@ -897,7 +897,7 @@ const setFormError = ( form, invalidFields, opts = {} ) => { const submitBtn = getFormSubmitBtn( form ); if ( submitBtn ) { - submitBtn.parentNode.insertBefore( error, submitBtn ); + submitBtn.parentNode.parentNode.insertBefore( error, submitBtn.parentNode ); } else { form.appendChild( error ); } From efcc928f06023c692b118811ac28c36159a6f695 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 30 Dec 2024 09:36:31 +0200 Subject: [PATCH 2/2] add changelog entry --- .../changelog/fix-form-block-submit-button-styles-when-errors | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/forms/changelog/fix-form-block-submit-button-styles-when-errors diff --git a/projects/packages/forms/changelog/fix-form-block-submit-button-styles-when-errors b/projects/packages/forms/changelog/fix-form-block-submit-button-styles-when-errors new file mode 100644 index 0000000000000..d9d7d5ed0de2a --- /dev/null +++ b/projects/packages/forms/changelog/fix-form-block-submit-button-styles-when-errors @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Form block: Fix submit button styles when there are errors