Skip to content

Forms: Fix outline style label font size #43590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: update/migrate-form-fields-to-inner-blocks
Choose a base branch
from
Open

Forms: Fix outline style label font size #43590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
47958d4
Fix text input-style field label font size when outlined style is act…
talldan May 23, 2025
7ca066e
Remove scaling using variable
talldan May 23, 2025
a156a9e
Fix scaling of multiple option fields when using outlined style
talldan May 23, 2025
8b172a1
Tidy up styles
talldan May 23, 2025
7dd7264
Wrap labels
talldan May 23, 2025
705c253
Fix outlined label font size and animation
talldan May 23, 2025
505e0eb
Fix animation by ensuring top is a valid value
talldan May 23, 2025
24de610
Remove will-change: transform on frontend too. Transform usually does…
talldan May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions projects/packages/forms/src/blocks/contact-form/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@
.jetpack-field-label {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;

Expand Down Expand Up @@ -809,7 +810,6 @@
position: relative;
top: 50%;
transform: translateY(-50%);
will-change: transform;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For most fields, transform actually doesn't change it stays at transform: translateY(-50%);, so I've removed this.

transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
margin: 0;

Expand All @@ -833,7 +833,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;
}

Expand All @@ -849,8 +852,18 @@
}

.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%);
}

.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;
}

Expand Down
8 changes: 4 additions & 4 deletions projects/packages/forms/src/contact-form/class-contact-form-field.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,7 +666,7 @@ public function render_legend_as_label( $type, $id, $legend, $required, $require
return '<legend '
. $extra_attrs_string
. '>'
. esc_html( $legend )
. '<span class="grunion-label-text">' . esc_html( $legend ) . '</span>'
. ( $required ? '<span class="grunion-label-required">' . $required_field_text . '</span>' : '' )
. "</legend>\n";
}
Expand Down Expand Up @@ -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 ? '<span class="grunion-label-required" aria-hidden="true">' . $required_field_text . '</span>' : '' ) .
>
<span class="grunion-label-text">' . esc_html( $label ) . '</span>'
. ( $required ? '<span class="grunion-label-required" aria-hidden="true">' . $required_field_text . '</span>' : '' ) .
'</label>
</div>
<div class="notched-label__filler' . esc_attr( $output_data['class_name'] ) . '" style="' . esc_attr( $output_data['style'] ) . '"></div>
Expand Down
51 changes: 36 additions & 15 deletions projects/packages/forms/src/contact-form/css/grunion.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,11 +165,12 @@
}

.wp-block-jetpack-contact-form.is-style-outlined .wp-block-jetpack-options legend {
font-size: 0.8em;
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);

}

.contact-form .grunion-checkbox-multiple-options .contact-form-field,
Expand Down Expand Up @@ -568,15 +569,27 @@ 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;
flex-wrap: wrap;
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;
}

.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;
}
Expand Down Expand Up @@ -604,8 +617,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;
Expand All @@ -614,23 +625,33 @@ 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 );
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 .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;
}

/* 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 .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 .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 {

/*
* 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;
}

.contact-form .is-style-outlined .grunion-field-wrap > input,
Expand Down
Loading