switch from is-horizontal to variation-horizontal

Author: CGastrell

projects/packages/forms/src/blocks/contact-form/edit.js

@@ -183,7 +183,7 @@ function JetpackContactFormEdit( { name, attributes, setAttributes, clientId, cl
 	const innerRef = useRef();
 	const blockProps = useBlockProps( {
 		ref: wrapperRef,
-		className: { 'is-horizontal': variationName === 'horizontal' },
+		className: { 'variation-horizontal': variationName === 'horizontal' },
 	} );
 	const formClassnames = clsx(
 		className,

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -1210,7 +1210,7 @@
 }
 
 /* Horizontal form layout */
-.wp-block-jetpack-contact-form.is-horizontal {
+.wp-block-jetpack-contact-form.variation-horizontal {
 
 	.jetpack-contact-form {
 		display: flex;

projects/packages/forms/src/blocks/contact-form/variations.js

@@ -26,7 +26,7 @@ const variations = [
 			variationName: 'default-empty',
 		},
 		scope: [ 'transform' ],
-		isActive: ( { variationName } ) => ![ 'multistep', 'horizontal' ].includes( variationName ),
+		isActive: ( { variationName } ) => ! [ 'multistep', 'horizontal' ].includes( variationName ),
 	},
 	{
 		name: 'contact-form',
@@ -1013,7 +1013,7 @@ const variations = [
 	},
 	{
 		name: 'horizontal-form',
-		title: __( 'Horizontal', 'jetpack-forms' ),
+		title: __( 'Horizontal form', 'jetpack-forms' ),
 		description: __( 'A form with fields displayed horizontally side by side.', 'jetpack-forms' ),
 		icon: {
 			foreground: getIconColor(),

projects/packages/forms/src/contact-form/class-contact-form.php

@@ -748,7 +748,7 @@ class='{$container_classes_string}'
 			}
 
 			if ( $is_horizontal ) {
-				$form_classes .= ' is-horizontal ';
+				$form_classes .= ' variation-horizontal ';
 			}
 
 			$r .= "<form action='" . esc_url( $url ) . "'

projects/packages/forms/src/contact-form/css/grunion.scss

@@ -1192,7 +1192,7 @@ on production builds, the attributes are being reordered, causing side-effects
 	transition: opacity 200ms cubic-bezier(0.34, 0.8, 0.34, 1), transform 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
 }
 
-.is-horizontal {
+.variation-horizontal {
 
 	.contact-form__input-error.has-errors {
 		position: absolute;
@@ -1252,7 +1252,7 @@ on production builds, the attributes are being reordered, causing side-effects
 }
 
 /* Horizontal form layout */
-.wp-block-jetpack-contact-form.is-horizontal > .wp-block-jetpack-contact-form {
+.wp-block-jetpack-contact-form.variation-horizontal > .wp-block-jetpack-contact-form {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;