Fix form-related Jetpack style bugs (#2154)

Author: tylersticka

.changeset/cold-pillows-do.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix display of empty field values in Jetpack form success messaging

.changeset/nasty-frogs-smile.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix stretched `select` caret icon bug in Firefox by removing old Chrome hack that no longer seems necessary

.changeset/neat-parrots-shop.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Fix right padding in `select.c-input` elements (was missing a math operator)

src/mixins/_input.scss

@@ -86,15 +86,12 @@
 
 /// Types that disclose additional options should have an icon
 ///
-/// 1. Setting the background size to `100%` avoids a strange background shift
-///    bug on hover in Chrome but has no visible effect in other browsers as
-///    long as the image is an SVG that does not preserve its aspect ratio.
-/// 2. Firefox misaligns inner options when padding is applied, but all modern
+/// 1. Firefox misaligns inner options when padding is applied, but all modern
 ///    browsers seem to align selects predictably even when there is no
 ///    vertical padding. We still keep a small amount of padding because
 ///    Firefox's inner dotted outline looks gross when it runs into the outer
 ///    border, and existing hacks around this visibly degrade text rendering.
-/// 3. Prevents option text from overlapping icon.
+/// 2. Prevents option text from overlapping icon.
 @mixin icon-affordance(
   $icon-url: svg-load('icons/caret-down.svg', fill=color.$text-dark)
 ) {
@@ -104,9 +101,10 @@
 
   background-position: right size.$spacing-control-icon-inset center;
   background-repeat: no-repeat;
-  background-size: size.$square-control-icon 100%; // 1
-  padding-block: math.div(size.$padding-control-vertical, 2); // 2
-  padding-inline-end: size.$spacing-control-icon-inset size.$square-control-icon; // 3
+  background-size: size.$square-control-icon;
+  padding-block: math.div(size.$padding-control-vertical, 2); // 1
+  padding-inline-end: size.$spacing-control-icon-inset +
+    size.$square-control-icon; // 2
 }
 
 /// Various input and interaction states

src/vendor/wordpress/demo/contact-form/success.twig

@@ -34,11 +34,11 @@
         <p></p>
         <p></p>
         <div class="field-name">Date:</div>
-        <div class="field-value">Today</div>
+        <div class="field-value"></div>
         <p></p>
         <p></p>
         <div class="field-name">Phone:</div>
-        <div class="field-value">5555555555</div>
+        <div class="field-value"></div>
         <p></p>
         <p></p>
         <div class="field-name">Website:</div>

src/vendor/wordpress/jetpack-blocks.stories.mdx

@@ -46,7 +46,7 @@ Our styles include customizations for some of these form elements, with some exc
   </Story>
 </Canvas>
 
-The success messaging markup generated by these blocks is pretty quirky, but we do our best to style it.
+The success messaging markup generated by these blocks is pretty quirky, but we do our best to style it. Browsers that support `:has` will hide any field summaries with empty values.
 
 <Canvas>
   <Story name="Contact Form Success" parameters={{ layout: 'fullscreen' }}>

src/vendor/wordpress/styles/_jetpack-blocks.scss

@@ -154,19 +154,37 @@
     clear: left; // 1
     font-weight: font-weight.$medium; // 2
     margin-inline-end: 1ch; // 3
+
+    /// If there is no field value, don't bother displaying the field name.
+    &:has(+ .field-value:empty) {
+      display: none;
+    }
   }
 
-  /// 1. Field values appear slightly muted.
-  /// 2. Because values may break onto new lines, we need to use bottom margin
-  ///    to continue vertical rhythm. We only apply this when the field value is
-  ///    the last of its type: We can't use `:last-child` because it is often
-  ///    followed by an empty paragraph. (This can be simplified once
-  ///    `margin-trim` is widely supported!)
+  /// Field values appear slightly muted.
+
   .field-value {
-    color: var(--theme-color-text-muted); // 1
+    color: var(--theme-color-text-muted);
+
+    /// Empty field values need to clear floats to maintain margin.
+    &:empty {
+      clear: left;
+      float: none;
+
+      /// If the browser supports `:has()`, we can hide the field value entirely
+      /// since the field name will be hidden as well.
+      @supports selector(:has(+ :empty)) {
+        display: none;
+      }
+    }
 
+    /// Because values may break onto new lines, we need to use bottom margin
+    /// to continue vertical rhythm. We only apply this when the field value is
+    /// the last of its type: We can't use `:last-child` because it is often
+    /// followed by an empty paragraph. (This can be simplified once
+    /// `margin-trim` is widely supported!)
     &:not(:last-of-type) {
-      margin-block-end: var(--rhythm, #{size.$rhythm-default}); // 2
+      margin-block-end: var(--rhythm, #{size.$rhythm-default});
     }
   }
 }