From 47958d41241ae64af5e616161cb635a0cd7287d6 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 14:23:20 +0800 Subject: [PATCH 1/8] Fix text input-style field label font size when outlined style is active. --- .../contact-form/class-contact-form-field.php | 6 ++-- .../forms/src/contact-form/css/grunion.css | 34 +++++++++++++++++++ 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php index 183aa92e39357..7fd5649f30e42 100644 --- a/projects/packages/forms/src/contact-form/class-contact-form-field.php +++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php @@ -1517,9 +1517,9 @@ public function render_outline_label( $id, $label, $required, $required_field_te for="' . esc_attr( $id ) . '" class=" ' . $classes . '" style="' . $this->label_styles . esc_attr( $output_data['css_vars'] ) . '" - >' - . esc_html( $label ) - . ( $required ? '' : '' ) . + > + ' . esc_html( $label ) . '' + . ( $required ? '' : '' ) . '
diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 5beb1b82ce8a6..b1d4d712d0113 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -568,6 +568,8 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__label { position: relative; + display: flex; + align-items: baseline; top: 50%; transform: translateY(-50%); pointer-events: none; @@ -577,6 +579,16 @@ on production builds, the attributes are being reordered, causing side-effects font-weight: 300; } +.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-text { + will-change: font-size; + transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-required { + will-change: font-size; + transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + .contact-form .is-style-outlined .grunion-field-wrap legend.grunion-field-label { font-weight: 300; } @@ -620,9 +632,31 @@ on production builds, the attributes are being reordered, causing side-effects { top: calc( var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1 ); transform: translateY(-50%); +} + +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-text { font-size: 0.8em; } +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-required { + + /* + * The font size should be 85% of the label font size, which is reduced separately to 0.8em for this focused style. + * 0.85 * 0.8 = 0.68em. + */ + font-size: 0.68em; +} + /* The following is scoped by the presence of the custom font size CSS var to avoid needing conditional fallback within the var() */ .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], From 7ca066ebb10571c558c8ececfc2bccecaff2b2bd Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 14:24:56 +0800 Subject: [PATCH 2/8] Remove scaling using variable --- .../packages/forms/src/contact-form/css/grunion.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index b1d4d712d0113..44290df98a36e 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -657,16 +657,6 @@ on production builds, the attributes are being reordered, causing side-effects font-size: 0.68em; } -/* The following is scoped by the presence of the custom font size CSS var to avoid needing conditional fallback within the var() */ -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .notched-label__label[style*="--jetpack--contact-form--label--font-size"], -.contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__label[style*="--jetpack--contact-form--label--font-size"] { - font-size: calc(var(--jetpack--contact-form--label--font-size) * 0.8); -} - .contact-form .is-style-outlined .grunion-field-wrap > input, .contact-form .is-style-outlined .grunion-field-wrap > textarea, .contact-form .is-style-outlined .grunion-field-wrap select { From a156a9e910508f1bc5d3a862f65487171737aad0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 14:37:28 +0800 Subject: [PATCH 3/8] Fix scaling of multiple option fields when using outlined style --- .../forms/src/contact-form/class-contact-form-field.php | 2 +- projects/packages/forms/src/contact-form/css/grunion.css | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/packages/forms/src/contact-form/class-contact-form-field.php b/projects/packages/forms/src/contact-form/class-contact-form-field.php index 7fd5649f30e42..45477dcef735d 100644 --- a/projects/packages/forms/src/contact-form/class-contact-form-field.php +++ b/projects/packages/forms/src/contact-form/class-contact-form-field.php @@ -666,7 +666,7 @@ public function render_legend_as_label( $type, $id, $legend, $required, $require return '' - . esc_html( $legend ) + . '' . esc_html( $legend ) . '' . ( $required ? '' . $required_field_text . '' : '' ) . "\n"; } diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 44290df98a36e..672a6850c1973 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -165,11 +165,15 @@ } .wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options legend { - font-size: 0.8em; + display: flex; + align-items: baseline; padding: 0 0.25em; position: relative; top: calc(var(--jetpack--contact-form--border-top-size, 1px) / 2 * -1); +} +.wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options .grunion-label-text { + font-size: 0.8em; } .contact-form .grunion-checkbox-multiple-options .contact-form-field, From 8b172a1c1e473875869fd0daba1d67fa36d8e9d1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 14:42:25 +0800 Subject: [PATCH 4/8] Tidy up styles --- .../forms/src/contact-form/css/grunion.css | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 672a6850c1973..6b94b9d4b7571 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -172,10 +172,6 @@ top: calc(var(--jetpack--contact-form--border-top-size, 1px) / 2 * -1); } -.wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options .grunion-label-text { - font-size: 0.8em; -} - .contact-form .grunion-checkbox-multiple-options .contact-form-field, .contact-form .grunion-radio-options .contact-form-field { display: flex; @@ -620,8 +616,6 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__notch, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__notch, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__notch, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .notched-label__notch, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .notched-label__notch, .contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__notch { border-top-color: transparent !important; @@ -630,8 +624,6 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .notched-label__label, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .notched-label__label, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .notched-label__label, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .notched-label__label, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .notched-label__label, .contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .notched-label__label { top: calc( var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size)) * -1 ); @@ -641,8 +633,8 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-text, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .grunion-label-text, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-text, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .grunion-label-text, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options .grunion-label-text, +.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options .grunion-label-text, .contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-text { font-size: 0.8em; } @@ -650,8 +642,8 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:focus) .grunion-label-required, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field:not(:placeholder-shown)) .grunion-label-required, .contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-field.has-placeholder) .grunion-label-required, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-checkbox-multiple-options) .grunion-label-required, -.contact-form .is-style-outlined .grunion-field-wrap .notched-label:has(~ .grunion-radio-options) .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options .grunion-label-required, +.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options .grunion-label-required, .contact-form .is-style-outlined .grunion-field-wrap.grunion-field-select-wrap .notched-label .grunion-label-required { /* From 7dd72640d6b4d73de662b9f45edc0d1b6caa7eb0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 14:44:29 +0800 Subject: [PATCH 5/8] Wrap labels --- projects/packages/forms/src/contact-form/css/grunion.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 6b94b9d4b7571..8b2ee78e4696e 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -167,6 +167,7 @@ .wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options legend { display: flex; align-items: baseline; + flex-wrap: wrap; padding: 0 0.25em; position: relative; top: calc(var(--jetpack--contact-form--border-top-size, 1px) / 2 * -1); @@ -570,6 +571,7 @@ on production builds, the attributes are being reordered, causing side-effects position: relative; display: flex; align-items: baseline; + flex-wrap: wrap; top: 50%; transform: translateY(-50%); pointer-events: none; From 705c2535fecb3f1dc63b87f12dda5fcc98a6eea1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 15:01:55 +0800 Subject: [PATCH 6/8] Fix outlined label font size and animation --- .../forms/src/blocks/contact-form/editor.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index e8918c0fc38c1..9528fb87160c9 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -278,6 +278,7 @@ .jetpack-field-label { display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: flex-start; align-items: baseline; @@ -833,7 +834,10 @@ max-width: 100px; } - .jetpack-field-label .jetpack-field-label__input { + .jetpack-field-label .jetpack-field-label__input, + .jetpack-field-label .required { + will-change: font-size; + transition: font-size 150ms cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 0; } @@ -851,6 +855,16 @@ .notched-label__label { top: calc(var(--jetpack--contact-form--border-top-size) * -1); transform: translateY(-50%); + } + + .jetpack-field-label .required { + // The required text is always 85% of the label font size. + // The label font size is reduced to 0.8em in a separate rule, so that needs to be accounted for. + // 0.85 * 0.8 = 0.68em. + font-size: 0.68em; + } + + .jetpack-field-label__input { font-size: 0.8em; } From 505e0eb88a3c45553bad3733c4a003ab69c535a8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 15:13:01 +0800 Subject: [PATCH 7/8] Fix animation by ensuring top is a valid value --- projects/packages/forms/src/blocks/contact-form/editor.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 9528fb87160c9..0eed484d20f36 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -810,7 +810,6 @@ position: relative; top: 50%; transform: translateY(-50%); - will-change: transform; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); margin: 0; @@ -853,7 +852,7 @@ } .notched-label__label { - top: calc(var(--jetpack--contact-form--border-top-size) * -1); + top: calc(var(--jetpack--contact-form--border-top-size, 1px) * -1); transform: translateY(-50%); } From 24de6105a7cd5b8ed81b1b8080938cd13b67dfc4 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 23 May 2025 15:13:44 +0800 Subject: [PATCH 8/8] Remove will-change: transform on frontend too. Transform usually does not change. --- projects/packages/forms/src/contact-form/css/grunion.css | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 8b2ee78e4696e..9f6e58ff946cf 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -575,7 +575,6 @@ on production builds, the attributes are being reordered, causing side-effects top: 50%; transform: translateY(-50%); pointer-events: none; - will-change: transform; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); margin: 0; font-weight: 300;